Claude Code × Figma MCP連携でLPを実装してみた

はじめに

Claude Code と Figma を MCP 経由で連携させ、LP の実装を試みました。
フリープランと有料プランの両方で試したので、実際にやってみた所感をまとめます。

環境・契約状況

エディタ： Claude Code for VSCode
Claude： Pro プラン
Figma： フリープラン → 途中から Professional（月額 ¥2,400）に移行して比較

この記事はフリープランと有料プランの両方で試した内容を含みます。

ClaudeCodeにデザインを参照させる方法

ClaudeCode にデザインを参照させてコーディングを依頼する方法として、まず思いつくのがキャプチャ方式です。

1. デザインのスクリーンショットを用意する
2. そのパスを ClaudeCode に渡す
3. 素材のパスなど付属情報も添えて「コーディングお願い」と投げる

この方法でも十分な精度で完成品が返ってきます。しかも速い。
では MCP 連携は何が違うのか、というのがこの記事のテーマです。

FigmaのMCP連携とは

Claude が Figma の設計データを直接読めるようにする仕組みです。

キャプチャ方式では人間が画像を用意して貼る必要がありますが、MCP 連携を使うと Figma の URL を貼るだけで Claude が Figma の API を通じてレイヤー構造・寸法・色・テキストなどの生データを自分で取りに行きます。

開発者 → Claude「このFigmaのURLを実装して」
           ↓
        Claude → Figma API「このファイルのデータをくれ」
           ↓
        Claude → 「データを元にコードを生成」

人間がスクリーンショットを撮って貼る手間がなくなり、目視による近似ではなく正確な数値でコードを生成できるのが最大のメリットです。

デザインキャプチャとMCP連携の違い

デザインキャプチャ（画像）

Claude は「ピクセルを目で見て解釈」するらしいです。

MCP連携（Figmaデータ）

Claude は「構造化されたJSONデータを読む」らしいです。

MCP 連携は、キャプチャと比べて値（色・サイズ・テキスト）の精度が上がります。

Figmaの絶対座標という問題

Figma のデータを見てコーディングしたことがある人はわかるかもしれませんが、Figma は XY 座標のキャンバスツールです。要素の位置が「x: 120, y: 340, width: 800, height: 60」という絶対座標で管理されています。

MCP はこれをそのまま返します。

/* Figma MCP が出力するイメージ */
position: absolute;
top: 340px;
left: 120px;
width: 800px;
height: 60px;

Web の実装ではそのままでは使えない形です。

ClaudeCode がやっていること

絶対座標の関係性から flexbox や grid の構造を推定して再構築しています。
Figma のキャンバスモデルと Web のレイアウトモデルの差を Claude が埋めているわけですが、そこに解釈が入るため複雑なデザインほど精度に限界があります。

セットアップ手順

① Figmaで個人アクセストークン（PAT）を発行

Figma → 左上アイコン → Help and account → Account settings → Personal access tokens

• トークン名：任意（例：claude-code）
• スコープ：File content → Read、Variables → Read（書き込み権限は不要）
• 有効期限の設定に注意：短く設定すると失効したときにレート制限エラーと症状が同じになり、原因の切り分けが難しくなります

② Claude Code CLIをインストール

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

③ プロジェクトルートに .mcp.json を作成

{
  "mcpServers": {
    "figma-pat": {
      "type": "http",
      "url": "https://mcp.figma.com/mcp",
      "headers": {
        "X-Figma-Token": "<①で発行したPAT>"
      }
    }
  }
}

※PAT を git にコミットしないように、.mcp.json は .gitignore に追加してください。

なぜ .mcp.json なのか

~/.claude/settings.json には mcpServers フィールドが存在しません。
公式プラグイン方式は OAuth 認証を使うため PAT が直接使われません。
プロジェクトルートの `.mcp.json` に PAT を直接書く方法が、現時点では最もシンプルに動作します。

④ Claude Code を再起動

再起動すると .mcp.json が読み込まれます。
リモート MCP サーバーへの接続時にブラウザが開いて Figma アカウントのログインを求められる場合があります。
ログインして認証を完了してください。

使い方

チャットに Figma の URL をそのまま貼るだけです。

このFigmaのデザインをHTMLとSCSSに落とし込んで
https://www.figma.com/design/xxxxxxxx/...

フレーム単位の URL でも動作します。

フリープランでも使えるか？

フリープラン（Starter）は「月6回まで」という制限があります。

リセットのタイミングは「翌月」ですが、カレンダー月の1日なのか請求サイクル起算なのかは公式ドキュメントに明記されていません。

動かないときに確認すべき3点：

1. レート制限（月の上限に達している）
2. PAT の有効期限切れ
3. ファイルが置かれているチームのプランが Starter のまま

エラーが出たらこの3点を切り分けて確認するとよさそうです。

MCP連携が効果的な場面

以下のような条件が揃っているほど恩恵が大きくなるのかなと思います。

• Figma でコンポーネントまで整備されたプロジェクト
• Auto Layout を多用している
• ピクセル精度が求められる
• 画面数が多い
• 既存の Figma データをコード資産化したい

まとめ

• MCP 連携はキャプチャ方式より値（色・サイズ・テキスト）の精度が上がる
• ただしレイアウト構造は絶対座標 → flexbox 翻訳の解釈が入るため、複雑なデザインほど限界がある
• フリープランでも動作するが、月6回の上限があり集中して使うとすぐ制限に当たる

MCP連携の効果はFigmaデータの整備度に比例します。
コンポーネント化が進んでいないプロジェクトであれば、まずキャプチャ方式で十分かどうか試してみることをおすすめします。