Figma の MCP（Model Context Protocol）サーバーは、あなたの Figma デザインファイルと Claude Code や Cursor などのコーディングエージェント間に直接接続を作成します。デザインを手動でコードに変換する作業（間隔値の確認、16進カラーのコピー、コンポーネント構造の再作成）の代わりに、コーディングエージェントが Figma ファイルを直接読み取り、あなたのデザインシステムに適合するコードを生成します。
MCP 接続は双方向です。コーディングエージェントは Figma からデザインデータ（コンポーネント、変数、レイアウト構造）を読み取ります。また、キャンバスに書き戻すこともできます。コード化された状態、レスポンシブなバリアント、実装された画面を編集可能な Figma レイヤーとしてプッシュし、デザイナーがレビューできるようにします。これにより、従来のデザイン引き渡しのボトルネックが完全に解消されます。
重要なポイント
セットアップは10分以内で完了し、費用はかかりません（MCP はベータ期間中無料）。そして、デザインからコードへのワークフローを即座に変革します。コーディングエージェントはあなたのデザインシステムのコンテキスト（コンポーネント、カラー、間隔トークン）を理解し、それに適合するコードを生成します。もう間隔値を推測したり、スクリーンショットから色を概算したりする必要はありません。MCP サーバーは、プロダクトチームが10年間求めてきたデザインツールとコードエディター間の橋渡しです。
MCP アーキテクチャの理解
MCP（Model Context Protocol）は Anthropic が作成したオープン標準で、AI エージェントが外部データソースに接続できるようにします。これは Claude と Google Drive、Slack、GitHub などのツール間の接続を支える同じプロトコルです。Figma の MCP サーバーは、このプロトコルを通じてあなたのデザインファイルを公開し、MCP 対応のコーディングエージェントが読み取れるようにします。
| コンポーネント | 機能 | 提供者 |
|---|---|---|
| Figma MCP Server | MCP プロトコル経由でデザインデータを公開 | Figma（mcp.figma.com/mcp でホスト） |
| コーディングエージェント（クライアント） | デザインデータを読み取りコードを生成 | Claude Code、Cursor、Windsurf など |
| 認証 | Figma アカウント経由の OAuth | あなたの Figma ログイン |
| 公開データ | コンポーネント、変数、スタイル、レイアウト | あなたの Figma ファイル |
| 書き込みアクセス | コード化された状態をキャンバスにプッシュバック | /figma-use スキル経由 |
セットアップ：Claude Code（5分）
ステップ1：ターミナルを開き、プロジェクトディレクトリに移動します。
ステップ2：MCP サーバーが設定された状態で Claude Code を開始します。Figma MCP サーバーを Claude Code 設定に追加します（通常は ~/.claude/mcp_servers.json またはプロジェクトの .mcp.json）：
ステップ3：Claude Code が初めて Figma MCP サーバーに接続する際、OAuth 経由での認証を求められます。Figma アカウントでログインしてください。これにより、デザインファイルへの読み取りアクセスが許可されます。
ステップ4：Claude Code に Figma ファイルの説明を求めて接続をテストします：「[Figma ファイル URL を貼り付け]の Figma ファイルを読み取り、そのコンポーネント構造を説明してください。」コンポーネント名、変数、レイアウト情報が返されれば、接続は正常に動作しています。
セットアップ：Cursor（5分）
ステップ1：Cursor の設定 → MCP Servers を開きます。
ステップ2：URL：https://mcp.figma.com/mcp で新しい MCP サーバーを追加します。
ステップ3：プロンプトが表示されたら OAuth 経由で認証します。上記と同じ Figma ログインです。
ステップ4：Cursor の AI チャットで、あなたの Figma ファイルを参照します：「[Figma URL]のデザインを読み取り、Tailwind CSS を使用してヘッダーセクション用の React コンポーネントを生成してください。」Cursor がデザインコンテキストを読み取り、適合するコードを生成します。
MCP サーバーが公開するデータ
コーディングエージェントが「見る」ことができるものを理解することで、より良いプロンプトを書き、MCP の可読性のために Figma ファイルを整理できます：
| データタイプ | 公開される内容 | コーディングエージェントの使用方法 |
|---|---|---|
| コンポーネント | 名前、プロパティ、バリアント、インスタンス | コードコンポーネントライブラリにマッピング |
| カラー変数 | 名前、16進値、コレクション | CSS 変数や Tailwind 設定にマッピング |
| テキストスタイル | フォント、サイズ、ウェイト、行の高さ | タイポグラフィクラスにマッピング |
| 間隔 | パディング、ギャップ、マージン値 | 間隔トークンにマッピング |
| レイアウト | オートレイアウトの方向、配置、ラップ | flexbox/grid プロパティにマッピング |
| レイヤー階層 | 親子関係 | DOM 構造にマッピング |
実用的な意味合い：Figma での命名が良いほど、コーディングエージェントの理解も良くなります。「Button/Primary/Large」はコードコンポーネントにきれいにマッピングされます。「Frame 147」ではエージェントに有用な情報を伝えません。これは Design Agent の準備と同じ原則です。よく整理されたデザインシステムは、AI がデザインするかコーディングするかに関係なく、より良い AI 出力を生成します。
実際の双方向ワークフロー
MCP の真の力は Figma からの読み取りだけでなく、ループを完成させる書き戻し機能にあります。開発者がデザイナーが仕様化していないエッジケース（エラー状態、ローディング状態、空の状態、レスポンシブブレークポイント）を実装する際、それらの実装を編集可能なフレームとして Figma キャンバスに押し戻すことができます。デザイナーはコードプレビューに切り替えることなく、実際のコード化された状態をレビューできます。
このワークフローは、デザイン・開発間の摩擦の最も一般的な原因である「設計されたもの」と「構築されたもの」の間のギャップを解消します。MCP により、両サイドが同じ真実のソースから作業し、変更は双方向に伝播されます。詳細なステップバイステップのワークフローは、私たちの Figma + Claude Code ガイドにあります。
MCP 接続エージェントを使用する際のより良いプロンプト（デザインの読み取りやコードの生成に関わらず）については、無料のプロンプトオプティマイザーがより正確な出力を生成する構造を追加します。ChatGPT、Claude、Gemini 内でのワンクリック最適化については、TresPrompt がサイドバーに直接提供します。
よくある質問
MCP サーバーは無料ですか？
はい。MCP サーバーはベータ期間中は無料です。MCP 接続に AI クレジットは消費されません。Figma はベータ後の MCP の価格を発表していませんが、サーバーインフラストラクチャのコストは最小限（計算ではなく読み取りアクセス）なので、無料または非常に低コストのままである可能性が高いです。
MCP は Claude Code と Cursor 以外のツールでも動作しますか？
はい。MCP 対応のエージェントであれば接続できます。これには Windsurf、Cline、MCP プロトコルをサポートする他のツールが含まれます。サーバー URL（https://mcp.figma.com/mcp）は、どのクライアントが接続するかに関係なく同じです。
MCP はアクセス権のあるすべての Figma ファイルを読み取れますか？
はい。MCP はあなたの Figma アカウントの権限を継承します。Figma でファイルを表示できれば、MCP はそれを読み取れます。アクセス権がなければ、MCP も読み取れません。つまり、チームファイル、共有ファイル、個人ファイルはすべて MCP 経由でアクセス可能です。
コーディングエージェントが私の Figma ファイルを変更するリスクはありますか？
書き戻し機能はオプトインで、特定のスキル（/figma-use）を使用します。明示的にコード化された状態をキャンバスにプッシュバックするよう指示しない限り、エージェントはファイルを変更しません。読み取りアクセスがデフォルトで、書き込みアクセスには意図的な呼び出しが必要です。書き込みアクセスがあっても、エージェントは既存のものを変更するのではなく新しいフレームを作成するので、元のデザインは保持されます。
コードを書かない場合でも MCP をセットアップすべきですか？
コードを書かないデザイナーの場合、MCP の直接的な価値は限定的です。主にあなたのデザインを読み取るコーディングエージェント向けです。ただし、MCP の仕組みを理解することで、それを使用する開発者とより効果的に協力できます。また、デザイン分析、調査、ドキュメント生成のために Claude.ai を Figma ファイルに接続する実験もできます（コードを書かなくても）。
開示：この記事の一部のリンクはアフィリエイトリンクです。私たちは個人的にテストし、定期的に使用しているツールのみを推奨しています。完全な開示ポリシーをご覧ください。