Figma MCPとClaude CodeでFigmaから実装する手順──つなぐ前のデータの点検、1画面ずつの生成、スクリーンショットとの照合、部品の対応づけまでの5工程

【Figma MCPサーバー】
・リモート版（https://mcp.figma.com/mcp）が推奨とされている
・デスクトップ版は、Professional・Education・Organization・Government・
　Enterpriseのプランで、DevまたはFullの席が必要とされている
・読み取りの道具の例
　get_design_context：選択したレイヤーのデザインの情報とコード
　get_variable_defs：選択範囲で使われている変数とスタイル
　get_screenshot：選択範囲のスクリーンショット
　get_metadata：選択範囲の軽い構造の一覧
　get_code_connect_map：Code Connectの対応づけ
・利用の回数の上限は、Figmaの「Plans, access, and permissions」のページで確認する

【Claude Codeへの追加（Figmaの手順）】
・プラグイン：claude plugin install figma@claude-plugins-official
・手動：claude mcp add --transport http figma https://mcp.figma.com/mcp
　→ /mcp で figma を選び、Authenticate からブラウザで許可する

【Claude Code側の注意】
・公式は、接続する前にサーバーを信頼できるか確かめるよう警告している

① データの点検（人）
　コンポーネント化、変数、レイヤー名、オートレイアウトの状態を確かめる
　足りない場合は、整備してから進むか、お客様に相談する

② 計画（Claude Code・プランモード）
　get_metadata で画面の構造を読ませ、使う共通部品と作る順番を出させる
　計画を人が読んで、承認する

③ 1画面ずつ生成（Claude Code）
　get_design_context と get_variable_defs で、1画面ずつ実装する
　色・余白は変数を参照させ、直書きを禁止する（CLAUDE.mdに書く）

④ 照合（Claude Code＋人）
　get_screenshot の画像と、実装した画面を並べて差分を出させる
　ずれが意図どおりか（ブラウザの都合か、デザインの誤りか）は人が決める

⑤ 部品の対応づけ（人が判断）
　繰り返し出てくる部品を、Code Connectで自社のコードの部品に結ぶか決める

Figmaのファイル〔ファイル名〕の、フレーム〔フレーム名〕を実装します。
まず計画だけを出し、私が承認するまで編集しないこと。

1. get_metadata で構造を読み、既存の部品（〔src/components〕）で使えるものを挙げる。
2. get_variable_defs で変数を読み、既存の色・余白の定義（〔ファイル名〕）との対応表を作る。
3. 対応がない変数と、直書きになりそうな箇所を「要確認」として出す。
4. 実装の順番を、部品の単位で示す。

【Figmaのデータ】
□ 繰り返すもの（ボタン、カード、入力欄、ナビ）がコンポーネントになっている
□ 色・余白・角丸・文字が変数になっている
□ レイヤー名が役割を表している（Frame1268のままではない）
□ オートレイアウトで組まれ、幅を変えても崩れない
□ 動きや画面幅ごとの振る舞いに、注記がある

【受け入れの線】
・上の5つのうち、2つ以上が欠けていたら、整備を先に見積もる
・お客様の支給データなら、整備の範囲をお客様と合意してから着手する