Figma MCPでClaude Codeと連携：画面の取り込みから実装への反映まで

Claude CodeからFigmaに取り込めるものは？

Claude Code to Figmaがキャプチャするのは、ブラウザーで動作しているインターフェースです。本番環境、ステージング環境、自分のコンピューター上の開発サーバーであるlocalhostが対象になります。同じセッションで複数の画面を取り込み、キャンバスに並べて比較できます。各画面は編集可能なフレームになり、並べ替え、複製、調整、注釈の追加ができます。対応環境と複数画面のフローについては、Figmaの発表記事に説明があります。

動いているアプリを、編集用の作業台に広げるイメージです。ブラウザーでは操作に沿って体験が進みますが、Figmaでは各ステップを並べて、全体を見ながら検討できます。

MCPはModel Context Protocolの略で、Claude CodeからFigmaのツールを使うための接続の仕組みです。キャプチャ用ツールはgenerate_figma_designといい、レイヤーの出力先として、新しいFigma Designファイル、既存のDesignファイル、クリップボードを指定できます。キャプチャから新規作成したファイルはチームまたは組織のドラフトに保存され、クリップボードに出力した内容はキャンバスに貼り付けられます。出力先の詳細は、Figmaのツールリファレンスにあります。

Figma MCPとClaude Codeを接続するには？

このワークフローではリモートサーバーを使います。接続先はhttps://mcp.figma.com/mcpで、Figmaのデスクトップアプリがなくても動作します。Figmaが推奨するプラグイン経由の方法と、手動で設定する方法のどちらかを選んでください。リモートサーバーの設定方法を参照できます。

推奨：FigmaのClaude Codeプラグインをインストールする

Claude Codeをインストール済みの環境で、ターミナルから次のコマンドを実行します。

claude plugin install figma@claude-plugins-official

続いて、Figmaのドキュメントに沿って認可を行います。

1. Claude Codeを起動していた場合は再起動します。
2. /pluginと入力し、Installed（インストール済み）を開いてfigmaを選び、認可を開始します。
3. ブラウザーに移り、FigmaアカウントでAllow access（アクセスを許可）を選びます。
4. /pluginに戻り、InstalledでFigmaが接続済みになっていることを確認します。

プラグインにはMCPの設定とスキルが含まれています。スキルは、よく使うFigmaのワークフロー向けの、繰り返し利用できる指示です。組織の設定でインストールがブロックされる場合、FigmaはClaudeの管理者に相談するよう案内しています。FigmaのClaude Code設定ガイドを参照してください。

手動：複数のプロジェクトで使えるように設定する

複数のプロジェクトで共通して使う場合、Figmaは手動設定用として次のコマンドを案内しています。

claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp

Claude Codeで新しいセッションを開始し、/mcpと入力します。figma、Authenticate（認証）、Allow Access（アクセスを許可）の順に選び、/mcpで接続を確認します。

--scope userを付けると、複数のプロジェクトからこの接続を利用できます。Figmaはclaude mcp add --transport http figma https://mcp.figma.com/mcpというコマンドも案内していますが、こちらはデフォルトで現在のプロジェクトが対象です。手動設定とスコープの説明に詳細があります。

Figmaのプランやシートはどれが必要ですか？

接続、フレームの書き込み、デザインの読み取りでは、それぞれ条件が異なります。以下は2026年10月12日に確認した、Figmaの公開ルールです。

出典：MCPの利用条件、キャプチャの権限、読み取りの上限。

Starterのユーザーと、ViewまたはCollabシートのユーザーは、読み取りツールを月20回まで呼び出せます。ツールの呼び出しは個々のリクエストを指すため、画面の取り込みから実装への反映までを20回繰り返せるという意味ではありません。キャプチャ用のgenerate_figma_designは、標準のMCPレート制限の対象外です。読み取りの利用枠とキャプチャの適用除外を確認できます。

製品全体の評価や導入判断については、Figmaレビューをご覧ください。

実践例：オンボーディングの3画面を取り込み、実装へ戻す

すでに動作するアプリに、ようこそ、メンバーを招待、最初のプロジェクトという3つのオンボーディング画面があるとします。この例を使って、キャプチャ、デザインレビュー、実装までの流れをたどります。

一連の画面を同じファイルに取り込む

Claude Codeでプロジェクトを開き、アプリのURLと取り込み先を伝えます。たとえば、次のように指示します。

新規ファイルに取り込みたい場合は、その作成を依頼します。アプリが動いていなければ、ローカルサーバーの起動を依頼してください。このキャプチャの手順では、クライアントが必要なスクリプトを準備してブラウザーを開きます。そのウィンドウが開くと、最初のキャプチャが実行されます。Figmaのキャプチャ手順に説明があります。

「ようこそ」が取り込まれたことを確認してから、アプリの操作を進めます。「メンバーを招待」と「最初のプロジェクト」では、キャプチャツールバーのEntire screen（画面全体）を使います。一部分だけならSelect element（要素を選択）も利用できます。最後にOpen file（ファイルを開く）を選びます。ツールバーの使い方と完了手順を参照してください。

最初の取り込みではビューポートのサイズを統一し、どの状態をキャプチャしたかを記録しておくことをおすすめします。同じ画面でも、入力エラーが出ている状態と正しく入力された状態には、別々の名前を付けるとよいでしょう。

Figmaで画面遷移を見直す

取り込んだ元の画面を横一列に残し、その列を複製して変更案を作ります。フレームに分かりやすい名前を付け、各画面で何を変えるかを具体的に決めます。

これらの変更は、あくまでデザイン上の仮説です。特に、スキップの選択肢を描くだけで、裏側の権限や画面遷移のロジックが実装されるわけではありません。決定事項は承認したフレームの横に書き、実装の指示書にも含めます。

キャプチャしたレイヤーをデザインシステムの資産として扱う前に、内容を確認してください。Figmaによると、取り込まれるのは通常のレイヤーであり、ライブラリのコンポーネントやスタイルには自動で対応付けられません。一方、色や余白などの値を再利用する変数については、ファイル内や追加済みライブラリにある、互換性のある変数を紐付けられます。公開済みライブラリの追加には有料プランが必要です。キャプチャと変数の挙動で確認できます。

承認したフレームをClaude Codeに渡す

承認した各フレームを右クリックし、Copy link to selection（選択範囲へのリンクをコピー）を選びます。そのリンクを実装の依頼とともにClaude Codeに貼り付けます。これがFigmaの案内するリモート環境での手順です。フレームリンクの使い方を参照してください。

この例では、次のような指示書が役立ちます。

Figmaのget_design_contextツールが、エージェントにデザイン情報を渡します。プロンプトには、使用するフレームワークや既存コンポーネントのディレクトリを指定できます。リモートサーバーでは、フレームまたはレイヤーのリンクを渡してください。キャンバス上で選択するだけでは、リモート側にコンテキストは渡りません。デザインからコードへの変換に使うツールに説明があります。

最後に、更新したアプリを起動し、同じ操作の流れをたどります。レイアウトと文言を比較し、スキップの動作、入力検証、キーボード操作を確認してください。再度のデザインレビューが役立つ場合は、変更後の画面をキャプチャします。この検証はチームの責任です。Figmaがコンテキストを提供し、コーディングエージェントが実装を生成します。MCPとエージェントの役割分担を確認できます。

このワークフローが役立ちそうな5つの場面

まずは、すでにあるUIについて複数人で判断する場面から試すとよいでしょう。以下は活用案を、やり直しの削減に直結しやすい順に並べたものです。

再利用できるデザイン指示を整えたいチームには、Figma Makeのカスタムスキル向けデザインシステムパックも参考になります。こちらは別のFigma Makeワークフローを扱った記事です。

費用対効果は「画面の作り直し」にかかる工数で測る

見るべき費用は、デザインレビューの準備と実装のやり直しです。現在、実装済みの画面を作り直してからレビューしているなら、その工数をキャプチャと取り込み後の調整にかかる工数と比べてください。

レビュー1回あたりの正味の価値 =（従来の準備・やり直し時間 − 新しい手順でのキャプチャ・調整・やり直し時間）× 社内の時間単価 − 追加のツール費用。

実際に記録した時間を使い、このワークフローによって増える実装レビューも含めて計算します。すでにClaude Codeと必要なFigmaシートを利用しているチームでは、既存のサブスクリプション費用は比較する両方の側に入ります。結果を変えるのは追加の支出だけです。Figmaでは、シートによる利用範囲とファイルの権限は別に扱われ、Professionalプランのサブスクリプション費用はシート数と請求期間によって変わります。Figmaの請求に関する説明を参照できます。

私なら、変更の承認までに必要なデザインとエンジニアリングの合計工数が減るかどうかで、継続利用を判断します。取り込みが速くなっても、その後に大量の調整が残るなら、効果は限定的です。

この連携を軸に作れそうな2つのサービス

狙い目は、標準の連携機能の周りに、レビューの手順をまとめたサービスを作ることです。以下はプロダクトの仮説です。ここで使うDataForSEOの数値は、2026年10月12日に確認した米国・英語の推定月間検索数で、有料顧客の数ではありません。

最も有望：オンボーディングのレビューキット

動いているオンボーディングを、整理されたレビューと実装指示書に繰り返し落とし込める仕組みなら、プロダクトチームや小規模な制作会社が対価を払う可能性があります。関連する需要の手がかりとして、「claude code to figma」は月間590件、「website to figma」は260件検索されています。両者の検索ユーザーは重複している可能性があります。

最小構成なら、プロジェクトに合わせたキャプチャ用チェックリスト、Figmaレビューのテンプレート、フレームの命名規則、承認済みフレームのリンクと動作に関する決定事項を組み合わせる再利用可能なプロンプトで始められます。まずは伴走型のサービスとして提供し、チームがどこで支援を必要とするかを観察するとよいでしょう。

これが最も有望なのは、成果物に顧客自身のフローについての意思決定が含まれるからです。ただし、キャプチャ機能はすでにFigmaが提供しています。取り込み機能を薄く包むだけでは、付加価値はほとんどありません。レビューキットに対価を払う意思があるかは、引き続き検証が必要です。

実装指示書のチェッカー

Figmaの変更を繰り返しClaude Codeに渡すチームには、実装前にフレームリンクの欠落、曖昧な遷移先、コンポーネントに関する指示の不足を指摘する小さなチェッカーが役立つかもしれません。「figma to code」の推定月間検索数は720件です。これは背景にある作業の需要を広く示すもので、このチェッカーへの需要が実証されたわけではありません。

最小構成では、承認済みリンク、コンポーネントのパス、受け入れ条件を含む構造化された指示書を調べ、未解決の質問を一覧にできます。難しいのは、内容そのものの判断です。スキップのルールが書かれていないことは指摘できても、ユーザーにスキップを認めるべきかまでは決められません。その判断はプロダクトオーナーに残ります。

画面とコードを行き来しても解決しないこと

この連携は、キャプチャ、編集、実装を意図的に進めるサイクルとして扱ってください。FigmaはMCPを、構造化されたデザイン情報の提供元であり、コードを書くための出発点だと説明しています。エージェントには引き続き、プロジェクトの規約と明確な指示が必要です。完成したコードが保証されるわけでも、実装上の問題が自動修復されるわけでもありません。Figmaによる役割の境界の説明に詳しく書かれています。

キャプチャの品質にもばらつきがあります。Figmaが問題の起きやすい例として挙げているのは、負荷の高いJavaScriptアニメーション、canvasによる描画、長いリストの一部だけをその都度描画する仮想化リストです。ページ全体をうまく取り込めないときは、特定の要素をキャプチャしてみてください。CSS変数名が判読しにくい形に変換されていると、変数を対応付けられない場合もあります。開発サーバーからキャプチャすれば、読みやすい名前を保持できる可能性があります。既知のキャプチャの制約を確認できます。

私なら、デザイン上の判断を伴わない小さな文言修正には、この往復の手順を使いません。フロー全体を比較することで、チームが何を作るかが変わりそうなときに使います。Figmaの共有キャンバス自体が合わない場合は、Figmaの代替ツール比較で、より広い選択肢を紹介しています。

週明けに試すなら、3画面のオンボーディングフローを選んでキャプチャし、改善を1つ合意して、アプリに反映してみてください。この一巡を終えてから、プロダクトのほかの部分へ広げましょう。

チームのプロダクトに合わせてこのレビュー手順を整えたい場合は、自動化をお手伝いできます。