Figma MCP × Claude Code で Figma to Code を実現する
はじめに
「Figmaのデザインをそのままコードに変換したい」という需要は昔からありましたが、2025年に登場した Figma MCP（Model Context Protocol）サーバー と Claude Code の組み合わせにより、AIエージェントがFigmaデザインを直接読み取ってコードを生成できるようになりました。
本記事では、セットアップ方法から実際のコード生成フロー、生成されたコードの構造まで一通り解説します。
今回はUdemy Figmaを勉強させていただいたShunsuke SawadaさんのApp Storeのデザインを試させていただきました。
（本記事とは直接の関係ないですが、こちらの講義はとても分かりやすかったので、オススメです）
環境
- Claude Code（CLI）
- Figma アカウント（Starter プラン以上）
- Node.js 18+
セットアップ
1. .mcp.json の作成
プロジェクトルートに .mcp.json を作成します。
Figma 公式 HTTP サーバー（OAuth認証）
{
"mcpServers": {
"figma-remote-mcp": {
"type": "http",
"url": "https://mcp.figma.com/mcp"
}
}
}
初回アクセス時にブラウザでOAuth認証が走ります。
3. 接続確認
Claude Code を起動後、会話内で確認できます：
> Figma MCPに接続できてる？
{
"email": "your@email.com",
"handle": "Your Name",
...
}
初回アクセス時にブラウザが開きFigmaのOAuth認証が走ります。認証が完了すると、Figmaの Settings → Security → 接続しているアプリ に「Figma MCP in Claude Code」が表示されます。
Figma to Code のフロー
1. FigmaのURLを貼る
https://www.figma.com/design/5xxJw0R6ph1lUr4NkYnVVT/AppStore-UIDesign?node-id=0-1
2. ファイル構造を把握する
URLのルートノード（`0:1`）は直接コードを生成できないため、まず `get_metadata` で画面一覧を取得します。
今回のファイルには以下の画面がありました：
| 画面名 | Node ID |
|---|---|
| Today | 2:2 |
| Games | 408:392 |
| ... | ... |
3. get_design_context でコードを生成
指定した画面のコード・スクリーンショット・デザイントークンが返ってきます。
Today画面（node-id: 2:2）をコード化して
返ってくるもの：
- React + Tailwind CSS のコード（参照コード）
- スクリーンショット（デザイン確認用）
- デザイントークン（色・フォントなど）
- アセットURL（画像・SVGのURL、7日間有効）
⚠️ 生成コードはあくまで参照。プロジェクトの技術スタックに合わせて適宜調整が必要です。
4. 生成されたプロジェクト構成
src/
├── App.tsx # 画面ルーター
├── index.css # Tailwind ベース + モバイルフレーム
├── main.tsx
└── screens/
├── Today.tsx # Today 画面
└── Games.tsx # Games 画面
5. 開発サーバーの起動。
npm run dev
ターミナルで実行すると http://localhost:{port} でプレビューできます。
Today 画面のコード解説
Today画面は4つのブロックで構成されています。
get_design_context が返したスクリーンショットと、生成されたコードを対応させながら解説します。
| Figmaで作成した画面 | Figma to Codeで作成した画面 |
|---|---|
 |
 |
Figmaデザインとコードの差分
Figmaの構成と実装を比較すると、タブバー（Tab Navigation）が下部ではなく上部に出てしまっています。
これは、タブバーの位置を固定する際に、参照する親フレームが「コンテンツを隠す」になっていたため発生していました。
Figmaでは「コンテンツを隠す」をONにしても、固定レイヤー（Status Bar・TabNavigation）はちゃんと固定されます。Figmaがそう処理するからです。
しかしCSSはそうではありません。
sticky はスクロールできる親要素（スクロールコンテナ）を基準に動作しますが、overflow: hidden をつけるとその要素がスクロールコンテナとして認識されなくなります。
結果として sticky bottom-0 のタブバーは「画面下部に固定」されず、コンテンツの直後に配置されて画面上部に飛び出してしまいました。
そもそもなぜこの問題が起きたのか - Figma to Codeの構造的な差異
Figma MCPの get_design_context が返すコードはデザインを忠実に再現しようとするため、FigmaのフレームサイズをそのままWebコンテナに適用することがあります。
そのため、実際のコードに落とし込む際には、いくつかの修正・調整が必要であることが分かりました。
このことから、Figmaからある程度はMCPサーバー経由で、デザインを参照させることは出来る。
しかし、Figma to Codeから実装レベルで開発を行うには、デザイナーの詳細まで配慮が必要であることが分かりました。
次回
Cluade Code to Figmaをやってみた。
今月はMCPサーバー利用件数の上限に達してしまいました・・・。
スタータープランのユーザー、または有料プランで閲覧もしくはコラボシートを持つユーザーは、1か月あたり最大6回のツールコールに制限されます