Figma MCP: Figma と Claude Code および AI コーディング エージェントの接続

Figmaフレームのスクリーンショットを撮ってClaude Codeに貼り付けることで、雰囲気を掴むことができます。FigmaとMCPを接続することで、トークンに至るまでデザインシステムに完全に一致するコンポーネントを作成できます。

この2つのワークフロー間のギャップは、セットアップに約5分かかるだけです。ほとんどのデザイナーは、チュートリアルが技術的に難しく聞こえるため、この作業を行っていません。しかし、実際はそうではありません。コマンドを1つ実行し、Figma内のトグルを1つ有効にするだけです。それだけです。

接続が完了すると、AIエージェントは「20pxのギャップ」の意味を推測するのをやめ、割り当てられた実際のスペーシングトークンを読み取るようになります。色を勝手に作成するのではなく、実際のパレットから色を選択するようになります。ボタンを近似的に作成するのではなく、既に作成済みのボタンを呼び出すようになります。これは、接続先のデザインシステムが実在する場合にのみ機能します。

MCPは翻訳ツールであり、魔法の杖ではありません。

MCPはモデルコンテキストプロトコルの略です。Anthropicは2024年末にリリースされました。Figmaは2025年に公式サーバーをリリースしました。2026年時点で利用可能なAIツールはすべてこれをサポートしています。

MCPはAIエージェントにとってのUSBポートのようなものだと考えてください。MCP以前は、AIモデルと通信したいツールはすべて独自の統合を構築する必要がありました。MCP以降は、ツールはプロトコルを使用するだけで、MCPに対応したエージェントならどれでも読み取ることができます。 Figma、GitHub、Slack、Linear、ファイルシステム、データベースなど、何でも構いません。標準化された再利用可能なプロトコルが1つ必要です。

FigmaのMCPサーバーの具体的な機能：接続したAIエージェントに、Figmaファイル内の構造データを公開します。フレームID、レイヤー名、ネストされたコンポーネント、間隔値、カラー変数、タイポグラフィスタイル、オートレイアウト設定など、すべてです。AIは、ファイルのJPEG画像ではなく、ファイルの内容そのものを読み取ります。

MCPは魔法ではありません。単なるケーブルです。両端で適切な作業を行う必要があります。

FigmaのMCPサーバーが実際に公開する情報

このサーバーは、AIエージェントに特定のFigmaデータへの読み取りアクセス権を与えます。AIエージェントが何を見ることができ、何を見ることができないかを正確に把握することは、結果とセキュリティの両方にとって重要です。

| AIが読み取れる情報 | なぜ重要なのか |

|------------------|----------------|

| フレーム構造（ID、名前、階層） | エージェントはターゲットを認識 |

| 自動レイアウト設定（方向、間隔、パディング） | スペーシングは正確に反映される |

| 変数参照（カラートークン、スペーシングトークン、タイポグラフィ） | 出力はシステムと一致する |

| コンポーネントインスタンスとオーバーライド | エージェントは既存のコンポーネントを呼び出す |

| テキストスタイルとコンテンツ | テキストは適切な場所に表示される |

| 画像塗りつぶし（デフォルトではピクセルデータではなくURLのみ） | 画像参照は適切に行われる |

読み取れないもの：許可していないプライベートファイル、このファイルに接続されていない他のチームライブラリ、コメント、バージョン履歴、または指定した特定のファイル以外のもの。

この範囲制限は重要です。なぜなら、訓練が不十分なAIがFigmaワークスペース内を自由に動き回ることを防ぐためです。AIは指定されたものだけを読み取り、それ以上は読み取りません。

Claude Codeへのインストール（5分）

Claude Codeが既に実行されている場合（実行されていない場合はClaude Code デザイナー向けを参照）、MCPは設定ファイルを編集するだけでインストールできます。

ステップ1：Figmaデスクトップで、「環境設定」を開き、「開発者モード」設定の「ローカルMCPサーバーを有効にする」を有効にします。Figmaはデフォルトポートでサーバーを起動します。

ステップ2：ターミナルでClaude Codeの設定ファイルを開きます。

claude mcp add figma http://127.0.0.1:3845/mcp --transport http

このコマンド1つで、FigmaのローカルサーバーMCPがClaude Codeに登録されます。JSON編集も設定ファイルの検索も不要です。

ステップ3：Claude Codeを再起動します。次のセッションでは、Claude Codeは自動的にFigmaが利用可能であることを認識します。

Claude Codeセッション内で/mcpを実行して確認してください。Figmaが表示されるはずです。

使用するには、FigmaのURLをプロンプトに貼り付けてください。 Claude Code はスクリーンショットではなく、MCP を介してフレームを解決し、実際の構造に基づいて動作します。

Cursor へのインストール（所要時間約5分）

Cursor ユーザーの場合、手順は若干異なりますが、基本的な考え方は同じです。

ステップ 1: 上記と同様です。Figma デスクトップで Figma のローカルサーバー MCP を有効にします。

ステップ 2: Cursor で設定を開き、MCP セクションに移動して、「MCP サーバーを追加」をクリックします。以下を貼り付けます。

Name: figma
URL: http://127.0.0.1:3845/mcp
Transport: HTTP

ステップ 3: 保存して Cursor を再起動します。Figma がエージェント パネルで使用可能なデータ ソースとして表示されます。

カーソルはMCPをClaude Codeよりも視覚的に扱いやすく、サーバーごとにUIベースのトグルスイッチを備えています。機能的には両者の操作感は同じです。FigmaのURLを貼り付けると、エージェントが実際のフレームを読み取り、出力はシステムと一致します。

5つのワークフロー

忠実度の高いデザインからコードへの変換 FigmaフレームのURLを貼り付けます。Claude Codeはレイヤー構造、オートレイアウト値、変数バインディング、コンポーネントインスタンスを取得します。生成されるReactコンポーネントは、実際のボタン、カード、スペーシングトークンを使用します。近似値や架空のクラスは一切使用しません。これはフラッグシップワークフローであり、インストールに5分かかるだけでもその価値があります。

コードコネクト検証 Figmaのコードコネクト機能（Figmaコンポーネントをコードコンポーネントにマッピングする機能）を既に利用している場合、MCPはコード生成時にエージェントがマッピングを検証できるようにします。コードコネクトに既に登録されているコンポーネントと重複する新しいコンポーネントは生成されません。意図しない再発明が減少します。

変数同期チェック 例えば、先週カラートークンの名前を変更したとします。Claude Codeに「このFigma URLのフレームを読み込み、現在のトークンファイルと一致しない変数参照をすべてリストアップしてください」と指示します。1回の処理でずれを検出できます。以前は開発者との45分間のLoomセッションが必要でした。

スクリーンショットからコンポーネントへのフォールバック MCP がファイルを読み取れない場合（クライアント所有、共有されていない、または自動レイアウトフレームではない場合）、エージェントは画像解析にフォールバックします。MCP を自分の作業用、スクリーンショットをクライアントへの個別参照用として混在させることができます。同じプロンプトで、どちらも機能します。

デザインQA 逆方向のアプローチ。Claude Code に、デプロイ済みのページスクリーンショットと Figma フレームを比較するように指示します。「これが本番ページの URL です。これが一致するはずの Figma URL です。視覚的な違いをリストアップしてください。」これにより、「デザイナーが承認したが、開発者が間違ったパディングを出荷した」という問題を本番環境に反映される前に検出できます。

| ワークフロー | MCP なし | MCP あり |

|----------|-------------|----------|

| デザインからコードへ | 雰囲気ベース、手動修正が必要 | トークン精度、初回パスで使用可能 |

| コード接続 | 手動ステップを別途実行 | 自動検証 |

| 変数のずれ | 手動監査、数時間 | ワンライナー、数分 |

| スクリーンショットによるフォールバック | 唯一の選択肢 | MCP が利用できない場合のフォールバック |

| デザインQA | 手動比較 | 差分レポート、数秒 |

AIワークフローの詳細をもっと知りたい場合は、Brainy 論文 をご覧ください。MCP をチームのデザインからコードへのパイプライン全体に組み込みたい場合は、Brainy を雇用する をご覧ください。

セキュリティ：Figma が見るものと、AI が見るもの

2 つの別々の質問ですが、どちらも理解しておく価値があります。

Figma が見るもの MCP サーバーは、Figma のサーバーではなく、ローカルマシン上で実行されます。認証は Figma セッションを経由するため、Figma は、MCP が有効になっていることと、アクセスされているファイルを確認できます。エンタープライズ アカウントの場合、管理者は組織レベルでローカル MCP を無効にすることができます。

AI エージェントが見るもの 貼り付けた Figma ファイル URL です。エージェントは、Figma ワークスペース全体へのブラウズアクセス権を取得しません。明示的に参照しない限り、他のチーム ライブラリは表示されません。コメント、バージョン履歴、無関係なファイルは認識しません。各プロンプトは、渡されたデータのみを対象とします。

マシンから送信されるデータ Claude CodeをAnthropicのAPIと併用する場合、要求したフレームデータはプロンプトコンテキストの一部としてAnthropicに送信されます。Figmaのファイルに機密性の高いクライアントワークや未公開の製品デザインが含まれている場合は、この点が重要になります。機密性の高いファイルでMCPを使用する前に、チームのAIポリシーを確認してください。

ほとんどのデザイン作業では問題ありません。規制対象業界や、厳格なデータ条項を含むNDAの場合は、事前に確認してください。

Figma MCPの不十分な点

正直に答えてください。これは2026年4月時点のFigma MCPであり、洗練された未来バージョンではありません。

画像アセットの処理には制限があります。 MCPはエージェントに画像のフィルURLを提供し、実際のピクセルデータは提供しません。画像が複雑な構成を担うレイアウトの場合、エージェントは依然として推測する必要があります。

プロトタイプとインタラクションは変換されません。 MCPは静的な構造を公開します。Figmaファイルにプロトタイプ接続、ホバー状態、スマートアニメーション、バリアント切り替えなどが含まれている場合、エージェントはそれらを認識しません。アニメーションロジックは手動で記述する必要があります。

プラグインは読み取りできません。 Figmaプラグインがファイル内のコンテンツ（チャート、アイコン、データビジュアライゼーションなど）を生成した場合、エージェントは出力を静的レイヤーとして認識します。プラグインのロジックを再生成することはできません。

巨大ファイルではパフォーマンスが低下します。 500フレーム以上のファイルは、20フレームのファイルよりも処理に時間がかかります。最適な結果を得るには、巨大なファイルではなく、スコープ付きのページ単位で作業してください。

自動レイアウトの前提条件が重要です。 Figmaフレームが自動レイアウトを適切に使用している場合、エージェントは最もきれいな出力を生成します。絶対位置指定の自由形式レイアウトはうまく変換されません。これはFigmaの問題であり、MCPの問題ではありませんが、ここで最も顕著に現れます。

これらはどれも致命的な問題ではありません。これらはすべて、MCPを盲目的に信頼するのではなく、優れた迅速なエンジニアリングと組み合わせて使用​​すべき理由です。

よくある質問

Figma MCP は無料で利用できますか？

はい。MCP サーバーは、Figma デスクトップ版に無料で組み込まれています。Figma の料金と、AI ツール（Claude、Cursor など）の料金をお支払いいただきます。接続自体は無料です。

Figma MCP は Web 版でも利用できますか？

ローカル MCP サーバーは、Figma デスクトップ版の機能です。Web 版のみのユーザーは、現時点ではアクセスできません。本格的な設計からコーディングまでの作業には、デスクトップ版の方が適しています。

MCP を複数の AI ツールと同時に使用できますか？

はい。複数のエージェントが同じローカルのMCPサーバーを読み取ることができます。Claude Code、カーソル、Claudeデスクトップ、およびその他のMCP対応クライアントはすべて同時に接続できます。

セッション中にFigmaファイルを切り替えた場合はどうなりますか？

エージェントは指定されたURLでフレームを解決します。URLを切り替えるとコンテキストが切り替わります。何も再起動することなく、1つの会話で複数のファイルを参照できます。

MCPはFigma開発者モードに取って代わるものですか？

いいえ。開発者モードは人間向けの検査ツールです。MCPはエージェント向けのデータレイヤーです。これらは相互補完的な関係にあります。実際、開発者モードに表示されるデータは、MCPがエージェントに公開するデータと同じです。

Figmaのスクリーンショットはやめましょう

どのデザインチームにも共通する悪い習慣があります。Figmaのフレームのスクリーンショットを撮り、ChatGPTまたはClaudeに貼り付けて、コードを要求してしまうのです。その結果、出力されるのは常にバイブス（雰囲気）だけで、トークンは生成されません。そして、バイブスを手作業で修正するのに1時間も費やしてしまうのです。

たった5分のインストールで、このワークフローは解消されます。エージェントは実際のフレームを読み取ります。スペーシングは実際の値です。コンポーネントは実際のコンポーネントです。トークンは実際のトークンです。コードは初回から出荷可能な状態に近くなります。

FigmaでMCPを有効にしてください。AIツールにコネクタをインストールしてください。スクリーンショットではなく、URLを貼り付けてください。

「MCP適用前」と「MCP適用後」の出力品質の差は、決して些細なものではありません。これは、現代のデザイナーのツールキットの中で、1分あたりの投資対効果（ROI）が最も高いツールと言えるでしょう。

Figmaのスクリーンショットを撮るのはやめましょう。