設計から実装への移行では、色や余白といった見た目だけでなく、変数・コンポーネント・レイアウト規則などの「設計の文脈」を正確にコードへ落とし込めるかが成果物の品質と工数を左右します。
AnthropicのModel Context Protocol（MCP）に対応した「Claude Code」は、Figmaなど外部ツールを標準化インターフェースで接続し、ターミナルから設計データを直接参照して設計に即したコード生成を実現します。2025年6月にFigmaがDev Mode MCP Serverのベータ提供を開始し、設計文脈をLLMに渡す設計→実装の新しいワークフローが公式に示されました。
本記事では、MCPの要点、Figma接続の方法、実務での使いどころ、料金・前提条件、リスクと対策を最新の公式情報に基づいて整理します。
目次
- MCPと従来手法の比較
- Claude CodeがMCPで可能にする設計から実装への流れ
- FigmaのMCPサーバーをClaude Codeに接続する方法
- ローカル接続（デスクトップアプリ）
- リモート接続（ホストエンドポイント）
- 実務での活用シナリオ
- MCP連携を導入する際の留意点
- まとめ
MCPと従来手法の比較
MCPはAIクライアント（例：Claude Code）と外部ツールをつなぐ オープン標準 で、設計・ドキュメント・チケットなどの”文脈”を構造化して受け渡しできます。
| 比較軸 | MCP（Claude Code＋Figma等） | 従来（スクショ貼付／個別API） |
|---|---|---|
| 連携の考え方 | 標準プロトコルでサーバーを追加して接続 | ツールごとに専用実装・都度調整 |
| 参照できる情報 | 変数・コンポーネント・レイアウト・Makeのコード資産などを構造化で供給 | 画像ベースや限定的なAPIレスポンスに依存 |
| 接続形態 | ローカル（デスクトップ経由）／ リモート（ホストエンドポイント） | ローカル依存 or 個別のAPI設定 |
| 具体例 | Figma Dev Mode MCP Server（選択/リンク指定で設計ノードを参照） | 画面画像を元に推測 → 再現漏れが発生しやすい |
テキストや画像だけでは拾いにくい設計意図まで含めて渡せる点が、設計→実装の再現性向上につながります。
あわせてご覧ください
MCPとは？AIと業務システムを接続する標準プロトコルガイド
Claude CodeがMCPで可能にする設計から実装への流れ
MCP対応によってClaude Codeは、Figmaなどの外部ツールから 設計データそのもの を直接取り込み、設計意図に沿ったコード生成を進められるようになりました。これにより、従来の「スクリーンショットや曖昧な仕様からコードを推測する」流れではなく、 設計→実装を一気通貫で結ぶ新しいフロー が実現します。
- Figmaの設計データを直接参照
FigmaのMCPサーバーは、変数・コンポーネント・スタイル・レイアウトなどを データとして LLMに提供します。スクリーンショットに頼らず、設計意図に沿ったコード生成がしやすくなります。
- 選択ベース／リンクベースで文脈を指定
ローカル接続ではFigma上でフレームを選択して「この選択を実装」と指示できます。リモート接続ではフレームやレイヤーの リンク を貼ることでノードIDを特定して実装を促せます。
- ローカルとリモートの両対応
Figmaデスクトップ経由のローカルサーバー（http://127.0.0.1:3845/mcp）でも、ホスト型の リモートサーバー（https://mcp.figma.com/mcp）でも接続可能。チームや端末要件に合わせて選べます。
- 設計システムとの整合（Code Connect / Variables）
実コードのコンポーネントと設計を Code Connect で結び、変数のコード表現も渡せます。設計システムに沿った出力が得やすく、手戻りを抑制できます。
- MCPエコシステムの広がり
Claude CodeはFigma以外にもAsana、Notion、Linear、Boxなど 多数のMCPサーバー に接続可能。設計以外の文脈（課題票・ドキュメント・ファイル）も同時に取り込み、指示に反映できます。
こうした仕組みにより、従来は分断されていた設計と実装を直結させ、手戻りを減らしながらスピーディーにコード化できるのがClaude Code × MCP連携の最大の価値です。
FigmaのMCPサーバーをClaude Codeに接続する方法
ここでは、 ローカル接続 と リモート接続 の2通りを説明します。
ローカル接続（デスクトップアプリ）
Figmaデスクトップを最新に更新してファイルを開き、右側メニューからMCP Serverを有効化します。画面下部に起動メッセージが表示され、ローカルサーバーは http://127.0.0.1:3845/mcp で待ち受けます。
Claude Code側では通常のMCP追加手順に従い、接続後にFigmaで対象フレームを選択して「現在の選択を実装」と自然文で指示します。
リモート接続（ホストエンドポイント）
ターミナルで次のコマンドを実行して、Figmaの リモートMCPサーバー を登録します。
claude mcp add --transport http figma-remote-mcp <https://mcp.figma.com/mcp>
Claude Code内で /mcp と入力してサーバー管理画面を開き、指示に従って OAuthログイン を許可します。接続後は リンクベース でフレームやレイヤーURLを貼り、「このURLのノードを実装」と依頼します。
引用： Figma Developers Documentation
なお、リモートMCPは順次ロールアウトで、2025年9月26日までに全ユーザーに展開予定と案内されています。
実務での活用シナリオ
Figma連携を軸に、短時間で効果を確認しやすい場面から着手するのが得策です。
- LP／製品ページの反復改修
フレームを選択して差分指示を重ね、レイアウト修正やスタイル統一を素早く反映。設計変数やトークンが保たれるため、再現性が高い。
- デザインシステム運用
Code Connectのマッピングを活用し、実装コードと設計の整合を維持。コンポーネント粒度の置換・追加も会話主導で進めやすい。
- ダッシュボードや管理画面の量産
一覧・カード・フォームなど反復UIを、選択／リンク指定で一括生成し、チューニングを短サイクルで繰り返す。
- チケット駆動の開発
LinearやNotion等のMCPサーバーも同時接続し、Issue文脈（要件・受入条件）を@参照で添えて実装まで指示。
- プロトタイプからの移行（Figma Make）
Makeのコード資産をMCP経由でコンテキストに取り込み、プロトタイプ→量産コードへの橋渡しを効率化。
小さな画面単位から始めて効果を測定し、スコープを広げると移行リスクを抑えられます。
MCP連携を導入する際の留意点
Claude CodeはMCPを通じてFigmaやNotion、Linear、Boxなどさまざまなサービスとつなげます。その利便性を最大限に活かすためには、事前準備とリスク管理が欠かせません。
まず確認すべきは 利用条件 です。接続先のサービスごとにMCP利用に必要なプランや権限があり、Claude側もPro以上（組織ではTeam Premium席など）が条件となります。また、 接続方式 をローカルとリモートのどちらにするかを決め、ネットワークや端末要件に合わせて運用方針を明確にしておくと安心です。
認証や権限管理も重要です。OAuthやAPIキーの取り扱いには注意が必要で、提供元が不明確な第三者MCPサーバーを安易に追加するとセキュリティリスクが高まります。運用設計の面では、.mcp.json でスコープを適切に設定し、プロジェクト単位で共有すれば設定のばらつきを防げます。また、大きな出力が返るケースではClaude Codeが警告や制御を行いますが、環境変数で閾値を調整しておくと運用が安定します。
一方で、MCPはまだ発展途上の仕組みです。特にベータ版サーバーでは機能変更や応答遅延が起こりやすく、検証環境での試用から始めるのが安全です。リモート接続の場合はリンクベースでノードやリソースを指定する仕様が多いため、大規模ファイルや複雑な構成では応答速度が低下する可能性もあります。
まとめると、MCP連携は設計やドキュメント、課題管理など複数の業務文脈を一度に扱える強力な手段ですが、 利用条件・接続方針・権限管理・出力量制御・段階的導入の5点を押さえる ことが成功のカギになります。
まとめ
MCPは、「AIクライアントと業務ツールを結ぶ標準ポート」です。Claude Codeはそのポートをターミナルから実用レベルで活用でき、 FigmaのDev Mode MCP Serverと組み合わせることで、設計の構造情報に即したコード生成と差分反映の高速化を同時に実現 できます。
まずはProでClaude Codeを起動し、Figmaのローカル接続で小さな画面単位の実装から試すのが近道です。効果が見えたらリモート接続や他MCPサーバー（Linear／Notion／Box等）にも範囲を広げ、KPI（反映時間・再現率・手戻り件数）で改善度を測定してください。「Claude Codeでここまでできるのか」という実感が得られるはずです。