Claude CodeからFigmaを操作できるようになったので試してみた

はじめに

1週間ほど前、Figmaより発表がありました。

FigmaのMCPサーバーを通じて、AIエージェントがFigmaファイルに直接書き込めるようになりました。

use_figma というツールを介して、Claude Code・Codex・Cursorなどのエージェントがデザインシステムに連携した形でアセットを生成・編集できます。

これによって、Code→Design が非デザイナーでも簡単に操作可能になり

• デザイントークンのCode-Figma間における同期
• コード上のUIコンポーネントのFigmaにおけるコンポーネント化
• エンジニア主体でデザインの案だし

といった動きが今まで以上に簡単に行えるようになりそうです。

内容

use_figmaツールの追加

既存のgenerate_figma_design（HTMLからFigmaレイヤーを生成）に加え、新たにuse_figmaが追加。エージェントがコンポーネントや変数を使いながらキャンバス上で直接操作できるようになりました。

Skills

Figmaからは/figma-generate-library, /figma-generate-designの二つのSkillが追加されました。いずれもuse_figmaを基盤にして設計されています。

Figma MCP のインストール

claudeを立ち上げてインストールします。

/plugin install figma@claude-plugins-official

/mcp でfigmaが追加されていることを確認します。　

その後、認証が済んでいないなら認証を完了させます。

利用できるSkill

以下二つはFigmaから提供されています。

• /figma-generate-library：デザインシステム全体（トークン・コンポーネント・ドキュメントをまるごと）を作成
• /figma-generate-design：既存のデザインシステムを使って組み立てる

また、以下のスキルも別でダウンロードして利用することができます。

• /create-voice：VoiceOver（iOS）・TalkBack（Android）・ARIA（Web）向けのアクセシビリティ仕様をFigmaに自動生成（仕様書の作成）
• cc-figma-tokens：コードのトークンファイルを読み込んで、FigmaにPrimitive・Semanticの変数を自動作成（cc-figma-componentを実行する前に実行）
• /cc-figma-component：コンポーネントの仕様書（contract）を読み込んで、Figma上にバリアント付きコンポーネントを自動生成
• /audit-design-system：Figmaのデザインがデザインシステムからどれだけズレているかを監査する読み取り専用
• /apply-design-system：バラバラになったレイヤーやローカルコンポーネントを、公開済みのデザインシステムのコンポーネントに置き換え
• /rad-spacing：「外側のコンテナほど余白を大きく、内側の要素ほど余白を小さく」という視覚的階層をFigma上で自動的に構築
• /edit-figma-design：テキストの説明からFigmaデザインを直接作成・編集
• /sync-figma-token：コードのデザイントークンとFigmaの変数を同期し、ズレを検出・修正
• /multi-agent：並列ワークフローを実行して Augment Code でデザインを実装

現在は無料ベータ

We're quickly improving how Figma supports AI agents. This will eventually be a usage-based paid feature, but is currently available for free during the beta period.

とある通り
将来的には有料APIになる予定ですが、ベータ期間中は無料で利用可能です。

/figma-generate-library

ドキュメントを見た感じデザインシステムをまるごと作るオールインワンSkillっぽく見えます。

基本的な流れ

フェーズ	内容	概要
Phase 0	Discovery	コードのトークン・コンポーネントを分析し、スコープを決定
Phase 1	Foundations	変数コレクション（色、スペーシング等）をFigmaに作成
Phase 2	File Structure	Figmaファイルのページ構成・ドキュメントを作成
Phase 3	Components	コンポーネントをバリアント付きで1つずつ作成
Phase 4	QA	最終確認

↑のように大規模なタスクで、実装の基盤をまるっとFigmaへ反映するのに有用です。
変数管理、コンポーネント化などこれ一撃で作ってくれるので、Figmaと変数やコンポーネントを同期するのに便利でした。

Phase1, 2

以下のようなCSSファイルをがアプリケーションで用意されているとします。

global.css

@theme {
	/* Background Colors */
	--color-background-blue-light: #e8f4ff;
	--color-background-gray: #f5f5f5;
	--color-background-light: #f7f7f7;
	--color-background-overlay: #ffffffe5;
	--color-background-white: #ffffffff;

それを読み取って、以下のように変数を設定し可視化してくれます。
radius などはcssファイルに一覧定義していないのですが、コードに書かれている変数を読み取って一覧化してくれました。

こういったデザイントークンが可視化され、エンジニア・デザイナーが参照できるようにします。

一昔前ならこういった変数は、マメな人がいないと整理されない部分だったのでAIエージェントに命令して作ってもらえるというのは本当に便利に感じます。

Phase3

以下のようなCVAを定義しているButtonコンポーネントを読み取らせるとします

const buttonVariants = cva("relative rounded-full", {
	variants: {
		variant: {
			primary: "",
			secondary:
				"border border-black bg-white shadow-none hover:bg-secondary/80",
			tertiary: "bg-transparent text-black hover:bg-secondary/80",
			link: "text-textBlue h-auto p-0 font-semibold hover:text-brand hover:no-underline",
			cta: "bg-bgCtaYellow text-black hover:bg-bgCtaYellowHover",
		},
		size: {
			default: "",
			xs: "font-normal",
			sm: "font-normal",
			lg: "text-xl",
		},
		iconOnly: {
			true: "size-9 p-0",
		},
	},
});

以下のように、パーフェクトではないにしろ、
いい感じにコンポーネント化 & 一覧化 までしてくれました。

/figma-generate-design

「コードからFigmaを作成する」「このアプリ/ページをFigmaで作る」「Figmaのスクリーンをコードに合わせて更新する」といった操作が対象です。

コンポーネントを生成した後で、実行することになるので上段のfigma-generate-libraryの後で実行することになるでしょう。

figma-generate-library  ← デザインシステム・コンポーネントを作る
    ↓
figma-generate-design   ← 画面を作る

試しにトップページをつくらせてみました。
左がローカルホストで確認したデザイン、右が/figma-generate-designによってFigmaに生成させたデザインです。

体感7割くらいの完成度、いい線いってると思いました。
同時並行でPencilも触っていますが、Code→Designの精度はどちらも似たりよったりな感じです。

また、何気にすごいのがオートレイアウト、シンプルなGridレイアウト、わかりやすい命名のフレーム名になっていることです。

気を遣えず、「frame」としていることも珍しくないので、自動生成する方が最適化されている感じがします。

そのほかのSkillメモ

まだ試していませんが、ざっくりメモします。

/create-voice

エージェントがコンポーネントの視覚的なパーツを分析し、どの要素が独立したフォーカスポイントになるか・別の要素にマージされるかを判断して、プラットフォームごとのドキュメントをFigmaに直接レンダリングします。

要はアクセシビリティ仕様書を作るためのSkill

「デザイナーがアクセシビリティドキュメントを整備したい」や「エンジニアにアクセシビリティ実装について伝えたい」などの状況で活用する印象を持ちました。

Figmaデザイン
    ↓
create-voice
    ↓ アクセシビリティ仕様書をFigmaに生成
    ↓
エンジニアが仕様を見ながら実装
    ↓
aria-label や role を正しくコーディング

/cc-figma-tokens と /cc-figma-component

component-contracts を含む設計でトークンを管理していることが前提になります。

component-contracts/
├── .component-contracts     ← 設定ファイル（Figma接続情報）
├── tokens/                  ← デザイントークン
│   ├── primitive/           ← 生の値（色・スペーシング等）
│   └── semantic/            ← 意味を持つエイリアス
└── contracts/               ← コンポーネント仕様書
    └── button.contract.json ← これが「contract」

/cc-figma-tokens は、プロジェクト内の token files から Figma 上に
Primitives, Semanticの2つの変数を作成・更新します。

cc-figma-componentは contract ファイルを読んで、

• どんな variant があるか
• どの Semantic token を使うか
• どんな props を持つか

などを解釈して、　Figma 上に component を作るSkillのようです。

今のところ /figma-generate-library, /figma-generate-design でそれなりの完成度ができていると思っており、すぐには使わない気がしています。

/apply-design-system

2つの使い方モード

• review-then-apply：どこがズレているか未特定。まず監査してから修正
• apply-known-scope：すでに修正すべき箇所が分かっている場合

audit-design-systemがずれている箇所を監査するSkillなので、これで複数のずれが検知できたのなら一気に修正する流れになるのでしょうか。

audit-design-system      ← ズレを発見する（監査）
        ↓
apply-design-system      ← 複数セクションをまとめて修正

/rad-spacing

Gestaltの「近接の原則」（物理的に距離が近い要素同士を、関連性のある1つのグループとして認識する視覚的傾向）に基づいて、Figmaのレイアウトに階層的なスペーシングを自動適用するSkillです。

適切なスペーシングを適用することで区切り線なしでも、
目が自然にグルーピングを読み取れる状態になります。

階層の深さの分析

ページ → セクション → カード → カードの中身 → インライン要素
といった入れ子構造を把握します。

スペーシング変数を検索・作成

ライブラリに既存の変数があれば（4px・8px刻みの数値変数）それを使い、
なければ以下を自動作成

spacing/xs → 4px
spacing/sm → 8px
spacing/md → 12px
spacing/lg → 16px
spacing/xl → 24px
spacing/2xl → 32px
spacing/3xl → 48px

約40%ルールで計算する

内側から外側に向かって、各レベルを1.4倍にしていく。

8px → 12px → 16px → 24px → 32px
（内側）              （外側）

適用と検証

コンテナにはpadding、兄弟要素間にはgapを採用し変数を適用。
隣接する2レベルが同じに見えたら比率を上げる。

既存デザインのスペーシングを整理したいときや、
ファイル全体のスペーシングに統一感を持たせたい時に有効だと感じました。

/edit-figma-design

要件を確認して、既存実装や既存コンポーネントを確認して、Figmaを修正するなど、自然言語の指示をFigmaのデザインに変換する。

実装を読んだ感じ、Warpに特化した内容なので参考にして自作するといいかもしれません。

/sync-figma-token

名前の通りでコードのデザイントークンとFigmaの変数を同期し、ズレを検出・修正するSkillです。

既存のトークン管理がある程度成熟したプロジェクトで、コードとFigmaを継続的に同期させるために使うようなイメージを持ちました。

cc-figma-tokens        ← トークンをFigmaに初回作成
    ↓
（時間経過でズレが発生）
    ↓
sync-figma-token       ← ズレを検出して同期

/multi-agent

Figma MCP + Augment: Parallel Agent Workflows

とある通り、Augment Code が前提となったSkillです。

Design→Code
Code→Design

の両方に対応しており複数エージェントを並列して動かします。

Store frame links in agents.md. Agents always fetch fresh context — no stale screenshots.
Figma MCP
Always call get_design_context before writing any UI. Treat output as authoritative.
Tokens follow: [your convention]. Use frame-level links only.
Frame links:
[feature]: [link]

と書かれているのがポイントで、常に最新の状態を取得するので、古いスクリーンショットを参照するリスクを下げているのがわかります。

最後に

ここまで読んでいただきありがとうございます。

use_figma ツールの登場によって、デザイントークンの定義・コンポーネントやそのバリアントの可視化、ページ作成まで Code→Design などの操作が簡単に行えるようになりました。

Code→Design の手法としてPencilもありますが、Figmaでも同じようなことができるなら、実務でどっちを使用するか悩ましいです。。。