AIコーディングツールで生成したUIを、デザインツール上で再編集したい場面が増えています。2026年2月17日にFigmaとAnthropicが共同発表した「Code to Canvas」機能は、Claude Codeで構築したUIをFigmaキャンバス上の編集可能なフレームへ変換し、さらにFigma側の修正をコードへ反映できる仕組みです。
Claude Code to Figmaの概要
Claude Code to Figmaは、Figma MCP（Model Context Protocol）Serverを介してClaude CodeとFigmaを接続する機能です。ローカルで動作するWebアプリのUIをブラウザキャプチャし、Figmaのレイヤー構造を持つ編集可能なフレームとして取り込めます。
従来、エンジニアがコードで実装したUIをデザイナーがFigma上で確認するには、スクリーンショットの共有やデザインの手動トレースが必要でした。Code to Canvas機能により、実装済みのUIをそのままFigma上に持ち込み、レイアウト調整や配色変更をデザイナーが直接行えます。
主な特徴は以下のとおりです。
- コード → Figma: Claude Codeで構築したUIをFigmaファイルへ自動変換
- Figma → コード: Figma上で編集した内容をコードへ反映（Figma Make連携）
- MCP基盤: Anthropicが策定したModel Context Protocolによるオープンな接続方式
- フレームワーク非依存: React、Vue、HTML/CSSなどブラウザで表示可能なUIに対応
環境構築の前提条件
Claude Code to Figmaを利用するには、以下の環境が必要です。
| 項目 | 要件 |
|---|---|
| Node.js | バージョン18以上 |
| Claude Code CLI | npm install -g @anthropic-ai/claude-code でインストール |
| Figmaアカウント | 無料プランでも利用可（Figma Makeはフルシートが必要） |
| Figmaデスクトップアプリ | デスクトップMCPサーバー利用時に必要 |
| Anthropicアカウント | Pro（$20/月）、Max 5x（$100/月）、Max 20x（$200/月）、またはAPIキー |
Figma MCP Serverのセットアップ
Figma MCP Serverにはリモートサーバーとデスクトップサーバーの2種類があります。
リモートMCPサーバー（推奨）
リモートサーバーはFigmaが提供するクラウド上のMCPエンドポイントです。Figmaデスクトップアプリが不要で、すべてのプランで利用できます。
手順1: Claude Codeのターミナルで以下のコマンドを実行します。
claude mcp add --transport http figma https://mcp.figma.com/mcp
すべてのプロジェクトで共通利用する場合は --scope user を付与します。
claude mcp add --transport http --scope user figma https://mcp.figma.com/mcp
手順2: Claude Codeを再起動し、/mcp コマンドで接続状況を確認します。
手順3: 初回利用時にOAuth認証フローが開始されます。ブラウザが起動してFigmaのログイン画面が表示されるため、「Allow Access」をクリックして認証を完了します。認証が成功すると、ターミナルに Authentication successful. Connected to figma と表示されます。
デスクトップMCPサーバー
Figmaデスクトップアプリ内蔵のMCPサーバーを使う方式です。Dev ModeまたはFullシート（有料プラン）が必要になります。
手順1: Figmaデスクトップアプリを開き、設定画面から「Enable desktop MCP server」をオンにします。
手順2: Claude Codeでローカルエンドポイントを追加します。
claude mcp add --transport sse figma-desktop http://127.0.0.1:3845/sse
手順3: Claude Codeを再起動して /mcp で接続を確認します。
どちらを選ぶべきか
| 比較項目 | リモートサーバー | デスクトップサーバー |
|---|---|---|
| Figmaデスクトップアプリ | 不要 | 必要 |
| 対応プラン | 全プラン | Dev/Fullシート |
| 接続先 | mcp.figma.com | 127.0.0.1:3845 |
| Code to Canvas（generate_figma_design） | 対応 | 非対応 |
| get_design_context | 対応 | 対応 |
| オフライン利用 | 不可 | 可 |
Code to Canvas機能（generate_figma_design）はリモートサーバーでのみ利用可能なため、コードからFigmaへの変換を行う場合はリモートサーバーを選択してください。
Figma MCP Serverが提供するツール一覧
Figma MCP Serverは複数のツールを公開しています。用途に応じて使い分けることで、デザインとコードの連携を効率化できます。
| ツール名 | 機能 | サーバー種別 |
|---|---|---|
generate_figma_design | UIキャプチャからFigmaデザインを生成 | リモートのみ |
get_design_context | Figmaフレームからコード（React+Tailwind等）を生成 | 両方 |
get_variable_defs | デザイン変数・スタイルの取得 | 両方 |
get_code_connect_map | Figmaノードとコードベースのコンポーネントをマッピング | 両方 |
add_code_connect_map | Figma-コード間のマッピングを新規作成 | 両方 |
get_code_connect_suggestions | コンポーネントマッピングを自動検出・提案 | 両方 |
send_code_connect_mappings | 提案されたCode Connectマッピングを確定 | 両方 |
get_screenshot | 選択フレームのスクリーンショットを取得 | 両方 |
create_design_system_rules | AIエージェント用のデザインシステムコンテキストファイルを生成 | 両方 |
get_metadata | レイヤーのXML表現を取得 | 両方 |
get_figjam | FigJamダイアグラムをXMLへ変換 | 両方 |
generate_diagram | Mermaid構文からFigJamダイアグラムを作成 | リモートのみ |
whoami | 認証ユーザー情報を返す | リモートのみ |
コードからFigmaへの変換手順
基本的な流れ
ステップ1: Claude Codeでプロジェクトのローカルサーバーを起動します。
# Vite + React の場合
npm run dev
ステップ2: Claude Codeに対してキャプチャ指示を出します。
ローカルサーバーを起動して、UIをキャプチャし新しいFigmaファイルに送ってください
Claude Codeは内部でブラウザを立ち上げてページをレンダリングし、generate_figma_design ツールを呼び出してFigmaへ送信します。
ステップ3: Figma上で生成されたフレームを確認します。キャプチャ結果はFigmaの「Drafts」に新規ファイルとして作成されるか、指定した既存ファイルに追加されます。
出力先の指定方法
generate_figma_design は出力先を3つの方法で指定できます。
新規ファイルに出力する場合:
UIをキャプチャして新しいFigmaファイルに送って
既存ファイルに追加する場合:
UIをキャプチャしてこのFigmaファイルに送って: https://www.figma.com/design/XXXXX/ファイル名
クリップボードにコピーする場合:
UIをキャプチャしてクリップボードに送って
クリップボード出力を使えば、任意のFigmaファイルへ手動でペーストできます。
FigmaからコードへのRoundtrip
Code to Canvas機能の大きな利点は、Figma上の編集結果をコードに戻せる点です。
Figma Makeによるデザイン編集
Figma Makeは、Figmaキャンバス上でAIを活用してデザインを編集・生成する機能です。Code to Canvasで取り込んだフレームに対して、Figma Make上で以下のような操作が可能です。
- 配色パターンの変更
- レイアウトバリエーションの比較
- テキストやアイコンの差し替え
- レスポンシブ対応の検討
コードへの反映
Figma上で編集が完了したら、Claude Codeで get_design_context ツールを使ってFigmaフレームからコードを再生成できます。
このFigmaフレームのデザインをReact + Tailwind CSSで生成して: https://www.figma.com/design/XXXXX/ファイル名?node-id=YYY
get_design_context はフレームワークを指定可能です。公式ドキュメントでは以下のプロンプト例が紹介されています。
generate my Figma selection in Vue（Vue.jsで生成）generate my Figma selection using components from src/components/ui（既存コンポーネントを活用）
Roundtripの注意点
コード → Figma → コードのRoundtripでは、以下の点に留意する必要があります。
- レイヤー構造の変換精度: Figmaのレイヤーはビジュアル表現であり、セマンティックなHTML構造と1対1で対応しません。Roundtripを経るとコードの構造が元と異なる場合があります
- ビジネスロジックの欠落: Figmaから再生成されたコードにはイベントハンドラやAPI呼び出しなどのロジックが含まれません。既存のロジック部分と手動でマージする必要があります
- スタイルの差異: CSSの一部プロパティ（アニメーション、トランジション等）はFigma上で再現されないため、Roundtrip後に欠落する場合があります
活用シナリオ別ガイド
シナリオ1: プロトタイプの素早い共有
エンジニアがClaude Codeで作成したUIプロトタイプを、デザイナーやPMに共有する場面です。Figmaファイルとして渡すことで、非エンジニアでもレイアウトの微調整やコメント追加が可能になります。
シナリオ2: デザイナー不在チームでのUI開発
デザイナーがいないスタートアップや個人開発で、エンジニアがClaude Codeで生成したUIをFigma上で整え、そのまま社内共有用のデザインガイドとして活用する方法です。
シナリオ3: 既存UIのデザインリニューアル
本番稼働中のUIをFigmaに取り込み、配色やレイアウトのバリエーションをFigma Make上で複数パターン作成してから、採用案をコードへ反映する使い方です。
シナリオ4: デザインシステムの構築
create_design_system_rules ツールでFigmaのデザイントークン・変数をAIエージェント用のコンテキストファイルとして出力し、Claude Codeがデザインシステムに準拠したコードを生成できるようにする活用法です。
他ツールとの比較
Figma MCPを利用したコード変換はClaude Code以外のツールでも利用可能です。各ツールの特徴を整理します。
| 比較項目 | Claude Code + Figma MCP | Codex CLI + Figma MCP | Kombai |
|---|---|---|---|
| コード → Figma変換 | 対応（generate_figma_design） | 非対応 | 非対応 |
| Figma → コード変換 | 対応（get_design_context） | 対応（get_design_context） | 対応（独自エンジン） |
| MCP接続 | リモート / デスクトップ | デスクトップのみ | 不要（SaaS） |
| 対応フレームワーク | React, Vue, HTML等 | React, Vue, HTML等 | React, HTML等 |
| 料金 | Claude Code利用料 + Figmaプラン | Codex利用料 + Figmaプラン | 独自料金体系 |
| 特徴 | 双方向変換が可能な唯一のツール | OpenAI Codexベース | Figma専用のデザイン→コード特化ツール |
Claude Code + Figma MCPの最大の差別化要素は、generate_figma_design によるコード→Figma方向の変換を備えている点です。他のツールはFigma→コード方向のみの対応となっています。
トラブルシューティング
MCP接続でエラーが発生する
症状: /mcp コマンドでFigmaサーバーが「disconnected」と表示される
対処法:
- Claude Codeを完全に終了し再起動します
claude mcp listでMCPサーバーの登録状況を確認します- 登録が見当たらない場合は再度
claude mcp addを実行します - リモートサーバーの場合、ネットワーク接続を確認します
OAuth認証が完了しない
症状: ブラウザが開いてもFigmaのログイン画面に遷移しない
対処法:
- ブラウザのポップアップブロック設定を確認します
- Figmaに別のブラウザでログイン済みか確認します
- ブラウザのキャッシュをクリアして再試行します
generate_figma_designでキャプチャが空になる
症状: Figmaにフレームは作成されるが中身が空、またはレイアウトが崩れる
対処法:
- ローカルサーバーが正常に起動しているか確認します（
http://localhost:xxxxにブラウザでアクセス） - ページの読み込みに時間がかかるSPAの場合、初期表示の完了を待つプロンプトを追加します
- CSS-in-JSライブラリの動的スタイルが一部キャプチャされない場合があるため、静的CSSへの切り替えを検討します
Roundtripでコード品質が劣化する
症状: Figmaから再生成したコードが元のコードと大きく異なる
対処法:
- Roundtripで再生成されたコードはUI層のみと割り切り、ビジネスロジックは手動マージします
get_design_contextの実行時に既存のコンポーネントパスを指定することで、既存の設計に沿ったコード生成が期待できます- 差分比較ツール（git diffなど）で変更箇所を把握してから統合します
料金の目安
Claude Code to Figmaを利用する際のコストは、Anthropic側とFigma側の2つに分かれます。
Anthropic側
| プラン | 月額 | 特徴 |
|---|---|---|
| Pro | $20 | Claude Codeの基本利用が可能 |
| Max 5x | $100 | Proの5倍の利用枠 |
| Max 20x | $200 | Proの20倍の利用枠 |
| API利用 | 従量課金 | Sonnet: $3/$15、Opus: $5/$25（入力/出力 per 1Mトークン） |
Figma側（MCPツールコール上限）
| プラン / シート | リモートMCP | デスクトップMCP | 1日あたり上限 |
|---|---|---|---|
| Starter（無料） | 利用可 | 不可 | 月6回（月間上限） |
| Professional / Dev・Fullシート | 利用可 | 利用可 | 200回/日 |
| Organization / Dev・Fullシート | 利用可 | 利用可 | 200回/日 |
| Enterprise / Dev・Fullシート | 利用可 | 利用可 | 600回/日 |
| 有料プラン / View・Collabシート | 利用可 | 不可 | 月6回（月間上限） |
無料プラン（Starter）でもリモートMCPサーバー経由でCode to Canvas機能を試せますが、月6回のツールコール制限があります。実用的に利用するにはProfessional以上のプランでDev/Fullシートが必要です。Figma MakeによるAI編集やデスクトップMCPサーバーも有料プランのDev/Fullシートが前提です（出典: Figma Developer Docs）。
なお、Figmaは2026年3月18日からFullシートのAIクレジット制限を適用開始する予定です。2026年Q2以降は従量課金（$0.03/クレジット）も導入されるため、利用量に応じたコスト管理が重要になります（出典: Figma Help Center）。
まとめ
Claude Code to Figmaは、AIコーディングとデザインツールの間にあったギャップを埋める仕組みです。エンジニアが生成したUIをデザインチームと直接共有でき、デザイン修正をコードへ戻すRoundtripも実現しています。
セットアップはClaude Codeでの claude mcp add コマンド1行で完了し、OAuth認証後すぐに利用を開始できます。2026年2月のリリース直後であり、Roundtripのコード品質やFigmaレイヤーの構造精度には改善の余地があるものの、デザインとコードの往復を必要とするチームにとっては検討に値するツールです。
公式ドキュメント: