カーソルで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: Gravity Global Figma MCP

始める

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

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

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

4. MCPサーバー

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

クイックビデオチュートリアル

ビデオリンク

設計自動化の例

テキストコンテンツの一括置換

一括テキスト置換機能の開発にご協力いただいた@dusskaparkに感謝します。デモ動画はこちらです。

インスタンスオーバーライドの伝播@dusskaparkによるもう一つの貢献は、単一のコマンドで、ソースインスタンスから複数のターゲットインスタンスにコンポーネントインスタンスのオーバーライドを伝播することです。この機能により、類似したカスタマイズが必要なコンポーネントインスタンスを扱う際の反復的な設計作業が大幅に削減されます。デモビデオをご覧ください。

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

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

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

WebSocketサーバー

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

Figmaプラグイン

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

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

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

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

Windows + WSL ガイド

1. PowerShell経由でbunをインストールする

2. src/socket.tsのホスト名0.0.0.0のコメントを解除します。

3. Webソケットを起動する

使用法

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

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

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

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

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

MCPツール

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

書類選考

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

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

• read_my_design - パラメータなしで現在の選択に関する詳細なノード情報を取得します

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

• get_nodes_info - ノードIDの配列を指定して複数のノードの詳細情報を取得します

注釈

• get_annotations - 現在のドキュメントまたは特定のノード内のすべての注釈を取得します

• set_annotation - マークダウンサポートを使用して注釈を作成または更新します

• set_multiple_annotations - 複数のアノテーションを効率的に一括作成/更新する

• scan_nodes_by_types - 特定のタイプのノードをスキャンします（注釈ターゲットを見つけるのに役立ちます）

プロトタイピングと接続

• get_reactions - 視覚的なハイライトアニメーションを使用してノードからすべてのプロトタイプ反応を取得します

• set_default_connector - コピーした FigJam コネクタを、接続を作成するためのデフォルトのコネクタ スタイルとして設定します (接続を作成する前に設定する必要があります)

• create_connections - プロトタイプフローまたはカスタムマッピングに基づいて、ノード間にFigJamコネクタラインを作成します。

要素の作成

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

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

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

テキストコンテンツの変更

• scan_text_nodes - 大規模なデザインのためにインテリジェントなチャンク化を使用してテキストノードをスキャンします

• set_text_content - 単一のテキストノードのテキストコンテンツを設定する

• set_multiple_text_contents - 複数のテキストノードを効率的に一括更新する

自動レイアウトと間隔調整

• set_layout_mode - フレームのレイアウト モードとラップ動作を設定します (NONE、HORIZONTAL、VERTICAL)

• set_padding - 自動レイアウトフレームのパディング値（上、右、下、左）を設定します

• set_axis_align - 自動レイアウトフレームの主軸とカウンター軸の位置合わせを設定します

• set_layout_sizing - 自動レイアウトフレームの水平および垂直のサイズ変更モードを設定します (FIXED、HUG、FILL)

• set_item_spacing - 自動レイアウトフレーム内の子アイテム間の距離を設定する

スタイリング

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

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

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

レイアウトと構成

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

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

• delete_node - ノードを削除する

• delete_multiple_nodes - 複数のノードを一度に効率的に削除します

• clone_node - オプションの位置オフセットで既存のノードのコピーを作成します

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

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

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

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

• get_instance_overrides - 選択したコンポーネントインスタンスからオーバーライドプロパティを抽出します

• set_instance_overrides - 抽出したオーバーライドをターゲットインスタンスに適用する

エクスポートと詳細設定

• export_node_as_image - ノードを画像（PNG、JPG、SVG、またはPDF）としてエクスポートします - 現在、テキストとしてbase64を返す画像のサポートは限定的です

接続管理

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

MCPプロンプト

MCP サーバーには、複雑な設計タスクをガイドするヘルパー プロンプトがいくつか含まれています。

• design_strategy - Figma デザインを扱うためのベストプラクティス

• read_design_strategy - Figma のデザインを読むためのベストプラクティス

• text_replacement_strategy - Figmaデザインにおけるテキスト置換の体系的なアプローチ

• annotation_conversion_strategy - 手動の注釈をFigmaのネイティブ注釈に変換するための戦略

• swap_overrides_instances - Figma のコンポーネントインスタンス間でオーバーライドを転送するための戦略

• reaction_to_connector_strategy - 'get_reactions'の出力を使用してFigmaプロトタイプ反応をコネクタラインに変換し、'create_connections'の使用を順番にガイドする戦略

発達

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

8. 大きなデザインの場合:

   • scan_text_nodesでチャンクパラメータを使用する

   • WebSocket の更新を通じて進行状況を監視する

   • 適切なエラー処理を実装する

9. テキスト操作の場合:

   • 可能な場合はバッチ操作を使用する

   • 構造的な関係を考慮する

   • 対象を絞ったエクスポートで変更を検証する

10. 従来の注釈を変換する場合:

• テキストノードをスキャンして番号付きマーカーと説明を識別する

• scan_nodes_by_typesを使用して、アノテーションが参照する UI 要素を見つけます。

• パス、名前、または近接性を使用してマーカーをターゲット要素と一致させます

• get_annotationsを使用してアノテーションを適切に分類する

• set_multiple_annotationsを使用してネイティブ アノテーションを一括作成する

• すべての注釈がターゲットに適切にリンクされていることを確認する

• 変換が成功したら、従来の注釈ノードを削除します。

11. プロトタイプの麺を FigJam コネクタとして視覚化します。

• get_reactionsを使用してプロトタイプフローを抽出します。

• set_default_connectorでデフォルトのコネクタを設定する。

• 明確な視覚的なフロー マッピングを実現するために、 create_connectionsを使用してコネクタ ラインを生成します。

ライセンス

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