local-only server

The server can only run on the client’s local machine because it depends on local resources.

Integrations

Allows Cursor AI to communicate with Figma for reading designs and modifying them programmatically, including creating elements (rectangles, frames, text), styling (colors, strokes, corner radius), manipulating layout, working with components, and exporting nodes as images.

カーソルで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 サーバー

始める

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

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

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

bun setup

Websocketサーバーを起動する

bun start

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プラグイン

Figmaで、プラグイン > 開発 > 新しいプラグインに移動します
「既存のプラグインをリンク」を選択
src/cursor_mcp_plugin/manifest.jsonファイルを選択します。
プラグインはFigma開発プラグインで利用できるようになります。

使用法

WebSocketサーバーを起動する
カーソルにMCPサーバーをインストールする
Figmaを開いてカーソルMCPプラグインを実行します。
join_channelを使用してチャネルに参加し、プラグインを WebSocket サーバーに接続します。
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プラグインの構築

Figma プラグインディレクトリに移動します。
cd src/cursor_mcp_plugin
code.jsとui.htmlを編集する

ベストプラクティス

Figma MCP を使用する場合:

コマンドを送信する前に必ずチャンネルに参加してください
まずget_document_infoを使ってドキュメントの概要を取得します
変更前にget_selectionで現在の選択内容を確認する
ニーズに応じて適切な作成ツールを使用します。
- コンテナ用のcreate_frame
- 基本図形のcreate_rectangle
- テキスト要素のcreate_text
get_node_infoを使用して変更を確認する
一貫性を保つために可能な場合はコンポーネントインスタンスを使用する
すべてのコマンドは例外をスローする可能性があるため、エラーを適切に処理します。

ライセンス

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

This server cannot be installed

-

security - not tested

F

license - not found

-

quality - not tested

Cursor AI が Figma デザインと対話できるようになり、ユーザーはデザイン情報を読み取り、自然言語コマンドを通じてプログラムで要素を変更できるようになります。

Talk to Figma MCP