Claude Code と Figma を組み合わせるとブランドの何が同期できるのか

Claude Code は Anthropic の公式コマンドラインツールです。ローカルの実装環境から Claude を呼び出し、外部サービスとは MCP で結びます。

Figma 側は Dev Mode MCP サーバを2025年6月に公開しました。設計データを構造化して、IDE 側の Claude Code に渡す入り口です。

この2つが結ばれると、ブランドの変数とコンポーネントはそのまま Claude Code に届きます。Figma の一次情報のかたちで会話に流れ込みます。実装コードはその場で参照して書けます。

これまで PDF や口伝で伝えていた色や余白の指定が、設計ファイルの値そのままで届きます。ブランドの解釈のずれが起きにくくなります。全体像はClaude Code をブランドと制作に活かす全体像にまとめています。

Figma Dev Mode MCP サーバの役割

Dev Mode MCP サーバは Figma の設計データを MCP の規格で外に出す仕組みです。Figma 公式ブログの発表では対応する IDE が挙がっています。Claude Code / Cursor / VS Code / Windsurf の4つです。

サーバは変数とコンポーネントとスタイルの定義を返します。選択したフレームの構造や、Code Connect で結んだ実装ファイルのパスも取り出せます。

Figma の公式ブログは、生成されるコードが「設計の意図に沿った形」に近づくと書いています。ピクセル単位の模写ではなく、意味を持った参照になります。

利用には Dev または Full の座席が必要です。ベータ期間は追加料金なしで、正式提供時に従量課金の予定と案内されています。接続手順のさらなる詳細はClaude Code と Figma を MCP でつなぐ全体像を参照してください。

Claude Code に Figma MCP を登録する手順

Claude Code の MCP 追加は claude mcp add で行います。公式ドキュメントの通り、リモート HTTP サーバとして登録するのが最短です。

登録の1行はこの形になります。

claude mcp add figma --transport http https://mcp.figma.com/mcp

初回接続時は Figma 側の認証が走ります。/mcp パネルで認証待ちが表示されたら、claude mcp login figma を叩きます。ブラウザで認可が開きます。

スコープはチーム共有なら Project、個人利用なら Local を選びます。Project にすると .mcp.json に定義が入り、共同作業者にも同じ設定が届きます。

登録が終わると使える状態になります。Claude Code の会話から Figma の変数やコンポーネントを直接引けます。設計ファイルの URL を貼れば内容の参照が始まります。

claude mcp list で接続状態を確認します。表示されない場合は .mcp.json の記述と、Figma 側のプラン座席を先に確認します。Node バージョンやプロキシでのつまずきは少なく、多くは認証か座席の問題に帰着します。

変数コレクションをブランドの一次情報にする

ブランドの色や余白や角丸は、Figma の変数として集約します。公式ヘルプは色/数値/文字列の3型を明示し、真偽値も含めた変数体系を案内しています。

変数はコレクション単位で管理します。1つのコレクションに最大5,000変数を入れられます。「色」「間隔」「文字」など役割ごとに分けます。Claude Code から参照するときにも整理された状態で届きます。

変数のエイリアスは重要な機能です。生の色は一次変数として置きます。意味を持った変数はエイリアスで参照する二段構えにします。後で色を差し替えても意味側は動きません。

モードを使えば、明暗の切り替えやブランド別の切り替えも同じコレクションで扱えます。Claude Code に渡すときも、どのモードの値かを含めて構造化して返ります。

コンポーネントを Code Connect で実装と結ぶ

Figma のコンポーネントと実装のコンポーネントは、Code Connect で1対1に結びます。Figma 公式ブログは「Code Connect が具体的なファイルパスまで共有する」と説明しています。

Claude Code は Figma MCP を経由してこの対応を取り出せます。設計のフレームを渡したとき、実装側で使うべきコンポーネントのパスがそのまま返ります。

これによって、Claude Code の生成コードが独自のボタンを作り直す事故がなくなります。既存の実装コンポーネントを取り込んで並べる形に収束します。

対応を作っていないコンポーネントは、Claude Code 側で対応先が不明と判断されます。運用側でその一覧を潰していく作業が、実装との整合を保つ日々の運用になります。

スタイルとタイポグラフィのモード運用

色やタイポグラフィのスタイルは、変数の上に組みます。まず変数で値を確定し、スタイルは変数を参照する形にします。

タイポグラフィは行間や文字間まで変数化しておくと便利です。Claude Code に渡したときは、その値が数値で届きます。CSS の line-height や letter-spacing に対応します。

多言語のブランドでは、フォントの切り替えをモードで管理します。日本語と英語で本文フォントを変える場合も、同じスタイルのなかでモード切り替えとして表現できます。

Claude Code 側の実装コードには、この分岐を CSS 変数として落とします。設計と実装で分岐の入れ方が一致するので、後の変更が両側で同じ場所に着地します。

ブランド一貫性を Claude Code で検証する運用

Claude Code は既存コードの検証にも使えます。実装ファイルの色や余白が Figma 変数の値と一致しているかを、会話のなかで問い合わせられます。

「この画面のヘッダー色は変数のどれに対応するか」と Claude Code にたずねます。Figma MCP を経由して合致する変数名が返ります。ハードコードされた色があれば、その場で置き換え案が出せます。

この作業は差分レビューの一環として組み込みます。プルリクエストの色や余白を Claude Code で確認する運用に入れます。ブランドから外れた値が本流に入るのを止められます。

Claude Code の権限設定で Figma MCP のツールを明示的に許可しておきます。レビュー時の承認プロンプトが1回で済み、日々の運用に組み込むうえで摩擦が下がります。トーン面の検証はClaude Code でブランドトーンを検査するにまとめています。

設計と実装のずれを毎日拾う仕組み

同期はイベント的な作業ではなく、日々の作業に混ぜます。Figma 側で色を変えた日、「変更のあった変数を教えて」と Claude Code に問えば差分が返ります。

その差分を実装側の CSS 変数に反映するコミットを、同じ会話のなかで書けます。差分の検出から反映までが、1本の流れになります。

チームで運用するときは Project スコープで MCP を登録します。.mcp.json を共有すれば、新しく参加した人も1コマンドで同じ環境になります。

権限設定も同じファイルで共有できます。誰が触っても同じ Figma ファイルに同じ検証が走る状態を、リポジトリの設定として固定できます。ドキュメント側の同期はNotion のブランドドキュメントを Claude Code と結ぶを合わせて読むと理解しやすくなります。

MCP を使わない場面もあります。Figma の REST API から変数コレクションを JSON として取り出す道です。Claude Code はその JSON を読んで実装側の値と突き合わせます。CI に組み込むときの選択肢として持っておくと運用が広がります。

導入時に踏みやすい落とし穴

最初に踏むのは、変数化が不十分な状態での接続です。Figma 側のスタイルが直値で書かれていると、Claude Code に届くのは色コードの並びになります。意味が失われます。

対処は先にコレクションを整えることです。色/間隔/タイポグラフィの三本柱を変数として組んでから MCP を接続します。順序を逆にすると後戻りが増えます。

もう1つは Code Connect の欠落です。実装のコンポーネントを Figma に結んでいないと事故が起きます。Claude Code が独自のコードを生成しはじめます。主要なコンポーネントから先に結んでおくと安定します。

MCP の権限設定を放置するのも危険です。読み取り専用の権限にしぼってから運用に入れると、意図しない書き換えを止められます。

段階導入のロードマップ

導入は3段階に分けます。まず Figma の変数化とスタイル整理から始めます。ここができないと後段が形になりません。

次に主要コンポーネントの Code Connect を結びます。ボタンやフォームや見出しなど、実装で頻繁に使うものから優先します。

最後に Claude Code の運用に組み込みます。プルリクエストの差分レビューと、日々の色や余白の反映を Claude Code の会話に流します。

3段階を全部やってから公開するより、段階ごとに社内で回してから次に進む方が安全です。運用の摩擦は使ってみて初めて見えます。ビジュアル面の可視化はClaude Design でブランドのビジュアルガイドを組むに接続します。

FAQ

Q1. claude code figma ブランド の同期はどこから始めればよいか

A. Figma の変数コレクションを色/間隔/タイポグラフィの三本柱で整えることから始めます。ここが揃わないまま MCP を接続しても、Claude Code に届く情報が薄くなり効果が出ません。順序を守るのが早道です。

Q2. Figma Dev Mode MCP サーバを使うのに追加費用は必要か

A. ベータ期間は追加費用なしで利用できます。Dev または Full の座席を持つ利用者が対象です。正式提供時は従量課金に切り替わる予定と Figma が公式ブログで案内しています。

Q3. 個人のスタイルと変数はどう使い分けるか

A. 値を確定するのは変数、値を意味と結ぶのはスタイルです。色を変数として一箇所に置き、スタイルは変数のエイリアスで組みます。後の変更が変数1つで全体に届きます。

Q4. Code Connect の対応を作っていない画面はどう扱うか

A. Claude Code は対応先が不明と判断して、汎用のコードを生成します。まず主要なコンポーネントの対応を先に作り、残りは業務で使う頻度が高い順に整えます。優先順位が運用の質を決めます。

Q5. チームで同じ設定を共有する方法は何か

A. Claude Code の MCP 登録を Project スコープで行います。.mcp.json をリポジトリに含めれば、共同作業者は取り込んだ時点で同じ接続が有効になります。環境差が消えます。

情報源