はじめに
Figmaのデザインを確認して、マージンを目で測り、padding: 16pxと書く。色をスポイトで拾って#6366f1と入力する。そういった作業を毎回繰り返しているなら、この記事は読む価値がある。
問題はピクセルの再現精度だけではない。コードを修正してもFigmaには反映されないため、デザインと実装が少しずつ乖離していく。デザイナーがFigmaを最新に保とうとすればするほど、エンジニアの実装と食い違いが生まれる。この構造的な問題をFigma MCP + Claude Code to Figmaの組み合わせが変えた。
2026年2月、コードをFigmaのデザインレイヤーに書き戻す「Claude Code to Figma」がリリースされた。これによってFigma→Codeだけだった一方向の流れが、Code→Figmaへの双方向ワークフローになった。本記事では設定からチームへの展開まで、実践に必要な情報を整理する。
手書きCSSが生まれる構造的な理由
従来のワークフローを改めて言語化すると、こうなる。
Figmaでデザイン → エンジニアがスクリーンショットを確認 → 手でCSSを書く
エンジニアからすると「Figmaを見ながらコードを書く」という認識だが、実際には「Figmaの情報を頭の中でCSSに変換している」という処理が毎回発生する。デザイントークンの共有がなければ、「このプライマリカラーが何番か」を毎回目視で確認することになる。
2026年2月17日のClaude Code to Figmaリリースで、逆方向の流れが実現した。エンジニアがコードを書いてFigmaに書き戻せるようになったことで、デザイナーはFigma上でコードの状態を確認できる。これが双方向連携の出発点だ。
セットアップ──5分でClaude CodeとFigmaをつなぐ
プランの確認（先に確認すること）
Figma MCPの基本機能（get_design_context等）は全プランで利用できる。ただし、FigmaコンポーネントとReactコンポーネントを紐づけるCode ConnectはOrganization以上のプランが必要だ。Professional・Starterプランでは使えない。導入前にチームのプランを確認しておきたい。
接続方式は2種類ある。Remote ServerはFigmaホスト型のエンドポイントに接続する全プラン対応の方式で、まずはこちらから始めるのが手軽だ。Desktop Serverは有料プランのみで、Figmaデスクトップアプリをローカルで使う。
設定コマンド
claude mcp add --transport http figma https://mcp.figma.com/mcp -s project
認証後、Claude CodeのSkillsからFigmaプラグインをインストールすると、3つのSkillが自動的に追加される。
implement-design（Figmaデザインからコードを実装）create-design-system-rules（デザインシステムのルールを自動生成）code-connect-components（コンポーネントの紐づけ、Organization以上）
Figma→Code──デザインコンテキストをコードに変換する
Figma MCPは5つのツールを提供している。使う順番に意味があるので、そこだけ押さえてほしい。
get_metadataから始めるのがセオリーだ。レイヤーID・名前・サイズ等の疎なXML構造を返すツールで、全体構造を把握するために使う。巨大なフレームをget_design_contextで一括取得しようとするとコンテキスト超過エラーになるため、まずここで対象を絞り込む。
対象が決まったらget_design_contextで詳細を取得する。デフォルトの出力形式はReact + Tailwind CSSだ。フレームワークやコンポーネント設計はプロンプトでカスタマイズできる。
デザイントークンを活かしたいときはget_variable_defsを使う。選択範囲の色・スペーシング・タイポグラフィをCSS変数形式で返してくれる。
"get_variable_defs でカラートークンを取得して、
tailwind.config.ts の theme.extend.colors に変換して"
これを使うメリットは、AIが「IndigoとRobotoに偏る」問題を解決できることだ。Claude Codeの学習データにはよく使われるスタイルが偏って含まれているため、何も渡さないと汎用的な色・フォントに落ち着いてしまう。Figmaのトークンを直接渡せば、AIの推測ではなくデザインの意図がコードに反映される。
Code→Figma──実装をデザインに書き戻す（2026年2月新機能）
generate_figma_designで実装をFigmaに書き出す
generate_figma_designはClaude Codeで実装したUIをFigmaのデザインレイヤーとして書き出すツールだ（Remote専用）。
"このReactコンポーネントをFigmaに書き出して"
新規ファイルはチームまたは組織のDraftsに作成される。既存ファイルへの書き出しには編集権限が必要だ。
メルカリのDesign Blogは2026年3月、このツールが普及して1ヶ月の実感として「設計からプロトタイプ生成・フィードバック・Figmaへの反映が一気通貫になった」と報告している（出典: Mercari Design Blog「Claude Code to Figmaがリリースされて1ヶ月。デザインフローで変わったこと」）。これは単なる機能紹介ではなく、実際に双方向ワークフローが機能しているという証言だ。
Code Connect × Figma Variablesで精度を高める（Organization以上）
Code Connectを設定すると、MCPがコードのコンテキストに
Figma Variablesと組み合わせると、デザインと実装のつながりがさらに明確になる。
Figma: color/primary/500
↓ Code Connectで紐づけ
CSS変数: --color-primary-500: #6366f1
↓
Tailwind: text-primary-500
この状態になると、差分レビューが「値（#6366f1）」ではなく「意味（primary/500）」で行えるようになる。デザイナーとエンジニアが同じ語彙でコミュニケーションできる。
EM視点──デザイン負債ゼロを目指す体制設計
Figma MCPの導入は個人の作業効率を上げるだけでなく、チームの構造的な問題を解消できる。
デザインレビューのボトルネックを考えると分かりやすい。デザイナーがコードを読めない環境では、「実装がデザイン通りか」の確認がエンジニア任せになる。Claude Code to Figmaでコードが自動的にFigmaに書き出されれば、デザイナーが自分の目で確認できる。
デザイン負債の問題も同様だ。実装後にFigmaが古くなるのは「誰かが手動で更新しなければならない」という構造的な問題だった。双方向連携で更新が自動化されれば、乖離が蓄積するスピードを落とせる。
Zennのcanly社事例では、3種類のSkillテンプレートを整備して運用を標準化している（出典: Zenn / canly「Figma MCPの精度を更に上げるTips：Claude Code to Figma、Code Connect、Skills等」）。「デザイン→コード」「コード→キャンバス」「差分レビュー」の3パターンをSlash Commandとして登録することで、メンバーが毎回同じ手順を踏まなくても済む体制を作った。新しいメンバーが入ってきたときも「このコマンドを使えば」と説明できるため、オンボーディングコストが下がる。
まとめ
Figma MCPは「デザインを自動でコードに変換するツール」という認識だけでは足りない。Code→Figmaの双方向連携まで含めて設計すると、デザイナーとエンジニアの境界そのものが変わる。
最初の一歩として、get_variable_defsでデザイントークンを取得してTailwindの設定に変換するところから試してほしい。スポイトで色を拾う作業がなくなるだけでも、日々の小さなフラストレーションが一つ消える。その先に、デザインとコードが自然に同期していく状態がある。
コメント