Claude Code＋Figma MCPで、画面より先にデザインシステムを作る10手順（作ったあと「生の値」を数える監査つき）

部品を使っていても、塗りが変数につながっていなければシステムは効いていない。新しいセクションごとに数えて確かめる。

どんな問題を解決するか / いつ使うか

Claude Code に Figma で画面を作らせると、毎回グレーや角丸をその場で決めてしまう。先に変数・スタイル・部品・ルールを用意しておくと、画面は「描く」のでなく「組み立てる」作業になり、コードも同じ名前で書かれる。既存アプリがあるなら、テーマファイルと共通ビューのコードを読ませてFigma側を作るとよい。

10手順

ファイルの準備：Foundations（色・文字）ページ、Componentsページ、「何を元に作るか」を書いたRead meを先に作る。
色は役割で命名：1つのコレクションにDark/Lightの2モード。canvas/*、text/primary などとし、grey-62 のような見た目の名前は避ける。変数ごとに使える範囲（スコープ）も設定。余白・角丸も変数に。
コントラストを2回確認：両モードの文字色と背景の組み合わせで、WCAGの比をClaudeに計算させる（AAは4.5:1）。
文字と影はスタイルに：書体・サイズ・太さ・行間は役割名のテキストスタイルにまとめる。
繰り返し出る部品はコンポーネントに：状態はバリアント、文字や省略可能な部分はプロパティ。説明欄に画像で伝わらないこと（行全体がクリック範囲、押下時の拡大率など）を書く。空・エラー・無効の状態を忘れない。
使い方のルールをClaudeが読む場所に書く：ファイル内（「色は状態だけを表す」など）と、Claude Codeのメモリ。
新しい画面は必ずシステムの部品のインスタンスから作らせる。
監査：新しいセクションを作るたびに、変数につながっていない塗り（生の値）をClaudeに数えさせる。作者の例では、インスタンスを使っていても多くの塗りがつながっていなかった（推測では、前のフレームからレイヤーをコピーした際に生の値が持ち込まれる）。
変数にコード上の名前（code syntax）を入れ、部品はCode Connectでつなぐ。Claudeがフレームを読んだとき Theme.canvasBackground のような実名が得られる。
リリース後は「UIが変わったらファイルも変える」。ずれた例も紹介されている。

注意点

Figma MCPには読み取り上限がある（投稿時点：Professionalのフルシートで1分10回・1日200回）。フレームごとでなく、ページ全体を1つのスクリプトで読ませる。
iPhoneのDynamic Typeのように、実機では文字サイズが変わる。Figmaのサイズは既定値として扱う。
ロゴや装飾画像など、生の値のままでよい塗りもある。

出典

@liorpesoa（X記事「How to create a design system with Claude Code」）@liorpesoa · 2026-11-08