Code to Canvasとは、Claude CodeとFigmaを連携することで、実装済みUIを編集可能なレイヤーとして扱うツールです。UIやデザインの比較、微調整、合意形成に役立ちます。
本記事ではCode to Canvasの概要や具体的な使い方、FigmaとClaude Codeそれぞれの料金プランを踏まえた料金の考え方までまとめて解説します。
Code to Canvasとは
Code to Canvasでは実装済みのUIをFigmaへ取り込み、編集可能なデザインレイヤーとして扱えるようになります。
これまでの手法との比較を踏まえて、Code to Canvasの特徴を紹介します。
Code to Canvasの特徴｜「コードの変換」ではなく実行UIを起点にする
実装済みのユーザーインターフェースをFigmaへ取り込み、編集可能なレイヤーとして扱えるCode to Canvasが登場しました。ページ単位や要素単位といった柔軟な粒度でデザインの取り込み・編集が可能です。
完成画面をただ貼り付けるのではなく、Figma上で変更できる形式にするため、「実装→確認→修正→再確認」というサイクルをスピーディに行えます。例えば、Figmaに取り込んだファイルからデザイナーやPMがデザインの調整・修正を進め、プログラマーとの合意形成も効率化されるというメリットがあります。
変更点が視覚的に整理された状態で進められるため、デザイナー・PMとプログラマー双方にとって修正の合意形成がしやすくなります。
Code to Canvasは、「コード→Figma」だけでなく、Figmaフレームを参照しながらClaude Codeで実装に戻すといった往復のワークフローもサポートされている点が特徴的です。デザインのレビュー・比較検討がFigmaの中で完結できるため、デザイン案とUI実装のサイクルが効率化されます。
【比較表】Code to Canvasと従来手法の違い
デザインを共有する手法として、これまではスクリーンショット共有や画面録画といった方法がとられていました。
これらの従来の手法とCode to Canvasの違いを整理しました。
| 項目 | Code to Canvas | 従来の手法 （スクリーンショットや画面録画） |
|---|---|---|
| 入出力 | 実装済みのUI → デザイン デザイン → コード化したUI | デザイン→画像/動画ファイル |
| 取り込んだデザインの変更 | ||
| 向いている用途 | 実装UIを起点に、合意形成・微調整を効率化 | 完成したUIの共有「だけ」したい |
スクリーンショットや画面録画では、デザインを変更するためにプログラマーがコードを変更する必要があります。つまり、従来手法はデザインの確認には使えても、デザインの修正・調整には手間がかかるという課題がありました。
Code to CanvasはUIを編集可能なデザインレイヤーとしてFigmaに取り込めるため、デザインの修正・調整も簡略化される点が大きな違いとなっています。
Claude CodeとFigmaを連携するための前提条件
Code to Canvasを活用するには、MCPサーバーの接続やFigmaの権限設定が重要です。
ここでは、Code to Canvas使用の前提条件となる各種設定について解説します。
Code to Canvasの利用に必要なもの
Claude CodeからCode to Canvasを使う前提として、主に以下の3つが必要です。
- Figmaアカウント
- Claude CodeからFigma MCPサーバーへの接続
- Figma側ファイルの編集権限（必要な場合）
まず、Figmaファイルとしてデザインを取り込むためにCode to Canvasが利用可能なFigmaアカウントが必要です。無料プランでもCode to Canvasを利用できますが、プランによって上限が異なります。詳しいFigma側の条件は、本記事の「Code to Canvasのコスト構造｜Figmaの利用料金」をご確認ください。
Claude CodeからCode to Canvasを使用するには、Claude CodeがFigmaのRemote MCPサーバーに接続できる必要があります。
また、Figmaへの取り込み方法によって必要な権限が異なるので注意してください。
FigmaのRemote MCPとDesktop MCPの違い
Code to Canvasを利用するためにFigmaのMCPサーバーに接続する必要があります。FigmaのMCPサーバーには、Remote MCPとDesktop MCPが存在します。
それぞれの違いは以下の通りです。
| 項目 | Remote MCP | Desktop MCP |
|---|---|---|
| 接続先 | Figma提供のMCPサーバー | ローカル環境に起動したMCPサーバー |
| セットアップ | URLを指定して追加 | ローカル環境でMCPサーバーを起動 |
| Code to Canvasの利用 |
Remote MCPとDesktop MCPの大きな違いは、「MCPサーバーがどこにあるか」と「機能」になります。
Remote MCPはURLを指定することで、Figmaが提供するMCPサーバーにアクセス可能です。Desktop MCPはローカル環境のMCPサーバーにアクセスするため、まずMCPサーバーの起動が必要になります。
現在、Code to CanvasはRemote MCPのみでサポートされているため、Code to Canvasを使用する際はRemote MCPを使用しましょう。
FigmaのMCPサーバーについては以下の記事で詳細を解説しています。
Figmaの保存方法｜新規作成・既存ファイル・クリップボード
Code to Canvasを使って取り込んだ「デザインレイヤ」は 新規Figmaファイル、既存Figmaファイル、クリップボードの3か所に保存できます。
新規Figmaファイルは、UIの検証・検討に向いた保存方法です。デザインを取り込んだうえでレイヤー構造や再現度を確認してから、デザインの修正・調整をする、といった使い方が考えられます。
既存Figmaファイルに保存する方法は、デザインをコードで実装した後のブラッシュアップに向いています。例えば、実装したライブUIをキャプチャしてまずFigmaへ送ります。デザイナーやPMはFigmaに送信したデザインをもとに最終調整や変更指示を行う、といった使い方が可能です。
クリップボードへの保存は、ファイル管理を介さずに素早くデザイン確認を行うときの選択肢です。メッセージツールを介した迅速な確認、一時的な貼り付け保存といった用途に向きます。
Figmaファイルに保存すると履歴が残り管理しやすいため、修正指示を伴うレビュー・共有の場合の保存先には、「新規Figmaファイル」か「既存Figmaファイル」がおすすめです。
- 新規Figmaファイル … デザイン検討・実装の初期段階に向く
- 既存Figmaファイル… デザイン検討・実装の微調整に向く
- クリップボード … 簡単な共有や保存向き
Figmaの権限管理｜ファイル・プロジェクト権限とFigmaの保存方法
Figmaのファイルやプロジェクトには、各ユーザーに以下の権限が割り当てられます。
- Can edit（編集可能）… 該当のプロジェクト内でファイルの作成・編集が可能
- Can view（閲覧可能）… 該当プロジェクトの閲覧のみ可能。各ファイルへのアクセスは、ファイルごとに設定される権限によって決まる
- Owner（所有者）… プロジェクトの作成者。プロジェクト内でファイルの作成・編集が可能
Code to Canvasでは、ファイルの保存方法によっては権限設定が必要になります。「既存Figmaファイル」に保存する場合は「Can edit（編集可能）」を設定してください。
Code to Canvasを利用する前に、対象ファイルに対して必要な権限を割り当て可能か確認するようにしましょう。
Code to Canvasの使い方ガイド
Code to Canvasを利用するために、Claude Code上で必要な設定について具体的な手順を紹介します。
また、実際のCode to Canvas利用ステップやトラブルシューティングについても説明します。
Code to Canvasのセットアップ｜Remote MCP追加→接続→認証
Code to Canvasを利用するためには 、https://mcp.figma.com/mcp に接続し、FigmaのリモートMCPサーバを使用する必要があります。Claude CodeからリモートMCPサーバにアクセスする手順は以下の通りです。
ターミナルで以下のコマンドを実行し、Claude Codeが使用するMCPサーバーにFigmaのリモートMCPサーバーを追加します。
claude mcp add --transport http figma https://mcp.figma.com/mcpターミナルで以下のコマンドを実行すると、Claude Codeが使用するMCPサーバーの一覧が表示されます。
claude mcp listFigmaのリモートMCPサーバーが追加されていることを確認してください。
ターミナルでclaudeと入力し、Claude Codeを起動します。
FigmaのリモートMCPサーバーを使用するために認証が必要です。起動したClaude Codeで/mcpと入力します。
MCPサーバーの一覧が表示されるので、「figma」を選択します。
認証を行うために「Authenticate」を選択してください。
Claude Codeに表示されるURLをブラウザに入力すると、認証画面が表示されます。問題がなければ「同意してアクセスを許可する」ボタンをクリックします。
Claude Code上に「Authentication successful. Connected to figma.」と表示されたら認証完了です。
基本の操作手順｜Claude Codeを使ってUIをFigmaに保存する
Code to Canvasを使って、Claude Codeで実装したアプリケーションのUIを簡単にFigmaに取り込む方法について紹介します。実際の手順は以下の通りです。
まずはClaude Codeを立ち上げて、任意のUIを実装します。
今回実装したTODOアプリのUIは以下の通りです。
Claude Codeで以下のプロンプトを送ります。
Send this to Figma実行するとローカルでUIのキャプチャが開始されます。キャプチャが完了すると、以下のようにメニューバー内に「Figmaに送信」と表示されます。
Figma上で取り込んだデザインを確認するため、メニューバーの「ファイルを開く」ボタンをクリックします。
クリックするとFigmaの画面に遷移し、取り込んだデザインが表示されます。単なるスクリーンショットではなく、編集可能なデザインとして保存されていることが確認できます。
以上のように、Claude Codeで実装したUIを数ステップでFigmaに取り込むことができました。
トラブルシューティング｜Code to Canvasによる取り込みが表示されない
Claude Code上でデザインを取り込むプロンプトを入力しても、Code to Canvasを使ったFigmaへの送信が選択できない場合があります。
この場合、Claude CodeがFigmaのRemote MCPサーバーに接続していないことが原因として考えられます。Code to Canvasを使うためにはRemote MCPサーバーへアクセスする必要があるため、その設定に不備があるとCode to Canvasが使用できません。
Remote MCPサーバーへの接続を確認するためには、Claude Codeで/mcpと入力してください。以下のように、Claude Codeが接続しているMCPサーバーが確認できます。
接続しているMCPサーバーの一覧に「figma」が表示されていない場合、MCPサーバーの追加手順を実施する必要があります。Claude Codeをexitしてからターミナルでclaude mcp add --transport http figma https://mcp.figma.com/mcpを実行し、MCPサーバーを追加してから認証を行ってください。
接続しているMCPサーバーの一覧に「figma」が表示されていて、「needs authentication」と表示されている場合は認証が必要です。「figma」を選択すると、以下のように認証について確認されるため、「Authenticate」を選択して認証を進めてください。
Code to Canvasの料金体系
Claude CodeからCode to Canvasを利用する場合、Claude CodeとFigmaの料金を考慮する必要があります。
それぞれの料金プランとプラン選定のポイントをお伝えします。
Code to Canvasのコスト構造｜Figmaの利用料金
Code to Canvasを使用する場合、主に「Figmaの利用料金」と「Claude Codeの利用料金」を考慮する必要があります。
Figmaには無料プランと有料のプランがありますが、いずれのプランでもCode to Canvasが利用できます。ただし、プランごとにFigma MCPサーバーへのアクセス回数や、各機能の制限が異なります。
| プラン | 料金(月額) | 料金(年払い) | Figma MCPサーバーアクセス制限 |
|---|---|---|---|
| スターター | 無料 | 6回/月 | |
| プロフェッショナル | コラボシート：¥750 Devシート：¥2,250 フルシート：¥3,000 | コラボシート：¥450 Devシート：¥1,800 フルシート：¥2,400 | コラボシート：6回/月 Devシート200回/日 フルシート200回/日 |
| ビジネス | コラボシート¥750 Devシート：¥3,750 フルシート：¥8,300 | コラボシート6回/月 Devシート200回/日 フルシート200回/日 | |
| エンタープライズ | コラボシート：¥750 Devシート：¥5,250 フルシート：¥13,600 | 最大600回/日 |
個人利用や小規模な検証であれば、無料のスターターで試すことができます。
チーム利用や本格的な利用を開始する場合は、プロフェッショナルやビジネスプランの利用が現実的です。Code to Canvasの利用回数が一日200回を超える場合は、エンタープライズプランを検討しましょう。
Claude Codeの利用料金
Figmaアカウントについては、無料プランでもCode to Canvasが使用可能です。ただしClaude Codeを利用するためには、Claudeの有料プランの契約が必要です。
Claude CodeでCode to Canvasを利用する場合、無料枠では使用できないためご注意ください。Claudeの有料プランの料金は以下の通りです。
| 項目 | Pro | Max | Team | Enterprise |
|---|---|---|---|---|
| 月額料金 | $20 (約¥3,100) | $100/$200 (約¥15,500/¥31,000) | $25/$125 (約¥3,875/¥19,375) | 要問い合わせ |
| 年額プラン （月相当） | $17 | $20/$100 | 契約条件次第 | |
| Claude Code | ||||
| 使用量 （セッション） | 基準 | Proの5倍/20倍 | Proの1.25倍/6.25倍 | 課金モデル次第 |
| 使用制限の考え方 | 上限あり | 上限あり | 上限あり | 明確な上限なし 消費に応じ課金 |
個人利用の場合はまずProプランを使用し、セッション上限に到達する場合にはMaxプランへ移行できます。
チーム利用向けには、Teamプランが用意されています。利用量別に2シート用意されているため、Claude Codeによる開発規模を考慮してシートが選択できます。Teamプランの使用量が十分でない場合には、Enterpriseプランの利用を検討するとよいでしょう。
なお、Claude Codeを、Vertex AIやMicrosoft Foundry経由で利用する場合は、それぞれのプラットフォーム側の料金体系が適用されます。
Claude Codeの詳細については、以下の記事もご確認ください。
まとめ
Code to Canvasは実装済みUIをFigmaに編集可能な形で送信し、デザインの比較・合意形成・微調整を効率化できるAIツールです。
導入時にはRemote MCPへの接続と、デザインの保存方法（新規/既存/クリップボード）に応じた権限設定が重要になります。具体的な使い方や設定手順について本記事で紹介していますので、まずはスモールスタートでCode to Canvasを利用してみてはいかがでしょうか。