【Claude Code to Figma】generate_figma_designでできること

はじめに

みなさんは、Figma MCP の generate_figma_design というツール使ったことがありますか？

generate_figma_designは、この記事で紹介された 新しいFigma MCPのツールです。
generate_figma_design では、開発環境でレンダリングされた要素をFigmaにデザインデータとして送ることができるツールです。

つまり「コードで作ったもの」を「Figmaに戻す」という、これまでとは逆方向のワークフローを実現するツールです。

そのため、この記事では、実際に、generate_figma_designを色々触ってみてわかったことなどをまとめようと思います！

Claude Code to Figma とは？

Claude Code to Figma とは、上記の動画のように、Claude Code で Figma MCP の generate_figma_design ツール を使って、FigmaファイルにコードベースのUIを作成するようになります。

そのため。従来のデザイン→開発という一方通行のフローに対して、Claude Code to Figma を使うことで、開発→デザインという逆方向も可能にします。

使い方

generate_figma_design の基本的な流れは次のとおりです。

1. Claude Code にプロンプトを投げる
   • このページをFigmaに送って と指示するだけ
2. 出力先を選択する
   • newFile（新規ファイル作成）
     • 新しいFimgaファイルを作成して、作成したファイルにデザインを送る
   • existingFile（既存ファイルに追加）
     • 指定された既存ファイルにデザインを送る
   • clipboard（クリップボードにコピー）
     • クリップボードにデザインを送る
3. capture.js がブラウザで実行され、captureId が発行される
   • Figma MCP の capture.js がページをシリアライズし、DOM・スタイル・アセットを収集する
   • この時点で captureId という一意のIDが発行されます
4. generate_figma_design が再度呼ばれる
   • Claude Code は captureId を使って Figma サーバーにデータをポストします
5. 選択したモードに合わせた場所にデザインが生成される

デザインプロセスは変わりうるのか？

一般的な開発プロセスを振り返ると、次のような流れが多いと思います。

1. 開発内容・仕様について議論する
2. デザインを作る
3. デザインをもとに開発する
4. リリース

その中でも、generate_figma_design がとくに効果を発揮するのは、「1. 議論するフェーズ」 だと感じました。

1. コラボレーションツールとしての Figma が進化する

Figma は、いままで、コラボレーションツールと使われていました。

従来は「議論内容に合わせて、デザイナーが Figma を操作しながらみんなで検討する」という形が多かったと思います。

generate_figma_design を使うと、非デザイナーも含めてその場でデザインデータを生成・変更できるようになるため、エンジニアがプロンプトを書いて即座に Figma に反映 ことができます。
そのため、議論がより活発・具体的に進みやすくなるはずです。

2.「デザインを作るフェーズ」での活用は限定的かも

一方で、「2. デザインを作るフェーズ」に generate_figma_design を使おうとするのは難しいかもしれません。

このツールは「一度開発したものを Figma に送る」という逆方向の流れです。
そうなると、「わざわざデザインデータを管理する必要性が薄い」と感じるケースもあるでしょう。
開発が先に進んでいるなら、Figma に戻す手間をかけるよりコードのまま管理したほうが合理的な場面もありそうです。

3. デザイナーがいない環境や0→1 のフェーズには刺さる

デザイナーがいないスタートアップや、0→1 でプロトタイプを作っている環境では効果的なツールになるかもしれません。

こういった現場では「デザインデータを管理したくても、ページごとに一から Figma で作らないといけない」という状況が起きがちです。
generate_figma_design を使えば、コードで動くものをそのまま Figma に書き出して、ざっくりとしたデザインアーカイブを作れたり、完璧なデザインデータでなくても、「形として残す」 だけで議論や共有がしやすくなるのはメリットかもしれません。

デザイナー向けセットアップ (mac)

ここからは、Claude Code to Figma を使いたいデザイナーに向けて、Claude Codeのセットアップから、Figmaにデータを送るまでのやり方を紹介します。

1. Node.js & npm をインストール

ターミナル アプリを開いて、以下のコマンドを順番に入力し、Node.js と npm をインストールします。

Node.jsの最新バージョンの確認は、以下のURLから確認してください
参考: https://nodejs.org/ja/download

1.nvmをダウンロードしてインストールする

bash

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.3/install.sh | bash

2.シェルを再起動する代わりに実行する

bash

\. "$HOME/.nvm/nvm.sh"

3.Node.jsをダウンロードしてインストールする

bash

nvm install 24

4.Node.jsのバージョンを確認する

bash

node -v # "v24.13.1"が表示される。

1. npmのバージョンを確認する

bash

npm -v # "11.8.0"が表示される。

2. Claude Code のインストール

ターミナル アプリを開いて、以下のコマンドを入力し、Claude Code をインストールします。

bash

npm install -g @anthropic-ai/claude-code

3. Claude Code を起動し、ログインする

ターミナル アプリを開いて、以下のコマンドを入力し、Claude Code を起動します。

bash

claude

その後、以下のコマンドをプロンプトに入力し、
指示に従って、アカウントを作成・ログインをしてください。

プロンプト

/login

ref: https://code.claude.com/docs/ja/quickstart

開発環境の準備

コードを書けなくても大丈夫です。
以下のプロンプトを Claude Code に投げると、シンプルな HTML/CSS のページを作ってくれます。

portfolio-sampleディレクトリーを作成し、シンプルなポートフォリオページを作ってください。

- ヘッダー（名前・ナビゲーション）
- ヒーローセクション（キャッチコピー・CTA ボタン）
- 実績カードが並ぶセクション（3列グリッド）
- フッター

スタイルはモダンなデザインで、React + vite + Tailwind CSS を使ってください。
ローカルで `npm run dev` で確認できる状態にしてください。

Figma MCP をインストールする

ターミナルアプリを開いて、以下のコマンドを入力し、portfolio-sample ディレクトリーに移動し、Figma MCPをインストールします。

bash

cd portfolio-sample
claude mcp add --transport http figma https://mcp.figma.com/mcp

その後、claude Code を起動し、以下のプロンプトを入力することで、Figma MCPがインストールされているか確認します。

/mcp

以下の画像のように、 figma · ✔ connected と表示されていれば、成功です。

開発したUIをFigmaに送る

そして、以下のプロンプトを投げることで、開発環境のデザインをFigmaに送ることができます。

mainページのデザインをFigmaに送ってください。

その後、Claude Code to Figma とは？ - 使い方 のとおりにすすめると、Figmaにデザインを送ることができます。

まとめ

generate_figma_design は、「コードで作ったものをデザインツールに持ち込む」という逆転の発想を実現するツールです。

• プロトタイプの素案作りに特に強みがある
• 「完全な変換」ではなく「たたき台生成」として使うのがベスト
• デザイナーでも Claude Code + Figma MCP のセットアップさえすれば試せる

デザインと開発の境界がさらに曖昧になっていく中で、このようなツールをうまく使いこなすことが、今後のデザインテクノロジストに求められるスキルの一つになるかもしれません。

ぜひ試してみてください！