figmcp

---

figmcp は、Figma Desktop で開いている Figma ファイルをコーディングエージェントに渡すローカル MCP サーバーです。開発用プラグインがファイルを localhost 経由でマシン上のサーバーにストリーミングするため、読み取りで Figma REST API にアクセスすることはありません。アクセストークンも、クォータも、レート制限もありません。

• デザインをコードに。 Flutter プロジェクトには Flutter ウィジェット、静的サイトには HTML + Tailwind、それ以外には React + Tailwind を生成します。アセットと比較用のスクリーンショットも含まれます。
• Figma でデザイン。 エージェントは Figma プラグイン API スクリプトを使って、開いているファイル内のフレームを作成・編集します。スクリプトごとに 1 回の取り消し操作ができます。
• 独自のコンポーネント。 Code Connect でデザインコンポーネントをコードコンポーネントにマッピングできます。
• オフラインでも動作。 プラグインを閉じているときは、保存済みのスナップショットを読み取ります。
• すべてのプランに対応。 無料の Starter プランを含む、すべての Figma プランで動作します。Dev Mode のシートは不要です。

Claude Code、Cursor、Claude Desktop、および stdio サーバーを実行するあらゆる MCP クライアントで利用できます。

クイックスタート

Node.js 18 以降と、macOS または Windows 上の Figma Desktop が必要です。

1. セットアップを実行

npx -y @irshad.io/figma-local-mcp@latest setup

サーバーを Claude Code に登録し、Figma プラグインをホームフォルダーにコピーして、ペアリングコードと他の MCP クライアント用の設定を表示します。

2. プラグインをインポート（初回のみ）

Figma Desktop で、Plugins › Development › Import plugin from manifest… を開き、次のファイルを選択します。

macOS	Windows
~/.figma-local-mcp/plugin/manifest.json	%USERPROFILE%\.figma-local-mcp\plugin\manifest.json

macOS では、ファイル選択ダイアログで ⌘ ⇧ G を押して、パスを貼り付けます。Windows では、File name ボックスに貼り付けます。

3. ペアリングして依頼

コーディングエージェントを再起動します。Figma Desktop で Plugins › Development › figmcp を実行し、ペアリングコードを入力します。接続されると、ドットが緑色に変わります。次にフレームを選択して、次のように依頼します。

implement the selected Figma frame

作業中はプラグインウィンドウを開いたままにしてください。詳しい手順はfigmcp.web.app/docs/installationをご覧ください。

使い方

デザインからコードへ

フレームを選択するか、node-id を含む Figma リンクを貼り付けます：

implement this frame as a Flutter screen and match the spacing exactly
build this frame as a React component with Tailwind, using our existing Button
compare your screen with the Figma screenshot and fix the differences

pubspec.yaml があるプロジェクトでは Flutter ウィジェットが生成され、SVG と画像は pubspec で宣言されたアセットフォルダーに保存されます。静的サイトでは HTML + Tailwind が生成され、それ以外では React + Tailwind が生成されます。React の出力では実際のフォントファミリーを使用し、デザインの変数を CSS として宣言（Tailwind 4 の @theme を使用）します。繰り返しのアイテムはデータとして .map() で記述し、再利用されるテキストスタイルには名前を付けます。アセットにはレイヤー名を付け、public/figma 用のコピーコマンドを記述します。プロトタイプのタップ、レイヤー名、プレースホルダーはボタン、リンク、ランドマーク、入力欄に変換します。スマートフォンのフレームはビューポートいっぱいに表示される画面として、デスクトップのフレームは全幅のセクションが広がるページとして描画します。クラスは Tailwind 3.4 と 4 の両方で動作します。生成されるコードは参照用で、エージェントがプロジェクトに合わせて調整します。詳細 →

Figma でデザイン

Figma Desktop でファイルを開き、プラグインを実行して、次のように依頼します：

design a settings screen for a 390x844 phone in Figma
add a dark mode version of the selected frame next to it

エージェントは use_figma でデザインを作成し、各ステップをスクリーンショットで確認します。各スクリプトは 1 回の取り消しステップになります。詳細 →

Code Connect

map the selected button to AppButton in lib/widgets/app_button.dart
which components in this frame are not mapped yet?

マッピングされたインスタンスは、独自のコンポーネントとして返されます。マッピングはプロジェクト内の .figma-local/code-connect.json に保存されます。詳細 →

MCP クライアント

Claude Code はセットアップ時に登録されます。再起動して、/mcp で確認してください。

Cursor、Claude Desktop、その他のクライアント： セットアップ時に表示される設定を追加します。設定は次のような形式で、パスはお使いのマシンに合わせて指定します：

{
  "mcpServers": {
    "figma-local": {
      "command": "/usr/local/bin/node",
      "args": ["/Users/you/.figma-local-mcp/app/node_modules/@irshad.io/figma-local-mcp/bin/figma-local-mcp.js"]
    }
  }
}

クライアント	設定ファイル
Cursor	~/.cursor/mcp.json（すべてのプロジェクト）または .cursor/mcp.json（1 つのプロジェクト）
Claude Desktop（macOS）	~/Library/Application Support/Claude/claude_desktop_config.json
Claude Desktop（Windows）	%APPDATA%\Claude\claude_desktop_config.json

macOS と Windows での各クライアントの手順：figmcp.web.app/docs/configuration。

ツール

ツール	機能
get_design_context	ノードの参照コード（Flutter または React + Tailwind）、アセット、スクリーンショット、変数を取得します。メインのツールです。
get_metadata	レイヤーツリーを XML で取得します：ID、タイプ、名前、位置、サイズ。
get_screenshot	ノードまたは選択範囲の PNG を取得します。
get_variable_defs	ノードで使用されている変数とスタイルを、モードに応じて解決して取得します。
download_assets	書き出されたレンダリング、元の画像塗りつぶし、ベクター SVG を取得します。
verify_code	flutter test で Flutter コードをレンダリングするか、ヘッドレス Chrome で React または HTML + Tailwind をレンダリングし、Figma のレンダリングと比較します。エラー、レイアウトの不一致、異なるピクセル、差分画像を確認できます。
use_figma	Figma プラグイン API スクリプトを実行して、デザインを作成・編集します。
search_design_system	デザイン作成時に再利用できる、開いているファイルのコンポーネント（プロパティとバリアントを含む）、スタイル、変数を取得します。
place_image	ローカルの PNG、JPG、GIF、SVG を新しいレイヤーまたはレイヤーの塗りつぶしとして、開いているファイルに配置します。
get_code_connect_map	どのインスタンスがどのコードコンポーネントに対応するかを取得します。
add_code_connect_map	デザインコンポーネントをコードコンポーネントにマッピングします。
remove_code_connect_map	コンポーネントのマッピングを削除します。
whoami	接続状態、ペアリングコード、開いているファイル、選択範囲、スナップショットを取得します。
save_design_export	ノードの完全なデザインエクスポートを JSON に書き込みます。
import_design_export	エクスポート JSON をスナップショットとして読み込みます。

各ツールの引数：figmcp.web.app/docs/tools。

仕組み

Figma Desktop  ── WebSocket 127.0.0.1:3947 ──▶  figma-local-mcp  ── MCP stdio ──▶  Coding agent
(dev plugin)       paired with your code        (node server)                     (Claude Code, Cursor, …)

プラグインは Figma プラグイン API を使って開いているファイルを読み取り、エージェントから送信されたスクリプトを実行します。サーバーはその内容をコード、アセット、スクリーンショット、メタデータに変換します。プラグインが閉じているときは、最新の保存済みスナップショットから読み取ります。詳細 →

設定

MCP クライアントの設定の env に以下を設定してください。

変数	デフォルト値	説明
FIGMA_LOCAL_MCP_DIR	~/.figma-local-mcp	データフォルダー：プラグイン、ペアリングコード、スナップショット、アセットが保存されます。
FIGMA_LOCAL_MCP_FRAMEWORK		クライアントが指定しない場合に、flutter、react、html のいずれかを強制的に指定します。
FIGMA_LOCAL_MCP_CODE_CONNECT	.figma-local/code-connect.json	Code Connect のマッピングファイルのパスです。
FIGMA_LOCAL_MCP_ALLOW_ORIGINS		プラグイン用にサーバーが許可する追加のオリジンをカンマ区切りで指定します。

更新

npx -y @irshad.io/figma-local-mcp@latest setup

その後、コーディングエージェントを再起動し、プラグインをもう一度実行してください。プラグインは自動で更新されるため、再インポートする必要はありません。

トラブルシューティング

• ドットが灰色のままです： 先にコーディングエージェントを起動してから、プラグインをもう一度実行してください。
• ペアリングコードを紛失しました： セットアップをもう一度実行するか、エージェントに whoami を実行するよう依頼してください。
• use_figma でファイルを編集できません： ファイルを Dev Mode から Design mode に切り替えてください。

その他の解決方法：figmcp.web.app/docs/troubleshooting。それでも解決しない場合は、whoami の出力を添えてIssue を作成してください。

開発

npm install
npm test

パス	内容
bin/、src/	MCP サーバー、プラグインブリッジ、コードジェネレーター
plugin/	Figma 開発プラグイン
tools/	生成コードのビジュアルチェックと Flutter チェック
test/	テスト（node --test）
web/	ウェブサイトとドキュメント（figmcp.web.app）、Firebase Hosting 上の Next.js

サイトを開発するには、cd web && npm install && npm run dev を実行してください。公開するには、npm run deploy を実行してください。

ライセンス

MIT

_{Figma は Figma, Inc. の商標です。このプロジェクトは Figma, Inc. と提携していません。}