Claude Codeのuse_figmaでコードからFigmaデザインシステムを自動生成してみた
はじめに
前回の記事「Claude Code to Figmaでデザインシステムはどこまで保持される？検証してみた」ではgenerate_figma_design を使い、React実装をFigmaに取り込む検証を行いました。
見た目の大枠は再現できるものの、Variables参照・Auto Layout・レイヤー命名などの設計情報は保持が難しいという結論でした。
その後Figmaが Figma Community Skills を発表しました。
Claude Codeから呼び出せるSkillが公開されており、今回はそのひとつ /figma-generate-library を試してみました。
今回はその逆、コードからFigmaライブラリを"設計情報ごと"構築できるかを検証します。
Claude CodeのMCPツール use_figma を使い、実際に開発中のWebアプリのデザインシステムをFigmaに再現してみました。
use_figma とは
use_figma はFigma公式のMCPツールで、FigmaのPlugin APIをJavaScriptで直接実行できます。
ノードの作成・編集・削除から、Variables（デザイントークン）の登録、コンポーネントのバリアント生成まで、Figmaプラグインと同等の操作をClaude Codeから行えます。
結論
| 項目 | 結果 |
|---|---|
| 生成ページ数 | 7ページ |
| 生成コンポーネント数 | 4コンポーネント・14バリアント |
| 生成Variables数 | 26トークン（色・間隔・サイズ） |
| 生成テキストスタイル数 | 10スタイル |
use_figma 呼び出し回数 |
約25回 |
get_screenshot 呼び出し回数 |
約10回 |
| 所要時間 | 約12分 |
use_figma を繰り返し呼び出すことで、コードベースのデザイントークンとコンポーネントをFigmaライブラリとして出力できました。
VariablesへのバインドやDev Modeのコードシンタックスも自動で設定されます。
ただし、既存のデザインファイルのページがまるごと置き換わるため、テスト用ファイル以外では実行しないようにしてください。
検証環境
| 項目 | 内容 |
|---|---|
| アプリ | 社内向けWebアプリ |
| フロントエンド | Vite + React 18 + TypeScript + Tailwind CSS v3 |
| アイコン | lucide-react |
| Claude Code | v1.x / claude-sonnet-4-6 |
| Skill | /figma-generate-library |
| Figmaファイル | テスト用ファイルに書き込み |
| 所要時間 | 約12分 |
内部で何が起きているか
Skillが動いている間、Claude Codeが使うツールは基本的に2種類の繰り返しです。
use_figma → FigmaにPlugin APIのJavaScriptを送って実行（書き込み）
get_screenshot → 作成結果を画像で確認（読み取り）
この2つを小さい単位で繰り返しながら、1ステップずつ検証して進みます。
Figmaのプラグインを手動で操作する代わりに、ClaudeがJavaScriptコードを生成して use_figma 経由で実行している形です。
何が作られたか
1.コードベースの解析
tailwind.config.js や index.css、各コンポーネントファイルを読み込み、デザインシステムの要素を自動で洗い出します。
また、コードとFigmaの既存内容に不一致がある場合は自動でフラグを立ててくれます。
今回は以下の2点が検出されました。
| 項目 | コード（実際の値） | Figma（古い記録） |
|---|---|---|
ds-mutedFg |
#803838 |
#64748B |
| トークン名 | ds-soft |
ds-border |
コードを正とする旨を伝えると、そちらで進めてくれました。
2.Variables + テキストスタイルの作成
use_figma を繰り返し呼び出しながら以下を順番に作成します。
| コレクション | 内容 |
|---|---|
| Primitives | 生HEX値 7色 |
| Color | セマンティックエイリアス 7色 |
| Spacing | 間隔・角丸・サイズ 12トークン |
| テキストスタイル | Display / Body / Label / Button 計10スタイル |
すべての変数にスコープ（FRAME_FILL / TEXT_FILL / GAP など）とWEBコードシンタックス（var(--ds-bg) 形式）が自動設定されます。
Dev Modeでそのまま参照できる状態になっていました。
3.ページ構造の作成
以下のページ構成を use_figma で作成しました。
Cover → Foundations → ——— → Button → LanguageToggle → HistoryPanel → OtherTopics
FoundationsページにはカラースウォッチがHEX値・トークン名・説明付きで並びます。
4.コンポーネントの作成
4コンポーネント、14バリアントを作成しました。
| コンポーネント | バリアント |
|---|---|
| Button | Type=Primary/Secondary × State=Default/Hover/Active = 6 |
| LanguageToggle | State=Default/Hover/Active = 3 |
| HistoryPanel | State=Closed/Open/Empty = 3 |
| OtherTopics | State=Visible/Hidden = 2 |
各コンポーネントのfill・strokeはVariablesにバインドされています。
アイコンの持ち込み方
コンポーネント作成直後のスクリーンショットではアイコンが潰れているように見えました。
これはget_screenshotで複数バリアントを1枚に縮小表示してスクリーンショットした時の解像度が粗いため、このように潰れてしまうようです。
同じバリアントを単体で拡大したスクリーンショットでは正しく描画されていることを確認できました。
use_figma では figma.createNodeFromSvg(svgString) でSVGをFigmaノードに変換できます。
const svgNode = figma.createNodeFromSvg(svgString);
svgNode.resize(18, 18);
iconFrame.appendChild(svgNode);
lucide-reactはパッケージ内にSVGパスが埋め込まれている形式のため、今回はSVGパスを直接コードに書きました。
プロジェクト内に独立した .svg ファイルがある場合は、Claudeの Read ツールでファイルを読み込み、その内容を use_figma に渡せばそのまま配置できます。
やってはいけないこと
今回の検証でFigmaファイルのページがまるごと置き換わりました。
use_figma は既存コンテンツを削除してから新しい内容を書き込むため、既存のデザイン資産が失われます。
検証は必ずテスト用の専用ファイルで行ってください。
まとめ
| 観点 | 結果 |
|---|---|
| トークン → Variables変換 | ✅ スコープ・コードシンタックスも自動設定 |
| コンポーネント + バリアント生成 | ✅ Variable bindingも正常 |
| アイコンの持ち込み | ✅ SVGパス埋め込みで対応可 / .svgファイルがあればReadツール経由でも可 |
| 所要時間 | 🕐 簡単なWebアプリで約12分 |
| 既存ファイルへの影響 | ⚠️ ページごと置き換わる。テスト用ファイル必須 |
use_figma を使えばコードからFigmaライブラリを構築できることが確認できました。
デザインシステムのドキュメントが存在しない既存プロジェクトや、コードとデザインが乖離してしまったケースでの活用が期待できそうです。
最後までお読みいただきありがとうございました。
