Figsor — CursorとFigmaをつなぐチャット駆動デザインブリッジ

Tool
Figsor — CursorとFigmaをつなぐチャット駆動デザインブリッジ

Figsor — CursorとFigmaをつなぐチャット駆動デザインブリッジ

Figsorは、Cursor AIからのチャット操作をFigma上のデザイン作成・編集に変換するMCPサーバーとプラグインのセットです。Cursor（チャット）→MCP（stdio）→Figsorサーバー→WebSocket→Figmaプラグインというデータフローで、会話ベースの指示を受けてFigmaキャンバス上に要素を生成・編集します。プロトタイプ寄りの実装で、ローカル実行とサイドロードによるFigmaプラグイン導入が前提です。（約300字）

https://github.com/AsifKabirAntu/figsor

概要

Figsorは「Chat in Cursor. Design in Figma.」を掲げるブリッジツールで、Cursor AI（チャットベースの開発支援ツール）からの出力をFigma上での実際のデザイン操作に変換します。アーキテクチャは、CursorがMCP（stdio経由）でメッセージを送り、ローカルで動作するFigsorサーバーがこれを受け取りWebSocketでFigmaプラグインに中継、プラグインが実際にキャンバス上で図形やテキストの作成・編集を行う流れです。リポジトリはJavaScriptで実装され、figma-pluginディレクトリとmcp-serverディレクトリに主な実装が分かれています。現状はプロトタイプ的な構成で、手動でのサイドロードとローカルサーバー起動が必要です。（約300字）

GitHub

リポジトリの統計情報

  • スター数: 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字）

リポジトリ情報：

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 Canvas

Setup

1. Install the Figma Plugin (Sideload)

Clone this repo and import the plugin into Figma:

git clone https://github.com/asifkabir/figsor.git

In Fig…