Figma MCP × Claude Code で Figma のモックを Next.js コンポーネントに起こす最短手順

Figma で組んだモックを Next.js コンポーネントに落とすのが、毎回しんどかった。

Auto Layout を読み解いて、Tailwind のクラスに変換して、命名を揃えて—— 30分かけても「色がちょっと違う」「padding が 16 じゃなくて 14」みたいなズレが残る。

Figma MCP を Claude Code に繋いだら、これが一気に短くなった。 1コンポーネントあたり手作業30分→Claude Code 経由で12分。実測でだいたい60%削減。

今回はセットアップから「実際にコンポーネントが出るまで」を、詰まったところも含めて全部書く。

Figma MCP って何ができるのか

Figma の Dev Mode MCP Server は、Figma 公式が出している MCP サーバー。 Claude Code から Figma のフレーム情報（コンポーネント構造・スタイル・トークン）を直接読める。

できることは大きく3つ。

フレームの構造とスタイルを JSON で取得
デザイントークン（色・タイポ・スペーシング）を抽出
選択中のレイヤーをコードに変換するヒントを生成

要は「Figma を Claude の目で見える状態にする」ツール。スクショを Claude に投げて読ませる方法もあるけど、構造情報が落ちるので精度がだいぶ違う。

セットアップ：Figma 側の準備

まず Figma Desktop アプリの最新版を入れる（Web 版ではダメ）。 Dev Mode が有効なプラン（Professional 以上）が必要。

Figma を開いて、メニューから Preferences → Enable Dev Mode MCP Server をオンにする。

これでローカルに http://127.0.0.1:3845/sse のエンドポイントが立つ。ポートが衝突してたら他のアプリを止めるしかない（僕は Stable Diffusion の WebUI と被って気付くまで20分溶かした）。

Claude Code 側の設定

~/.claude/settings.json の mcpServers に追加する。

{
  "mcpServers": {
    "figma": {
      "type": "sse",
      "url": "http://127.0.0.1:3845/sse"
    }
  }
}

設定したら Claude Code を再起動して、/mcp コマンドで figma が connected になってればOK。

ここで failed になるなら原因はだいたい3つ。

Figma Desktop が起動していない
Dev Mode MCP がオンになっていない
ポート 3845 が他のプロセスに取られている

僕は最初の試行で Web 版 Figma を見ながら「動かないな」と1時間溶かした。 Web 版だと MCP サーバーが立たないので、必ず Desktop を起動しておく。

実際にコンポーネントを起こす流れ

Figma で対象のフレームを選択した状態で、Claude Code にこう投げる。

今 Figma で選択しているカードコンポーネントを、
Next.js + Tailwind v4 で実装してほしい。
- shadcn/ui の Card コンポーネントをベースにする
- 色は globals.css の CSS 変数を使う
- ファイルは src/components/feature-card.tsx に置く

Claude Code が Figma MCP を叩いて、選択中のレイヤー情報を取りに行く。そこから構造を読んで、Tailwind のクラスに変換しながらファイルを書いていく。

僕の手元で計測した結果はこんな感じ。

項目	手作業	Claude + Figma MCP
所要時間	約30分	約12分
トークン消費	-	約$0.31（Sonnet 4.6）
修正回数	2〜3回	1回（色の微調整のみ）

時間の内訳は、生成自体が3分、レビューと色のズレ修正に9分くらい。「全自動」ではないけど、退屈な変換作業がごっそり消える。

詰まったポイント

1. Auto Layout が複雑だと構造が崩れる

ネストが3階層以上ある Auto Layout だと、Claude が flex の方向を取り違えることが何度かあった。対策は「Figma 側でグループを整理してから渡す」。コンポーネント単位で分割しておくと精度がぐっと上がる。

2. デザイントークンは事前に共有しておく

Figma の変数名（例：color/brand/primary）と、コード側の CSS 変数名（例：--color-primary）が一致していないと、Claude が毎回 hex を直書きしてくる。

AGENTS.md に対応表を書いておくと一発で解決した。

## デザイントークンの対応
 
| Figma変数 | CSS変数 |
|---|---|
| color/brand/primary | --color-primary |
| spacing/2 | --space-2 |
| text/heading/lg | text-2xl font-bold |

3. 画像アセットは別途エクスポートが必要

MCP 経由で取れるのは構造情報だけで、画像そのものは取れない。画像を含むコンポーネントは、Figma から手動で書き出して public/ に置く必要がある。ここは手作業が残る部分。

どこまで任せて、どこから自分でやるか

1ヶ月使った感覚だと、こういう棲み分けに落ち着いた。

Claude に任せる：構造の変換、Tailwind クラスへの落とし込み、ファイル配置
自分でやる：デザイントークンの設計、画像アセットの書き出し、最終的な見た目チェック

「全部自動でコンポーネント化される未来」はまだ来ていないけど、「変換のしんどい部分が消える」だけで体感は別物になる。

特に個人開発だとデザイナーとエンジニア両方をやるので、往復のコストが減るのが一番効いた。

まとめ

Figma MCP × Claude Code は、デザイン→実装の橋渡しがだいぶ楽になる組み合わせ。

セットアップで詰まりやすいポイントは「Figma Desktop を使う」「ポート衝突を確認する」の2点だけ。あとは AGENTS.md にトークン対応表を書いておけば、初日からそれなりに動く。

次は同じ流れで、Figma のデザインシステム（和紙×墨×朱）を丸ごとコードに落とす実験をやる予定。うまくいったらまた書く。