デザインデータと実装コードの間には常にギャップがあります。Figmaで作り込んだUIを手作業でコードに落とし込む工程は時間がかかり、逆にコードで試作したUIをデザインチームへ共有する手段も限られていました。Figma MCPサーバーとClaude Codeの連携は、この双方向の溝を埋める仕組みです。
Figma MCPサーバーとは
MCP（Model Context Protocol）は、AIコーディングエージェントが外部のツールやデータソースへアクセスするための標準プロトコルです。Figma MCPサーバーは、Figma上のデザインファイル・コンポーネント・デザイントークンをこのプロトコル経由で公開し、Claude CodeなどのAIエージェントがデザイン情報を直接読み取れるようにします。
従来はデザイナーがスクリーンショットやCSS値を手動でエンジニアへ伝えていた作業が、MCPを介したプログラム的な参照に置き換わります。色・タイポグラフィ・スペーシングなどのデザイントークンをAIが自動で取得し、デザインシステムに沿ったコードを生成できる点が最大の利点です。
デスクトップサーバーとリモートサーバーの違い
Figma MCPサーバーには2種類の接続方式があります。用途や環境に応じて選択してください。
| 項目 | デスクトップサーバー | リモートサーバー |
|---|---|---|
| エンドポイント | http://127.0.0.1:3845/mcp | https://mcp.figma.com/mcp |
| 必要なアプリ | Figmaデスクトップアプリ | 不要 |
| 認証方式 | ローカル接続（認証不要） | OAuth認証フロー |
| 対応プラン | Dev / Fullシート（有料プラン） | 全プラン・全シート |
| 選択ベース操作 | 対応 | 非対応 |
| リンクベース操作 | 対応 | 対応 |
| 主な対応クライアント | Claude Code, VS Code, Cursor, Android Studio, Codex, Gemini CLI, Amazon Q, Kiro, Warp, Openhands | Claude Code, VS Code, Cursor, Android Studio, Codex, Gemini CLI, Kiro, Warp, Replit |
デスクトップサーバーはFigma上で選択したフレームやレイヤーをそのままAIに渡せる「選択ベース」操作が使えます。リアルタイムにデザインを見ながらコード生成を指示できるため、細かいUI調整に向いています。ただしFigmaデスクトップアプリの起動が必須で、有料プランのDev ModeまたはFullシートが必要です。
リモートサーバーはFigmaデスクトップアプリ不要で、FigmaのリンクURLから設計情報を取得します。全プランで利用でき、無料プランのユーザーでも使えます。ただし選択ベースの操作には対応していません。
Claude Codeとの接続セットアップ
デスクトップサーバーの場合
1. Figmaデスクトップアプリでサーバーを有効化
Figmaデスクトップアプリを最新バージョンに更新したうえで、デザインファイルを開きます。キーボードショートカット Shift + D でDev Modeに切り替え、インスペクトパネル内の「MCP server」セクションにある「Enable desktop MCP server」をクリックします。
これでローカルに http://127.0.0.1:3845/mcp のエンドポイントが起動します。
2. Claude CodeにMCPサーバーを登録
ターミナルで次のコマンドを実行します。
claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp
3. 接続の確認
claude mcp list
登録済みのMCPサーバー一覧に figma-desktop が表示されれば成功です。
リモートサーバーの場合
Figmaデスクトップアプリは不要です。ターミナルで次のコマンドを実行します。
claude mcp add --transport http figma https://mcp.figma.com/mcp
全プロジェクト共通で使いたい場合は --scope user を付けます。
claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp
初回接続時にFigmaのOAuth認証画面が表示されるので、「Allow Access」を選択して認証を完了してください。
FigmaデザインからClaude Codeでコードを生成する
MCPサーバーの接続が完了すると、Figma上のデザインを参照しながらClaude Codeでコード生成が可能になります。操作方法は「選択ベース」と「リンクベース」の2つです。
選択ベース（デスクトップサーバー専用）
Figmaデスクトップアプリでフレームやコンポーネントを選択した状態で、Claude Codeにプロンプトを送ります。
Figmaで選択中のフレームをReactコンポーネントとして実装してください
AIはMCPサーバー経由で選択要素のレイアウト情報・色・フォント・余白などを取得し、それに基づいたコードを生成します。
リンクベース（デスクトップ・リモート共通）
FigmaのフレームやレイヤーのURLをコピーし、プロンプトに含めます。
以下のFigmaデザインをHTML/CSSで実装してください:
https://www.figma.com/design/xxxxx/Page?node-id=123-456
Claude CodeはURLからノードIDを自動で抽出し、MCPサーバー経由で該当フレームの設計情報を取得します。リモートサーバーでも利用できるため、デスクトップアプリがない環境でも動作します。
プロンプトのコツ
- 出力フレームワークを明示する（例: 「Next.js + Tailwind CSSで」「Flutterウィジェットとして」）
- デザインシステムのルールがある場合はCLAUDE.mdに記載しておく
- 複雑な画面は1フレームずつ段階的に指示する
Code to Canvas — 実装済みUIをFigmaデザインへ変換する新機能
2026年2月17日、Figmaは「From Claude Code to Figma: Turning Production Code into Editable Figma Designs」を公式ブログで発表しました。Claude Codeで構築した動作中のUIをブラウザから取り込み、Figma上で編集可能なフレームへ変換する機能です。
従来の課題と解決
エンジニアが試作したUIをデザインチームへ共有する際、スクリーンショットを撮ってSlackに貼る、あるいはステージング環境のURLを送るといった方法が一般的でした。しかしスクリーンショットは編集できず、ステージング環境はデザイナーが構造を変更できません。
Code to Canvasは、ブラウザで表示されているUIの状態（本番・ステージング・localhost問わず）をそのままFigmaキャンバスに取り込みます。取り込まれたUIは単なる画像ではなく、レイヤー構造を持った編集可能なFigmaフレームとして扱えます。
ワークフロー
- Claude Codeでフロントエンドのコードを生成・実行
- ブラウザに表示されたUIをCode to Canvas機能でFigmaへ取り込み
- Figma上でデザイナーが構造・色・レイアウトを調整
- 調整後のデザインをMCPサーバー経由でClaude Codeに再度渡し、コードを更新
デザインとコードの間を繰り返し行き来する「ラウンドトリップ」が成立します。
Figma Makeとの関係
Code to Canvasと同時期に提供されているFigma Makeは、キャンバス上でプロンプトからUIを生成するAI機能です。両者は補完的な関係にあります。
| 機能 | 出発点 | 出力 |
|---|---|---|
| Code to Canvas | ブラウザで動作中のUI | 編集可能なFigmaフレーム |
| Figma Make | プロンプトや既存デザイン | フロントエンドコード / Figmaデザイン |
| MCP Server | Figmaフレーム / リンク | 構造化されたデザインコンテキスト |
実用的なユースケース
- デザインレビュー: Claude Codeで複数のUIバリアントを生成し、すべてFigmaに取り込んで並べて比較検討する
- 既存画面の再設計: 本番環境の画面をFigmaに取り込み、改善案をデザイナーが直接編集する
- デザインシステムの検証: AI生成コードが既存のデザイントークンやコンポーネントルールに沿っているかをFigma上で確認する
デザインシステムを活用した一貫性のあるコード生成
Figma MCPの真価は単体のフレームをコード化することよりも、デザインシステム全体をAIに理解させる点にあります。
デザイントークンの自動取得
MCPサーバーの get_variable_defs ツールを利用すると、Figmaのデザインファイルに定義された変数（カラー・タイポグラフィ・スペーシング等）を構造化データとして取得できます。Claude Codeはこれらの値を参照し、ハードコードされたマジックナンバーではなく、デザイントークンに基づいた変数名でコードを出力します。
Skillsによるワークフロー定義
Figma MCPサーバーにはSkillsと呼ばれる機能があります。「デザインからコードへの変換時に従うべきルール」をパッケージ化した指示セットで、たとえばCode Connectを使ったコンポーネントマッピングや、特定のCSSフレームワークへの出力ルールを定義できます。
チーム全体でSkillsを共有すると、誰がClaude Codeを実行しても同じルールに基づいたコードが生成され、デザインシステムの一貫性が保たれます。
料金プランと利用条件
Figma MCPサーバーの利用可否はFigmaのプランとシートタイプに依存します。
| 条件 | リモートサーバー | デスクトップサーバー |
|---|---|---|
| 無料プラン（Starter） | 利用可 | 利用不可 |
| Professionalプラン | 利用可 | Dev / Fullシートで利用可 |
| Organization / Enterpriseプラン | 利用可 | Dev / Fullシートで利用可 |
リモートサーバーはプラン制限なしで全ユーザーが利用できます。一方デスクトップサーバーはDev ModeまたはFullシートが必要で、これらは有料プランに含まれます。
Claude Code側の料金はAnthropicのAPI利用に準じます。Claude Codeを直接利用する場合はAnthropicのサブスクリプション（Max等）が必要です。Figma MCP自体に追加料金は発生しません。
現時点での制約と対処法
Figma MCP × Claude Codeの連携はベータ段階の機能も含まれており、いくつかの制約があります。
既存コードの差分更新が困難: MCPサーバーはフレームの設計情報を渡すため、既存のコードベースとの差分を賢く反映する機能はまだ限定的です。大幅なデザイン変更時は再生成が必要になることがあります。対処法として、コンポーネント単位で小さく生成・更新するアプローチが有効です。
マルチフレームのフロー変換: オンボーディングの複数ステップやカルーセルなど、複数フレームにまたがるUIは個別に変換してから手動で結合する必要があります。
ビジュアルフィードバックがない: Claude Codeはターミナルベースのため、生成されたコードの見た目をリアルタイムで確認するにはブラウザでの別途プレビューが必要です。
デスクトップアプリの常時起動: デスクトップサーバーを使う場合、Figmaデスクトップアプリを起動しておく必要があります。アプリを閉じるとMCPサーバーも停止します。
まとめ
Figma MCPサーバーとClaude Codeを連携すると、デザインからコードへの変換（リンクベース / 選択ベース）と、コードからデザインへの逆変換（Code to Canvas）の双方向ワークフローが実現します。
リモートサーバーは無料プランでも利用可能で、claude mcp add --transport http figma https://mcp.figma.com/mcp の1コマンドでセットアップが完了します。デスクトップサーバーは有料プランのDev/Fullシートが必要ですが、選択ベース操作やリアルタイム連携が可能です。
2026年2月17日に発表されたCode to Canvas機能により、Claude Codeで構築したUIをFigma上で編集可能なフレームとして取り込み、デザインチームとの協業がさらに効率化されます。デザインシステムのトークンやコンポーネント情報をAIが直接参照できるため、手戻りの少ない開発フローの構築に役立ちます。