AIを使ってコードを書く時代は、すでに多くのエンジニアにとって「日常」になりつつあります。Claude CodeやCursorで画面を作ってみたはいいけれど、「このUIをデザインチームと共有するにはどうすればいいんだろう？」「スクリーンショットを送るしかないか…」という壁にぶつかったことはありませんか？
2026年2月17日、FigmaとAnthropicが共同でリリースした「Code to Canvas」は、まさにその課題を解消する機能です。Claude Codeで生成・構築したUIを、スクリーンショットではなく編集可能なFigmaフレームとしてキャンバスに直接インポートできるようになりました。
この記事では、Code to Canvasの仕組みから導入方法、具体的なユースケース、注意点まで徹底解説します。デザイナー・エンジニア・PMが混在するプロダクトチームで働くすべての方に読んでほしい内容です。
- Code to Canvasとは何か？誕生の背景を理解する
- Code to Canvasの仕組み：MCPが核心技術
- 導入方法：ステップバイステップで設定する
- 具体的な活用シーン：こんな時に威力を発揮する
- 従来手法・競合ツールとの比較
- 注意点・デメリット：導入前に知っておくべきこと
- デザインと開発の未来：Code to Canvasが示す方向性
- まとめ：Code to Canvasで何が変わるか
Code to Canvasとは何か？誕生の背景を理解する
従来のデザイン→開発ワークフローの限界
これまでのプロダクト開発は、ほぼ一方通行の流れでした。
- デザイナーがFigmaでモックアップを作成
- エンジニアがそれを見てコードを実装
- 実装物を確認してデザイナーがフィードバック
このフローが「常識」だった時代は、AIコーディングツールが普及する前の話です。Claude CodeやCursorを使えば、エンジニアでなくともプロンプト一発で動くUIプロトタイプを数分で作れるようになりました。
しかし新たな問題が生まれました。コードで作ったUIを、チームで共有・議論・精査するための「共通の場所」がなかったのです。ローカル環境で動いているだけでは、デザイナーやPMがアクセスするために「ビルドしてください」とお願いするか、スクリーンショットで済ませるしかありませんでした。
FigmaとAnthropicが目指した「双方向ワークフロー」
Figmaのディラン・フィールドCEOは今回の発表でこう語っています。「従来、プロダクトのデザインと開発は直線的に進むことが一般的でした。今では、どこからでも始められ、どこへでも進むことができます」。
Code to Canvasは、この「どこからでも始められる」を実現するための橋です。コードを書く作業とキャンバスで考える作業を、行き来できるようにする仕組みです。
Code to Canvasの仕組み：MCPが核心技術
MCP（Model Context Protocol）とは何か
Code to Canvasの土台となっているのが、MCP（Model Context Protocol）というオープンな通信規格です。MCPはAIツールと外部アプリケーションをつなぐ「ユニバーサルアダプター」のようなものです。ひとことで言えば、「ClaudeがFigmaの環境とデータをやりとりするための共通言語」です。
FigmaはデスクトップアプリにMCPサーバー機能を内蔵しており、これを有効にするとClaude Codeからアクセスできるようになります。
コードからFigmaフレームへの変換プロセス
技術的な流れはシンプルです。
- Claude CodeでUIを構築・調整する（ローカル開発サーバー・ステージング・本番環境、ブラウザで動くものなら何でも対象）
- 「Send this to Figma」とタイプする（たったこれだけ）
- ブラウザのレンダリング状態を取得し、Figmaが解釈できるフレーム形式に変換
- Figmaのキャンバスに貼り付け、完全に編集可能なデザインアーティファクトとして配置される
重要なのは、「スクリーンショット（フラット画像）ではない」という点です。テキスト・レイアウト・コンポーネント構造が保たれた、実際に操作・編集できるFigmaフレームとして変換されます。
複数画面のフロー（例：オンボーディング→メイン画面→設定画面）も一度のセッションでキャプチャでき、画面の順序とコンテキストが保持された状態でキャンバスに展開されます。
導入方法：ステップバイステップで設定する
事前に必要なもの
- Figmaデスクトップアプリ（ブラウザ版では動作しません）
- Claude Codeのインストール
- FigmaのDev Mode（開発者向け機能）
セットアップ手順
Step 1：FigmaデスクトップアプリでMCPサーバーを有効にする
Figmaのデスクトップアプリを開き、「設定（Preferences）」から「Dev Mode MCP Server」をオンにします。これにより、ローカルでhttp://127.0.0.1:3845/sseというサーバーが起動します。
Step 2：Claude CodeとFigmaを接続する
ターミナルで以下のコマンドを1行実行するだけです。
claude mcp add --transport sse figma-dev-mode-mcp-server http://127.0.0.1:3845/sse
Step 3：Figmaに送る
Claude Codeでブラウザ上のUIを確認しながら、以下のようにタイプします。
Send this to Figma
たったこれだけで、現在ブラウザに表示されているUIの状態がFigmaのキャンバスに転送されます。
Step 4：Figmaでコラボレーション開始
転送されたフレームはそのままFigmaの標準機能で編集できます。コンポーネントの移動、テキストの変更、バリアントの追加、コメントの記入など、通常のFigmaデザインと同じ操作感で作業できます。
具体的な活用シーン：こんな時に威力を発揮する
① 実データを使ったUIレビューの効率化
従来、データ量の多いダッシュボードやリスト画面をFigmaで再現しようとすると、ダミーデータを入力する手間が膨大でした。VercelのプロダクトデザイナーであるTom Johnson氏はこう述べています。「私は、Vercelのデータ量の多いUIのほとんどすべてを、実際のデータを使って5分以内に再作成しました。チャート、リスト、表、フィルター、全部ワンショットです」。
Claude Codeで本番に近いデータを使ったUIを構築し、そのままFigmaに送ることで、実際の使用感に近い状態でデザインレビューが行えます。
② 代替案の並列比較と意思決定の加速
UIの設計方針で「カード型がいいか、リスト型がいいか」といった議論は、開発チームどこでも起こります。Code to Canvasを使えば、Claude Codeで複数のバリアントをすばやく生成し、それぞれをFigmaキャンバスに展開して横に並べて比較検討できます。
ボツになった案もFigmaに残るため、「あの時考えたあのパターン、やっぱり良かったかも」という場面でも参照できます。
③ 開発者・デザイナー・PMの三者同時コラボレーション
コードを見られないPMでも、Figmaなら自分でフレームを動かしたりコメントを残したりできます。「このボタンの位置がずれている」「このコピーを変えたい」といったフィードバックを、Figmaの共有キャンバス上で全員が同じアーティファクトを見ながらリアルタイムで議論できます。
④ マルチ画面フロー全体の可視化
例えばECサイトのチェックアウトフロー（カート→住所入力→支払い→確認→完了）を一度のセッションで全画面キャプチャし、Figmaキャンバスに横並びに展開できます。これにより、フロー全体のUXを俯瞰してボトルネックを特定しやすくなります。
従来手法・競合ツールとの比較
Code to Canvasが既存のワークフローや競合ツールとどう違うのかを整理します。
| 比較項目 | スクリーンショット共有 | Storybook連携 | Figma Makeのみ | Code to Canvas |
|---|---|---|---|---|
| 編集可能性 | ❌ 不可 | ❌ 不可 | ✅ 可能 | ✅ 可能 |
| 実コードベース連携 | ❌ 手動 | ✅ | ❌ | ✅ Claude Codeと直結 |
| 実データでの確認 | △ 手間がかかる | ✅ | △ | ✅ スムーズ |
| チームコラボ | ❌ 個人完結 | △ 技術者寄り | ✅ | ✅ |
| 設定の手軽さ | ◎ 不要 | △ 要設定 | ◎ | ○ MCP設定が必要 |
| マルチ画面フロー | ❌ | △ 別々に管理 | △ | ✅ 一括キャプチャ |
| 双方向性（FigmaからCode反映） | ❌ | ❌ | ❌ | ✅ Figma MCP経由で可能 |
特に注目すべきは「双方向性」です。Figmaでデザインを修正した後、Figma MCPを使ってコードベースに変更を引き戻すこともできます。コードとデザインが循環するワークフローが初めて実現しました。
注意点・デメリット：導入前に知っておくべきこと
便利な反面、現時点ではいくつかの制約と注意点があります。
デスクトップアプリ必須
MCPサーバーはFigmaのデスクトップアプリ上でのみ動作します。ブラウザ版Figmaでは利用できません。普段ブラウザ版を使っているチームは、デスクトップアプリへの切り替えが必要です。
Claude Codeは実際のコードベースを直接操作する
Claude Codeは、ローカル環境のコードファイルに直接変更を加えるツールです。サンドボックス環境ではありません。誤ったプロンプトで意図しないコード変更が起きる可能性があります。Gitによるバージョン管理を徹底した上で使うことを強く推奨します。
トークンコストへの注意
大きなデザインファイルや多画面フローのキャプチャは、APIトークンを多く消費します。大規模プロジェクトでは、月次のトークン使用量とコストを事前に見積もっておくことが重要です。
変換精度には限界がある
実際のUI要素は概ね忠実に変換されますが、複雑なアニメーションやWebGL描画、特殊なCSSエフェクトは完全には再現されない場合があります。あくまで「デザインの議論と意思決定のための起点」として使うのが現実的です。
ファイルサイズとパフォーマンス
多くの画面を一度にキャプチャすると、Figmaファイルが大きくなり動作が重くなる場合があります。適切なページ・フレームの分割管理が必要です。
デザインと開発の未来：Code to Canvasが示す方向性
Code to Canvasは単なる「便利な連携機能」ではなく、プロダクト開発のパラダイムシフトを象徴しています。
AIコーディングツールが普及した結果、「誰でも動くUIを作れる時代」が来ました。しかしその分、チームが「どのUIが正解か」を判断し、磨き上げるプロセスの重要性が逆に増しています。
Figmaは「AIはデザインキャンバスを不要にするのではなく、より多くの選択肢をより速くキャンバスに供給するものだ」と主張しています。つまり、デザイナーの役割は「作る人」から「AIが生成したものを評価・選択・磨く人」へとシフトするというわけです。
エンジニアにとっても、「コードを書いたらFigmaで共有できる」という選択肢が加わることで、デザイナーとのコミュニケーションコストが大幅に下がります。特にスタートアップや少人数のチームでは、このワークフローが開発速度に直結するでしょう。
まとめ：Code to Canvasで何が変わるか
FigmaとAnthropicが2026年2月17日にリリースした「Code to Canvas」は、Claude Codeで構築したUIをそのまま編集可能なFigmaフレームとして取り込める、まったく新しいワークフローを提供します。
- MCPを通じてClaude CodeとFigmaを接続し、「Send this to Figma」の一言で転送完了
- スクリーンショットではなく編集可能なフレームとして取り込まれる
- 複数画面のフロー全体を一括キャプチャしてチームで議論できる共通の場が生まれる
- FigmaからコードへのフィードバックループもFigma MCPで実現可能
従来の「デザイン→コード」という一方通行が、「コード⇄キャンバス」の双方向に変わることで、チームの意思決定スピードと品質が同時に上がります。
まずはFigmaデスクトップアプリとClaude CodeのMCP連携を設定してみるところから始めてみましょう。一度体験すれば、これまでのワークフローには戻れなくなるはずです。
