2026年2月、FigmaとAnthropicは共同で「Code to Canvas」と呼ばれる新機能を発表しました。Claude Codeで構築したUIをFigmaの編集可能なフレームへ変換できるこの機能は、デザインとコードの受け渡しを根本から変える可能性を秘めています。2026年3月にはキャンバスへの直接書き込み機能「Write to Canvas」が追加され、同年4月にはAnthropic独自のデザインツール「Claude Design」もリリースされるなど、AI×デザイン領域の進化は加速の一途をたどっています。
しかし、Claude Code to Figmaとはそもそもどのような機能なのか、Figma MCPサーバーの設定方法はどう進めればよいのか、Claude Designとは何が違うのかといった疑問を持つ方も多いのではないでしょうか。
本記事では、Claude Code to Figmaの概要やセットアップ手順から、使える機能の全体像、活用シーン、そしてClaude Designとの違いまで、JAPAN AIが網羅的に解説します。
＼ ChatGPTもClaudeもGeminiも使える！ ／
Claude Code to Figmaとは
Claude Code to Figmaは、Anthropicのターミナルベース開発ツール「Claude Code」とデザインツール「Figma」をMCP（Model Context Protocol）で接続し、コードとデザインを双方向にやり取りできる仕組みです。正式名称は「Code to Canvas」と呼ばれ、2026年2月17日にFigmaとAnthropicが共同で発表しました。
Claude Codeで構築したWebアプリのUIをFigmaの編集可能なフレームに変換したり、逆にFigmaのデザイン情報を読み取ってコードを生成したりと、デザインとコードの間にある翻訳コストを大幅に削減できる点が特徴です。この連携はFigma MCPサーバーを介して実現されており、Claude CodeからFigmaの各種ツールを呼び出す形で動作します。
なお、MCP（Model Context Protocol）の基本的な仕組みや活用事例については、「MCP（Model Context Protocol）とは？仕組み・メリット・活用事例をわかりやすく解説」の記事で詳しく解説しています。
何ができるようになったのか
Claude Code to Figmaの登場により、エンジニアとデザイナーの協業における以下の作業が可能になりました。
- Claude Codeで構築したWebアプリのUIを、Figmaの編集可能なフレームとして取り込める
- Figma上でレイヤー構造やテキスト、Auto Layoutを自由に編集できる
- Figmaのデザイン情報をClaude Codeに読み込ませ、プロジェクトの技術スタックに合わせたコードを生成できる
- デザインシステムのコンポーネントや変数を活用した、Figmaキャンバスへの直接書き込みができる
従来はスクリーンショットやPDFでの共有が中心だったUI情報の受け渡しが、編集可能なデザインデータとして双方向にやり取りできるようになった点が大きな変化です。エンジニアが作ったUIの意図をデザイナーが正確に受け取り、そこからさらにブラッシュアップする流れが実現しています。
Claude Code to Figmaの使い道
Claude Code to Figmaを活用した典型的なワークフローは、エンジニアとデザイナーの間でコードとデザインが循環する「ラウンドトリップ」型の開発プロセスです。
具体的には、まずエンジニアがClaude Codeを使ってWebアプリのUIを構築します。ローカルサーバーで動作するUIが完成したら、generate_figma_designツールを使ってFigmaに送信します。Figma上に取り込まれた編集可能なフレームをデザイナーが確認し、配色やレイアウト、タイポグラフィを調整します。修正が完了したら、今度はget_design_contextツールでデザイン情報をClaude Codeに読み込ませ、コードに反映するという流れです。
このサイクルを繰り返すことで、デザインとコードの乖離を最小限に抑えながら、チーム全体で品質を高めていける点が、従来の一方通行型ワークフローとの決定的な違いです。
Claude Code to Figmaが求められる背景
Claude Code to Figmaが求められる背景には、デザインとコードの受け渡しにおける構造的な非効率が長年にわたり存在していました。AIコーディングツールの台頭により、コードの生成速度は飛躍的に向上した一方で、生成したUIをチームに共有・フィードバックする手段は従来のままという新たなギャップも生まれています。
従来のワークフローの課題
従来のデザインとコードの受け渡しには、3つの構造的な課題がありました。
1つ目は、デザイナーからエンジニアへの一方通行の情報伝達です。Figmaでデザインを作成し、エンジニアがそれをコードに変換するという流れでは、エンジニア側からデザイナーへのフィードバックがスクリーンショットや口頭説明に限られていました。デザインの意図がコードに正確に反映されているかを検証する手段が乏しく、手戻りが頻発する原因になっていました。
2つ目は、Figma上のデザインと実装コードの乖離です。デザインツール上で表現されたUIと、実際にブラウザで動作するUIの間には、レンダリングエンジンの違いやレスポンシブ対応の差異など、本質的なギャップが存在します。エンジニアはデザインデータを目視で確認しながら手動で再現する必要があり、ピクセル単位の調整に多大な工数を費やしていました。
3つ目は、AIコーディングツールの台頭によって生まれた新たな課題です。Claude CodeやGitHub Copilotの普及により、UIの構築速度は大幅に向上しました。しかし、AIが生成したUIをデザイナーやプロダクトマネージャーに共有し、フィードバックを得るための仕組みが追いついていませんでした。コードは速く書けるようになったにもかかわらず、チーム内の合意形成プロセスがボトルネックになるという逆転現象が起きていたのです。
Code to Canvasが解決すること
Claude Code to Figmaは、上記の課題に対してコードとデザインの双方向連携という解決策を提示しています。
generate_figma_designツールを使えば、Claude Codeで構築したUIをFigmaの編集可能なフレームとして取り込めるため、エンジニアからデザイナーへのフィードバックがデザインデータとして直接伝わります。デザイナーはスクリーンショットではなく、実際に編集可能なレイヤー構造を受け取れるため、意図の齟齬が大幅に減少するでしょう。
さらに、use_figmaツールによるキャンバスへの直接書き込み機能を使えば、デザインシステムのコンポーネントや変数を活用した精密なデザイン生成も可能です。コードとデザインの間で情報が循環する仕組みが整うことで、手戻りの削減とチーム全体の生産性向上が期待できます。
【関連記事】
Claude（クロード）とは？特徴・料金・使い方とChatGPTとの違いを徹底解説
Figma MCPサーバーとは
Figma MCPサーバーは、Figmaが公式に提供するMCP対応のサーバーであり、Claude Codeをはじめとする各種AIエージェントにFigmaの操作機能を提供する基盤です。MCP（Model Context Protocol）を介してAIクライアントとFigmaを接続し、デザイン情報の読み取りからキャンバスへの書き込みまで、多彩なツール群を利用可能にします。
Figma MCPサーバーにはリモート版とデスクトップ版の2種類があり、それぞれ接続方式や利用できる機能が異なります。2026年6月現在、Figmaはリモート版を推奨しており、Claude Codeとの連携においてもリモート版が標準的な選択肢です。
リモート版
リモート版Figma MCPサーバーは、Figma側がホストするクラウドベースのサーバーです。接続にはOAuth認証を使用し、Figmaアカウントでログインするだけで利用を開始できます。Dev Mode（開発モード）のサブスクリプションは不要で、Starterプラン（無料）でもリモートサーバーへの接続自体は可能です。
ただし、View・Collabシートではツール呼び出しが月6回までに制限されるため、実用的に利用するにはProfessional以上のプランでDev・Fullシートを取得することが推奨されます。
また、ファイルへの書き込みにはFullシートが必要であり、Devシートでは読み取り専用に制限される点にも注意が必要です。
リモート版ではgenerate_figma_designやuse_figma、search_design_system、create_new_fileなど、リモート専用のツールを含むフル機能が利用できます。FigmaのURLやリンクを指定して操作する方式のため、ファイルの場所を問わずアクセスできる柔軟性も強みです。
出典:Figma「Rate limits & access」
デスクトップ版
デスクトップ版は、Figmaデスクトップアプリを経由して動作するMCPサーバーです。
ローカル環境で動作するため、リモート版と比較してネットワーク遅延の影響を受けにくいというメリットがあります。Figmaデスクトップアプリ上で選択中の要素を直接操作できる「選択ベース」のワークフローに対応しており、特定のレイヤーやコンポーネントを指定した細かな操作に適しています。
一方で、generate_figma_designやuse_figmaなどリモート専用のツールは利用できないため、Code to CanvasやWrite to Canvasの機能を使う場合はリモート版との併用が推奨されます。
主な機能
Figma MCPサーバーが提供する主なツールは以下のとおりです。
| ツール名 | 機能概要 | 対応版 |
|---|---|---|
| get_design_context | Figmaの指定レイヤーからデザイン情報（レイアウト・スタイル・構造）を取得し、React + Tailwind形式などでコードを生成する | リモート・デスクトップ |
| generate_figma_design | ローカルサーバーで動作するWebアプリのUIをキャプチャし、Figmaの編集可能なフレームとして取り込む | リモートのみ |
| use_figma | Figmaキャンバスに直接書き込み、フレームやコンポーネント、変数、Auto Layoutを作成・編集する | リモートのみ |
| create_new_file | 新規のFigma DesignファイルまたはFigJamファイルをドラフトフォルダに作成する | リモートのみ |
| get_metadata | 選択範囲のレイヤー構造（ID・名前・種類・位置・サイズ）をスパースXMLとして取得する | リモート・デスクトップ |
| get_screenshot | 指定した選択範囲のスクリーンショットを取得する | リモート・デスクトップ |
| get_variable_defs | 選択範囲で使用されている変数やスタイル（色・間隔・タイポグラフィ）を取得する | リモート・デスクトップ |
| search_design_system | 接続されたデザインライブラリからコンポーネントや変数、スタイルを検索する | リモートのみ |
| create_design_system_rules | プロジェクト固有のデザインシステムルールを自動生成する | リモート・デスクトップ |
これらのツールを組み合わせることで、Figmaのデザイン情報の読み取りからコード生成、キャンバスへの書き込みまでを一貫してAIエージェント経由で実行できます。
セットアップ手順
Claude Code to Figmaのセットアップ方法は、プラグインによる一括セットアップと手動セットアップの2パターンが用意されています。前提条件として、Claude Codeがインストール済みであること、Figmaアカウントを保有していることが必要です。
プラグインで一括セットアップ（推奨）
2026年4月時点で最も推奨されるセットアップ方法は、Figma公式プラグインを使った一括セットアップです。
ターミナルで以下のコマンドを実行するだけで、MCPサーバーの設定に加え、一般的なワークフロー用のSkills（スキル）やアセット取り扱いのRulesも自動的にインストールされます。
claude plugin install figma@claude-plugins-officialこのコマンドを実行すると、Figma MCPサーバーへの接続設定が自動的にClaude Codeに追加されます。プラグインにはFigma連携のベストプラクティスが組み込まれているため、手動設定と比較して初期の品質が安定しやすい利点があります。
インストール完了後は、Claude Codeを再起動してください。MCPの接続は起動時にのみ行われるため、再起動しないと接続が反映されません。
リモートMCPサーバーに接続する
プラグインを使わずに手動でリモートMCPサーバーに接続する場合は、以下のコマンドを実行します。
claude mcp add --transport http figma https://mcp.figma.com/mcpコマンド実行後、Claude Codeを再起動すると、初回のツール呼び出し時にブラウザが開きOAuth認証画面が表示されます。Figmaアカウントでログインし、アクセスを許可すれば接続が完了します。認証はOAuthのみに対応しており、PAT（パーソナルアクセストークン）は使用できません。
MCPサーバーの登録状況を確認するには、以下のコマンドを使用します。
claude mcp list接続を確認する
セットアップ完了後は、Claude Code上で /mcp コマンドを実行し、Figma MCPサーバーの接続状態を確認しましょう。
サーバーが正常に接続されている場合、ステータスが緑色で表示され、利用可能なツール一覧にgenerate_figma_designやget_design_contextなどが表示されます。「Needs authentication」と表示される場合は、Claude Codeを再起動してから再度認証を行ってください。
接続がうまくいかない場合のトラブルシューティングとして、以下の点を確認することをおすすめします。
- Claude Codeを再起動したか（MCPの接続は起動時にのみ実行される）
- VPNが接続を妨げていないか
- Figmaアカウントの権限（Fullシート・Devシート）が適切か
- 操作対象のFigmaファイルが有料プランのチーム内に配置されているか
Claudeの利用制限やプラン別の違いについては、「Claudeの制限を徹底解説！5時間・週間制限の仕組みからプラン別比較・回避策まで」の記事もあわせてご覧ください。
使える機能
Claude Code to FigmaおよびFigma MCPサーバーで利用できる主要機能は、Code to Canvas・Figma to Code・Write to Canvasの3つに整理できます。それぞれ異なるツールを使用し、コードとデザインの間で情報を双方向にやり取りする仕組みです。
Code to Canvas（コードからFigmaへ）
Code to Canvasは、generate_figma_designツールを使ってローカルサーバーで動作するWebアプリのUIをFigmaに取り込む機能です。
Claude Codeでローカルサーバーを起動した状態で「このUIをFigmaに送って」と指示すると、generate_figma_designがブラウザ上のUIをキャプチャし、Figmaの編集可能なフレームとして変換します。出力先は新規Figmaファイル、既存ファイル、またはクリップボードから選択できます。
生成されたフレームはテキスト編集やAuto Layoutの調整が可能なフラットなFigmaレイヤーとして構成されます。ただし、Figmaのコンポーネントや変数との接続はないため、デザインシステムとの統合が必要な場合はuse_figmaツールと併用しましょう。
なお、canvasタグの描画やWebGL、複雑なCSSアニメーションなどは変換に対応していない点に注意してください。
Figmaからコードを生成
get_design_contextツールを使うと、Figmaのデザイン情報を読み取り、プロジェクトの技術スタックに合わせたコードを生成できます。
FigmaファイルのURLまたは特定のレイヤーへのリンクをClaude Codeに渡し、「このデザインをReactで実装して」と指示すると、get_design_contextがレイアウト・スタイル・構造情報を取得します。デフォルトの出力形式はReact + Tailwind CSSですが、プロンプトでNext.jsやFlutter、Vue.jsなど他の技術スタックを指定することも可能です。
デザインの忠実度を高めるためには、まずget_metadataでレイヤー構造の全体像を把握し、次にget_screenshotで視覚的なレイアウトを確認したうえで、get_design_contextで詳細なデザイン情報を取得するという段階的なアプローチが効果的です。
Write to Canvas（Figmaに直接書き込む）
Write to Canvasは、2026年3月にFigmaが発表した機能で、use_figmaツールを使ってFigmaキャンバスにネイティブなデザイン要素を直接書き込むことができます。
generate_figma_designがブラウザ画面のキャプチャをベースにフラットなレイヤーを生成するのに対し、use_figmaはFigmaのPlugin APIを介してJavaScriptを実行し、フレームやコンポーネント、バリアント、変数、Auto Layoutといったネイティブな構造を直接作成・編集可能です。
既存のデザインシステムに定義されたコンポーネントや変数を活用できるため、デザインチームが維持してきた基準をAI生成のデザインにも適用できる点が大きな強みです。
2026年6月現在、Write to Canvas機能はベータ期間中であり、無料で利用できます。ただし、画像やカスタムフォントのサポートは未実装であり、1回あたりの出力レスポンスは20KBまでという制約がある点に注意が必要です。将来的には使用量ベースの課金が導入される予定です。
出典:Figma Japan株式会社「Figma、AIエージェントによるFigmaキャンバスへの直接書き込み機能を提供開始」
Claude Code to Figmaの実際の操作手順例
Claude Code to Figmaの実際の操作手順を、UIの構築からFigmaへの送信、Figma上での編集までステップバイステップで解説します。
Claude Codeで簡単なUIを構築する
まず、Claude Codeを起動し、シンプルなWebアプリのUIを構築します。
プロジェクトディレクトリに移動した状態で、以下のようなプロンプトを入力します。
「Reactでシンプルなタスク管理アプリのUIを作成してください。ヘッダー、タスク入力フォーム、タスクリストの3つのセクションで構成し、Tailwind CSSでスタイリングしてください。」
Claude Codeがファイルを生成し、ローカルサーバーが起動したら、ブラウザでUIの表示を確認します。レイアウトや配色に問題がなければ、次のステップでFigmaへの送信に進みましょう。プロンプトの段階でデザインの方向性を具体的に指示しておくと、Figmaに取り込んだあとの修正工数を削減可能です。
Figmaに送信してキャンバスに反映する
ローカルサーバーでUIが動作している状態で、Claude Codeに以下のように指示します。
「このUIをFigmaに送ってください」
Claude Codeがgenerate_figma_designツールを呼び出し、ブラウザ上のUIをキャプチャしてFigmaへの変換処理を開始します。処理が完了すると、キャプチャIDとFigmaファイルのURLが発行されます。発行されたURLをブラウザで開くと、Figmaのキャンバス上にUIが編集可能なフレームとして反映されていることを確認できます。
送信先は新規ファイルのほか、既存のFigmaファイルを指定することも可能です。既存ファイルに送信する場合は、FigmaファイルのURLをプロンプトに含めてください。
Figma上で編集してみる
Figmaに取り込まれたフレームは、通常のFigmaデザインと同様に編集できます。
レイヤーパネルを確認すると、ヘッダーやフォーム、リストといった各セクションが個別のフレームとして構造化されていることがわかります。テキストの編集、配色の変更、Auto Layoutの調整、要素の追加・削除など、Figmaの標準機能をすべて利用可能です。
編集が完了したら、Figmaの共有機能を使ってデザイナーやプロダクトマネージャーにレビューを依頼できます。フィードバックを受けて修正したデザインは、get_design_contextツールでClaude Codeに読み込ませ、コードに反映するというラウンドトリップの流れにつなげられます。
Code Connectの活用
Code Connectは、Figma上のデザインコンポーネントとコードベースのコンポーネントを直接紐付けるためのツールです。デザインシステムの一貫性を維持しながら、デザイナーとエンジニアの間で「正しいコード」を共有する仕組みを提供します。
Code Connectを導入すると、Figmaの開発モード（Dev Mode）に表示されるコードスニペットを、自動生成されたCSSではなく実際のデザインシステムのコードに置き換えられます。たとえば、Figma上のButtonコンポーネントをクリックした際に、デザインシステムチームが承認済みのReactコンポーネントのコードサンプルが表示される形です。
Claude Code to Figmaとの組み合わせでは、Figma MCPサーバーのadd_code_connect_mapツールやget_code_connect_mapツールを使って、FigmaのノードIDとコードベース上のコンポーネントのマッピングを登録・取得できます。このマッピングが設定されていると、get_design_contextでコードを生成する際に、自動生成のコードではなくデザインシステムの実コンポーネントを参照した高品質なコードが出力されます。
デザインシステムを運用しているチームにとって、Code Connectはデザインとコードの一貫性を維持するための重要な基盤です。
Claude Code to Figmaの活用シーン
Claude Code to Figmaは、エンジニア主導のプロトタイピングからデザインシステムの管理、マーケティングページの高速実装まで、デザインとコードの連携が求められるあらゆる場面で効果を発揮します。
エンジニア主導のプロトタイピング
Claude Code to Figmaが最も威力を発揮するシーンの一つが、エンジニア主導のプロトタイピングです。
新機能のアイデアを検証する際、従来はデザイナーにモックアップの作成を依頼し、完成を待ってからフィードバックを行う流れが一般的でした。Claude Codeを使えば、エンジニア自身がプロンプトでUIのプロトタイプを数分で構築し、generate_figma_designでFigmaに送信できます。
デザイナーはFigma上で編集可能なフレームを受け取れるため、ゼロからデザインを起こす必要がなく、エンジニアの意図を踏まえたうえでブラッシュアップに集中できるでしょう。
プロダクトマネージャーへの提案資料としても、実際に動作するUIとFigma上の編集可能なデザインの両方を提示できるため、意思決定のスピードが大幅に向上します。
デザインシステムの一貫性維持
use_figmaツールとCode Connectを組み合わせることで、コードベースからFigmaのデザインシステムを自動的に生成・同期する活用法も注目されています。
たとえば、コードベースで定義されたカラートークンやスペーシングの値をuse_figmaツールでFigmaの変数（Variables）として登録したり、コンポーネントのバリアントを自動生成したりできます。デザインシステムの更新がコード側で行われた場合でも、Claude Codeを介してFigma側のデザインシステムに反映できるため、デザインとコードの間で定義が乖離するリスクを低減できるでしょう。
search_design_systemツールを活用すれば、既存のデザインライブラリからコンポーネントや変数を検索し、新規のデザイン生成時に再利用することも可能です。
LP・マーケティングページの高速実装
LP（ランディングページ）やマーケティングページの制作においても、Claude Code to Figmaは大きな効率化をもたらします。
マーケティング担当者から要件を受け取ったエンジニアが、Claude Codeでページの骨格を高速に構築し、Figmaに送信します。デザイナーがFigma上でブランドガイドラインに沿った微調整を行い、最終的なデザインをget_design_contextでコードに反映するという流れです。
キャンペーンの立ち上げなどスピードが求められる場面では、デザインとコードの往復を最小限に抑えられるこのワークフローが特に有効です。複数パターンのLPをテストする際にも、Claude Codeでバリエーションを素早く生成し、それぞれをFigmaで確認・調整できるため、A/Bテストの準備工数を削減できます。
AI活用の仕組みづくりなら「JAPAN AI AGENT」
企業のAI活用を推進するうえで、ツール連携やワークフローの自動化は欠かせない要素です。JAPAN AI AGENTは、MCP（Model Context Protocol）に対応したノーコードAIエージェント構築プラットフォームとして、外部ツールとの連携やデータ検索の自動化を実現します。上場企業水準のセキュリティ基盤のもと、業務に特化したAIエージェントを自然言語だけで構築でき、組織全体の生産性向上を支援します。
日本企業のための
最も実用的なAIエージェントへ！
AIが企業の様々な職種の
方々が
普段行っている
タスクを自律的に実行
JAPAN AI AGENT
実用性の高いAIエージェンを提供
無料の伴走サポート
高いカスタマイズ性
目標設定をだけで自律的にAIが各タスクを実行
Claude Code to Figmaの注意点・現時点での制約
Claude Code to Figmaは急速に進化している機能ですが、2026年6月現在、いくつかの制約事項を理解した上で活用することが重要です。
まず、レート制限について把握しておく必要があります。読み取り系のツール（get_design_contextやget_screenshotなど）には、Figmaのプランとシート種別に応じたレート制限が設定されています。OrganizationおよびEnterpriseプランでは1日600コール、StarterおよびProfessionalプランでは1日200コールが上限です（いずれもDev・Fullシートの場合）。
一方で、generate_figma_designなどFigmaファイルへの書き込みを行うツールはレート制限の対象外です。また、Write to Canvas（use_figma）機能はベータ期間中のため無料で利用できますが、将来的には使用量ベースの課金が導入される予定です。
generate_figma_designで生成されるフレームはフラットなFigmaレイヤーであり、Figmaのコンポーネントや変数との接続は持ちません。デザインシステムとの統合が必要な場合はuse_figmaツールを使用する必要があります。また、canvasタグの描画やWebGL、複雑なCSSアニメーションは変換に対応していません。
use_figmaについても、画像やカスタムフォントのサポートが未実装であること、1回あたりの出力レスポンスが20KBまでに制限されていることなど、ベータ版ならではの制約があります。また、FigmaのPlugin APIではRGBの色の値域が0〜1（一般的な0〜255ではない）である点にも留意が必要です。大きな操作は1回で完結させず、複数回に分割して段階的に進めることが推奨されます。
出典:Figma「Rate limits & access」
Claude Code to Figmaの効果的な活用方法
Claude Code to Figmaをより効果的に活用するためには、事前の設定とツールの使い分けが鍵を握ります。
CLAUDE.mdにFigma関連のルールを書いておく
CLAUDE.mdは、Claude Codeがセッション開始時に自動的に読み込む設定ファイルです。ここにFigma連携のルールを記述しておくことで、毎回のプロンプトで同じ指示を繰り返す手間を省けます。
記述すべき内容の例として、Auto Layoutの設定ルール（パディングやギャップの値、整列方向の方針）、使用するデザイントークンの命名規則、出力形式の指定（React + Tailwind CSS、Vue + SCSSなど）が挙げられます。
さらに、Figma MCPサーバーにはcreate_design_system_rulesというツールも用意されており、プロジェクト固有のルールを自動生成できます。このツールで生成したルールをCLAUDE.mdに追記しておけば、デザインシステムの方針に沿った一貫性のある出力が得られやすくなります。
決まった手順の操作はClaude CodeのSkill（スキル）として定義しておくことも効果的です。
use_figmaとgenerate_figma_designの使い分け
use_figmaとgenerate_figma_designは、どちらもコードからFigmaへの出力に使えるツールですが、用途と出力特性が明確に異なります。
generate_figma_designは、ローカルサーバーで動作するWebアプリのUIをブラウザキャプチャベースでFigmaに取り込むツールです。初めてUIをFigmaに送る場合や、実装済みの画面をデザインレビュー用に共有したい場合に適しています。出力はフラットなレイヤー構造のため、素早くデザインの全体像を共有する用途に向いています。
一方、use_figmaはFigmaのPlugin APIを介してネイティブな構造を直接生成するツールです。既存のデザインシステムのコンポーネントや変数を活用した精密なデザイン生成、既にFigmaにあるデザインの更新・編集に適しています。デザインシステムとの統合が求められる場面ではuse_figmaが第一選択です。
実務では、まずgenerate_figma_designでUIの全体像をFigmaに送り、その後use_figmaでデザインシステムに沿った調整を加えるという段階的なアプローチが有効です。
Claude Designとの違い
2026年4月17日、AnthropicはClaude Designをリサーチプレビューとして公開しました。「claude figma」で検索するユーザーにとって、Claude DesignとClaude Code to Figmaの違いを正確に理解しておくことは重要です。
Claude Designは、テキストプロンプトからインタラクティブなプロトタイプやスライド、LPを生成できる対話型AIデザインツールです。デザインの専門知識がなくても、自然言語の指示だけでプロフェッショナルなビジュアル成果物を作成できる点が特徴で、Claudeの有料プラン（Pro・Max・Team・Enterprise）に追加料金なしで含まれています。
一方、Claude Code to Figmaはターミナルベースの開発ツール「Claude Code」とFigmaをMCPで接続する仕組みであり、コードベースの開発者がUIをFigmaに送信したり、Figmaのデザイン情報からコードを生成したりする用途に特化しています。
| 比較項目 | Claude Design | Claude Code to Figma |
|---|---|---|
| 主な用途 | プロトタイプ・スライド・LPの生成 | コードとFigmaデザインの双方向連携 |
| 操作方法 | チャット形式のプロンプト + スライダー調整 | ターミナル上のClaude Codeからコマンド実行 |
| 想定ユーザー | PM・マーケター・デザイナー | フロントエンドエンジニア・開発者 |
| Figmaとの関係 | 独立したツール（Figmaとは別環境） | Figma MCPサーバーを介してFigmaと直接連携 |
| 出力形式 | インタラクティブHTML・PPTX・PDF | Figmaの編集可能なフレーム・コード |
| デザインシステム連携 | アセットからの自動抽出 | Figmaのコンポーネント・変数を直接操作 |
なお、FigmaもAnthropic社のClaudeを搭載した独自のAIデザイン機能「Figma Make」を提供しています。Figma MakeはFigmaのキャンバス上で直接AIがデザインを生成する機能であり、Figmaのデザインシステムやコンポーネントとネイティブに統合されている点がClaude Designとの違いです。
コードベースの開発フローを中心に据える場合はClaude Code to Figma、ビジュアル制作やプレゼン資料の高速生成にはClaude Design、Figmaのキャンバス上でAIデザインを活用したい場合はFigma Makeと、目的に応じて使い分けることが推奨されます。
Claude Code to Figmaに関してよくある質問
Claude Code to Figmaは無料プランで使えますか？
Claude Code to Figmaを利用するには、Claude Codeへのアクセスが必要です。Claude Code自体がAnthropicの有料プラン（Pro・Max・Team）またはAPI経由での利用を前提としているため、Claudeの無料プランでは使用できません。一方、Figma側ではDev Modeのサブスクリプションは不要ですが、ファイルへの書き込みにはFullシートが必要です。
Figma MCPサーバーの対応技術スタックは？
get_design_contextツールのデフォルト出力はReact + Tailwind CSSですが、プロンプトで技術スタックを指定することで、Next.jsやFlutter、Vue.js、Svelte、HTML + CSSなど主要なフレームワークに対応したコード生成が可能です。プロジェクトのCLAUDE.mdに技術スタックを記述しておくと、毎回の指定を省略できます。
Claude Code to FigmaとClaude Designはどちらを使うべきですか？
コードベースの開発フローでUIをFigmaに送信・取得したい場合はClaude Code to Figmaが適しています。一方、プロトタイプやスライド、LPをプロンプトから素早く生成したい場合はClaude Designが適しています。開発者はClaude Code to Figma、ビジュアル制作が中心の場合はClaude Designという使い分けが基本です。
デザイナーとエンジニアの協業はどう変わるのか
Claude Code to Figmaの登場は、デザイナーとエンジニアの協業のあり方に本質的な変化をもたらしつつあります。
従来、デザインとコードは明確に分離された工程として扱われ、両者の間には「翻訳コスト」と呼ばれる情報伝達の非効率が常に存在していました。Claude Code to Figmaが実現するラウンドトリップ型のワークフローは、この境界を溶かし、デザイナーとエンジニアが同じコンテキストの中で協業できる環境を整えます。
2026年に入り、Code to Canvas、Write to Canvas、Claude Design、Figma Makeと、AIとデザインの接点は急速に多様化しています。これらのツールは競合関係ではなく、それぞれ異なる課題を解決する補完関係にあります。重要なのは、個々のツールの機能を追いかけることではなく、自チームのワークフローにおけるデザインとコードの接点を見極め、最適なツールを組み合わせることです。
Claude Code to Figmaのセットアップは数分で完了します。まずはプラグインによる一括セットアップを試し、小さなプロジェクトで実際にコードからFigmaへの送信を体験してみてください。デザインとコードの双方向連携がもたらす生産性の変化を、ぜひ実感していただければ幸いです。
Claudeの最新モデルやプラン選びについては、「Claude 4とは？特徴・料金・使い方からOpus・Sonnetの違いまで徹底解説」の記事もあわせてご覧ください。
