Code to Canvas とは何か
Code to Canvas は、Anthropic の Claude Code で生成・実装した UI を、Figma のキャンバスに「フル編集可能なフレーム」として取り込む機能です。Claude Code で動くプロトタイプができた段階で、そのまま Figma に持ち込んでデザイナーが微調整できるため、「コードで動いているものとデザインカンプが乖離する」問題が根本的になくなります。
逆方向の Figma MCP サーバー（Figma Dev Mode MCP Server）は以前から提供されており、Figma フレームから変数・コンポーネント・レイアウトデータを Claude Code に渡して production コード化できます。これにより往復（デザイン ⇄ コード）の両方で MCP 経由の精度の高い連携が成立しました。
双方向フローの全体像
| 方向 | 起点 | 到達点 | 主な用途 |
|---|---|---|---|
| Design → Code | Figma フレーム | Claude Code で production コード生成 | 新機能実装、既存デザインの実装反映 |
| Code → Design | Claude Code の UI 実装 | Figma 編集可能フレーム | プロト後の微調整、チームレビュー、デザインシステムへの統合 |
セットアップ手順（Figma Dev Mode MCP Server）
前提条件
- Figma デスクトップアプリ（ブラウザ版では不可）
- Figma の Dev シートまたは Full シート
- Claude Code（CLI またはデスクトップアプリ）
手順
- Figma デスクトップアプリを起動し、Preferences から "Dev Mode MCP Server" をオン
- ローカルで
http://127.0.0.1:3845/sseが立ち上がる - ターミナルで 1 行実行:
claude mcp add --transport sse figma-dev-mode-mcp-server http://127.0.0.1:3845/sse - Claude Code 側で Figma フレームの URL を渡して「このデザインを React + Tailwind で実装して」と指示すれば完了
公式情報（一次ソース）
- Figma 公式ブログ「Introducing Claude Code to Figma」 — figma.com/blog/introducing-claude-code-to-figma/
- Figma ヘルプセンター「Guide to the Figma MCP server」
- GitHub: figma/mcp-server-guide
活用ユースケース 4 選
① 既存デザインシステムの実装忠実化
デザインシステム（色・タイポ・コンポーネント）が Figma で管理されている企業では、MCP 経由でトークンを Claude Code に渡すことで、デザイナーの意図を 100% 反映した React/Vue/Svelte コンポーネントが自動生成されます。手動でのピクセル合わせがなくなります。
② Claude Code プロトを Figma で磨く
新機能の検討時、Claude Code で機能するプロトタイプを 1 時間で作り、それを Code to Canvas で Figma に取り込んでからデザイナーが仕上げる。「動くものがあるから議論が早い」× 「Figma で調整できるから美しい」の両立。
③ PM 主導のゼロイチ検討
PM が Claude Code で「仮の UI」を立ち上げ、それを Figma に持ち込んでデザイナーと議論。デザイナーが参加する前に、議論のたたき台が動いている状態を作れるようになりました。
④ レガシー UI の Figma 化
Figma 導入前に作られた社内システムの UI を、Claude Code がスクリーン解析 → 再実装 → Code to Canvas で Figma フレームに取り込み。デザイン資産のキャッチアップを AI が肩代わりします。
Claude Design との棲み分け
2026 年 4 月ローンチの Claude Design はゼロからの生成（text-to-prototype）が強みです。一方で Figma MCP + Code to Canvas は、既存の Figma 資産やコードベースを軸にした往復編集が強み。大企業の既存デザインシステム運用には後者が、スタートアップのゼロイチ高速プロトには前者が向きます。併用も可能です。
導入時の注意点
- Dev Mode MCP Server は現時点でローカル専用 — リモートサーバー版も提供されているが、セキュリティ検討が必要
- Claude Code 側で消費するトークン量が大きい（デザインファイル全体を渡すため）Max プラン以上を推奨
- 生成コードのコーディング規約適合は別途チェック必須（ESLint・Prettier・Stylelint 連携を併用）
- 既存 Figma 運用とのワークフロー整合 — レビュー責任者、命名規則、コンポーネント命名を事前整備
エトラクトの伴走ポイント
- Figma MCP 導入アセスメント — 現状のデザイン資産・開発フローと相性診断
- セットアップと検証 — Dev Mode MCP Server 導入、社内検証プロジェクト実施
- Tailwind / デザイントークンの整合設計 — 既存コードベースと Figma 変数の同期
- チーム運用ルール策定 — デザイナー・エンジニアの協業フロー再設計
まとめ
Code to Canvas + Figma Dev Mode MCP Server は、デザインと実装の「翻訳ロス」をゼロに近づける重要なインフラです。2026 年の PM・デザイナー・エンジニアの協業は、この双方向連携を前提に再設計する必要があります。Claude Design と組み合わせることで、ゼロイチ〜量産〜運用の全工程をカバーできる体制が整います。