Figma MCPに相談する

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

license - not found

quality - not tested

remote-capable server

The server can be hosted and run remotely because it primarily relies on remote services or has no dependency on the local environment.

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

Related MCP Servers

Figma MCP Server
GLips
-
security
A
license
-
quality
Enables Cursor to access Figma files through the Model Context Protocol, enhancing its ability to accurately interpret and utilize design data for code generation.
Last updated -
5
41,115
7,637
TypeScript
MIT License
Talk to Figma MCP
sonnylazuardi
A
security
A
license
A
quality
An MCP server integration that enables Cursor AI to communicate with Figma, allowing users to read designs and modify them programmatically through natural language commands.
Last updated -
19
2,514
3,528
JavaScript
MIT License
Cursor Talk To Figma MCP
toiletmadarchut
A
security
F
license
A
quality
Enables users to control the cursor in Figma through verbal commands using an agentic AI agent, streamlining the design process with a new interaction method.
Last updated -
19
2,514
1
JavaScript
Figma MCP Server
rlagudals95
-
security
A
license
-
quality
Gives AI-powered coding tools like Cursor, Windsurf, and Cline access to Figma design files, enabling more accurate code generation directly from Figma designs.
Last updated -
41,115
TypeScript
MIT License

View all related MCP servers

Talk to Figma MCP