Figsor — CursorとFigmaをつなぐチャット駆動デザインブリッジ
AsifKabirAntu/figsor
★ 73
概要
Figsorは「Chat in Cursor. Design in Figma.」を掲げるブリッジツールで、Cursor AI（チャットベースの開発支援ツール）からの出力をFigma上での実際のデザイン操作に変換します。アーキテクチャは、CursorがMCP（stdio経由）でメッセージを送り、ローカルで動作するFigsorサーバーがこれを受け取りWebSocketでFigmaプラグインに中継、プラグインが実際にキャンバス上で図形やテキストの作成・編集を行う流れです。リポジトリはJavaScriptで実装され、figma-pluginディレクトリとmcp-serverディレクトリに主な実装が分かれています。現状はプロトタイプ的な構成で、手動でのサイドロードとローカルサーバー起動が必要です。（約300字）
リポジトリの統計情報
- スター数: 7
- フォーク数: 2
- ウォッチャー数: 7
- コミット数: 2
- ファイル数: 5
- メインの言語: JavaScript
主な特徴
- Cursor AIのチャット指示をFigmaキャンバス上の操作（作成・編集）に変換するブリッジ機能
- MCP（stdio）経由でCursorと通信するローカルサーバー（mcp-server）と、Figma上で動作するプラグインの二層構成
- WebSocketを使ったリアルタイム中継でプラグインにコマンドを送信
- サイドロード可能なFigmaプラグインでユーザー側に容易に導入可能（プロトタイプ段階）
技術的なポイント
Figsorのコアは「チャット→命令→キャンバス操作」という変換パイプラインにあります。READMEにあるように、CursorはMCP（stdio）を通じてメッセージを出力し、Figsorのmcp-serverがその標準入出力を受け取ってパースします。mcp-serverは受け取った命令や応答をWebSocketでFigmaプラグインへ転送し、プラグイン側がFigmaプラグインAPIを使って実際の図形・テキストの生成や編集を実行します。これにより、ユーザーはCursorのチャットUXを通じて自然言語ベースでデザイン操作が可能になります。
実装はJavaScriptベースで、サーバー側はNode.jsランタイム想定のコード（mcp-serverディレクトリ）を含み、クライアント側はFigmaのプラグイン仕様に合わせたコード（figma-pluginディレクトリ）を持ちます。通信面ではMCP→stdio→WebSocket→Figma pluginという二段階のプロトコル変換を行い、メッセージ整形やコマンドマッピング（例：“Create button”→矩形＋テキスト＋スタイル適用）が重要な役割を果たします。
注意点としては、FigmaプラグインはユーザーのFigmaファイル上で直接操作を行うため、権限やデータの取り扱いに配慮する必要があります。ローカルで動くmcp-serverとプラグイン間の通信は基本的にローカル環境を前提としているため、外部公開や認証を伴う場合はTLSや認証トークンの追加、CORSやアクセス制御などの対策が必要です。また、自然言語からUI命令への変換はあいまいさを含むため、命令パーシングやエラーハンドリング、ユーザー確認のワークフローを整備すると実用性が高まります。現状はプロトタイプ的であり、安定化・拡張（複雑なレイアウト生成、デザインシステム適用、コラボレーション対応など）を進める余地があります。（約700字）
プロジェクトの構成
主要なファイルとディレクトリ：
- .gitignore: file
- README.md: file
- figma-plugin: dir
- mcp-server: dir
- package.json: file
まとめ
Cursorのチャット体験をFigmaの実作業に直結させる実験的なブリッジ。プロトタイプだが将来性あり。（約50字）
リポジトリ情報：
- 名前: figsor
- 説明: Figsor is an MCP server that bridges Cursor to Figma, enabling chat-driven design creation and editing - directly on your Figma canvas.
- スター数: 7
- 言語: JavaScript
- URL: https://github.com/AsifKabirAntu/figsor
- オーナー: AsifKabirAntu
- アバター: https://avatars.githubusercontent.com/u/36102884?v=4
READMEの抜粋：
Figsor
Chat in Cursor. Design in Figma.
Figsor is an MCP server that bridges Cursor AI to Figma, enabling chat-driven design creation and editing — directly on your Figma canvas.
Cursor → MCP (stdio) → Figsor Server → WebSocket → Figma Plugin → Design on CanvasSetup
1. Install the Figma Plugin (Sideload)
Clone this repo and import the plugin into Figma:
git clone https://github.com/asifkabir/figsor.gitIn Fig…
