カーソルでFigma MCPと会話

このプロジェクトは、Cursor AI と Figma 間のモデル コンテキスト プロトコル (MCP) 統合を実装し、Cursor が Figma と通信してデザインを読み取り、プログラムで変更できるようにします。

https://github.com/user-attachments/assets/129a14d2-ed73-470f-9a4c-2240b2a4885c

プロジェクト構造

• src/talk_to_figma_mcp/ - Figma 統合用の TypeScript MCP サーバー

• src/cursor_mcp_plugin/ - カーソルと通信するためのFigmaプラグイン

• src/socket.ts - MCP サーバーと Figma プラグイン間の通信を容易にする WebSocket サーバー

Related MCP server: Talk to Figma MCP

始める

1. まだインストールしていない場合は、Bun をインストールしてください。

curl -fsSL https://bun.sh/install | bash

2. セットアップを実行すると、カーソルのアクティブプロジェクトにMCPもインストールされます。

bun setup

3. Websocketサーバーを起動する

bun start

4. Figmaプラグインをインストールする

手動セットアップとインストール

MCP サーバー: カーソルとの統合

~/.cursor/mcp.jsonの Cursor MCP 構成にサーバーを追加します。

{
  "mcpServers": {
    "TalkToFigma": {
      "command": "bun",
      "args": [
        "/path/to/cursor-talk-to-figma-mcp/src/talk_to_figma_mcp/server.ts"
      ]
    }
  }
}

WebSocketサーバー

WebSocket サーバーを起動します。

bun run src/socket.ts

Figmaプラグイン

1. Figmaで、プラグイン > 開発 > 新しいプラグインに移動します

2. 「既存のプラグインをリンク」を選択

3. src/cursor_mcp_plugin/manifest.jsonファイルを選択します。

4. プラグインはFigma開発プラグインで利用できるようになります。

使用法

1. WebSocketサーバーを起動する

2. カーソルにMCPサーバーをインストールする

3. Figmaを開いてカーソルMCPプラグインを実行します。

4. join_channelを使用してチャネルに参加し、プラグインを WebSocket サーバーに接続します。

5. MCPツールを使ってFigmaと通信するにはカーソルを使用します

MCPツール

MCP サーバーは、Figma と対話するための次のツールを提供します。

書類選考

• get_document_info - 現在のFigmaドキュメントに関する情報を取得します

• get_selection - 現在の選択に関する情報を取得する

• get_node_info - 特定のノードに関する詳細情報を取得する

要素の作成

• create_rectangle - 位置、サイズ、オプションの名前を指定して新しい四角形を作成します

• create_frame - 位置、サイズ、オプションの名前を指定して新しいフレームを作成します

• create_text - カスタマイズ可能なフォントプロパティを持つ新しいテキストノードを作成します

スタイリング

• set_fill_color - ノードの塗りつぶし色を設定する (RGBA)

• set_stroke_color - ノードのストロークの色と太さを設定する

• set_corner_radius - ノードのコーナー半径を設定します。コーナーごとのオプション制御も使用できます。

レイアウトと構成

• move_node - ノードを新しい位置に移動する

• resize_node - 新しい寸法でノードのサイズを変更する

• delete_node - ノードを削除する

コンポーネントとスタイル

• get_styles - ローカルスタイルに関する情報を取得する

• get_local_components - ローカルコンポーネントに関する情報を取得する

• get_team_components - チームコンポーネントに関する情報を取得する

• create_component_instance - コンポーネントのインスタンスを作成する

エクスポートと詳細設定

• export_node_as_image - ノードを画像（PNG、JPG、SVG、またはPDF）としてエクスポートします

• execute_figma_code - Figma で任意の JavaScript コードを実行します (注意して使用してください)

接続管理

• join_channel - Figmaと通信するために特定のチャンネルに参加する

発達

Figmaプラグインの構築

1. Figma プラグイン ディレクトリに移動します。

   cd src/cursor_mcp_plugin

2. code.jsとui.htmlを編集する

ベストプラクティス

Figma MCP を使用する場合:

1. コマンドを送信する前に必ずチャンネルに参加してください

2. まずget_document_infoを使ってドキュメントの概要を取得します

3. 変更前にget_selectionで現在の選択内容を確認する

4. ニーズに応じて適切な作成ツールを使用します。

   • コンテナ用のcreate_frame

   • 基本図形のcreate_rectangle

   • テキスト要素のcreate_text

5. get_node_infoを使用して変更を確認する

6. 一貫性を保つために可能な場合はコンポーネントインスタンスを使用する

7. すべてのコマンドは例外をスローする可能性があるため、エラーを適切に処理します。

ライセンス

マサチューセッツ工科大学