Claude Code to Figmaでデザインシステムはどこまで保持される？検証してみた
私を含め受託開発のデザイナーは、要件定義の段階でUIを作り画面フローを整理して開発に入ることが多いと思います。
開発が進むと仕様変更や文言修正が入り、いつの間にか「最新版はFigma？実装？」が曖昧になりがちです。
実装側が最新になっているならその状態をできるだけ正確にFigmaへ戻してデザインデータを最新化させたい……そんな時がありますよね。
Figmaが公開した「Claude Code to Figma」ならコードを正としてFigmaを更新する運用が現実になるかもしれません。
今回は 『Figmaで作ったMaterial 3のUIを、Claude CodeでReact + MUIに実装し、Claude Code to FigmaでFigmaに戻す』 という検証をしました。
狙いは「AIを挟んだ往復でデザインシステム（構造/トークン/余白ルール）はどこまで保持されるのか？」を実務に近い手順で確認することです。
検証したこと
見た目の崩れだけではなく「設計情報が戻るか」を中心に見ていきます。
- コンポーネント構造が戻るか
- Variables参照が残るか
- Auto Layoutが運用できる形で残るか
- 影や状態表現が保持されるか
- レイヤー名などの命名規則が残るか
検証環境
- Figma Desktop App v126.1.2
- Claude Code v1.0.44
- モデル claude-sonnet-4-6
- React v19.2.4
- @mui/material v7.3.8
- @emotion/react v11.14.0
Figmaの準備
Material 3 Design Kitを使用しUIを作成しました。
2つ以上配置しているコンポーネントは、StyleやStateを変えています。
画面構成
- App Bar
- Text
- Horizontal card
- List item
- Stacked card
- Bottom Navigation固定
Material 3 Design Kitに内包されているColorやSpacing/Radiusを個別にVariablesに登録し、余白が固定値や角丸のトークンとして参照されるかを確認できるようにしました。
実装側の条件
MUIのテーマ機能を使って色・角丸・余白をトークンとしてまとめて管理する前提で実装します。
力技で見た目を寄せると検証にならないため、テーマ機能で触ってよいのは palette / shape.borderRadius / spacing のみとしました。
components.*.styleOverrides は使いません。
また、AIに実装を頼むと画面下部の要素（BottomNavigationなど）が省略されることがあったため、プロンプトは「省略なし＋順番指定」に指示をしています。
theme（テーマ）とは
MUIで「アプリ全体の見た目ルール（色・余白・角丸など）」をまとめた設定のことです。
createTheme で作り、ThemeProvider でアプリ全体に適用します。
プロンプト
VSCode上のClaude Codeで以下を指示しました。
React + MUIで、次のFigmaを参考に「ProductListScreen」1画面を実装してください（既存実装のリファクタでもOK）。
Figma:
https://www.figma.com/design/……………………………………
対象フレーム: ProductListScreen
条件（themeでトークン化）:
- createTheme + ThemeProvider を使って theme を定義・適用する
- themeで設定してよいのは次の3つだけ
1) palette（primary/secondary/background/text/divider など）
2) shape.borderRadius（例: 12）
3) spacing（基準は 4px。spacing(4)=16px、spacing(3)=12px、spacing(20)=80px が成立するように）
- components の styleOverrides は使わない
- 画面下まで、Figmaにある要素を省略せずに実装する
実装するUI（上から順に）:
1) AppBar（タイトル: "Label"）
2) 説明テキスト3行（Overline / Label text / Supporting line text）
3) Horizontal card 2枚（A/B）
4) List item 2つ（片方はSwitch）
5) Stacked card 2枚（横スクロール）
6) BottomNavigation固定（タブ3つ、showLabelsで常時ラベル表示）
実装:
- src/theme.js を作成
- src/main.jsx で ThemeProvider + CssBaseline を適用
- src/ProductListScreen.jsx を作成/修正
- src/App.jsx で ProductListScreen を表示
- 変更/作成ファイル一覧と、各ファイルの内容を提示してください
Claude Code to Figma
- MCP経由で
generate_figma_designを実行し、Web（localhost）の画面をFigmaに取り込みました。 - 「Send to Figma」をクリックすることで、Figmaにインプットされます。
- 今回の環境では、Figma MCPツールが読み取り専用になっており既存フレームの複製やVariablesの値編集、既存ノードの色・プロパティ変更といった編集を直接できませんでした。
結果としてClaude Code to Figmaはgenerate_figma_design（Webキャプチャ）に寄る形になります。
開いているFigmaファイルにキャプチャ結果のフレームが追加されていれば、取り込みは成功です。
Claude Code to Figmaで出力したUI
検証結果
見た目の大枠（AppBar / Card / List / BottomNavigation）は揃うが、設計情報の保持は難しい という結果でした。
| 観点 | 結果 | 根拠 |
|---|---|---|
| コンポーネント構造 | できていない | Mui*Root / Styled(div) / Container など実装由来の構造として生成され、M3のコンポーネント（Design Kitのインスタンス）として復元されない |
| Variables参照 | できていない | Fill/StrokeがHEX固定値になり、Variables参照になっていない |
| Auto Layout | 一部できた | ボタンにはAuto Layoutが付くが、画面全体・カードなどはFrame（固定配置）が主体で混在する |
| 影と状態 | できていない | カードを選択してもEffectsが空で、Elevationが設計要素として保持されない |
| 命名 | できていない | Horizontal card_A/B 等の命名が保持されず、Containerが連続され追跡が難しい |
まとめ
- Claude Code to Figma経由で、実装結果をFigmaに反映できました。
- Figmaのデザインデータがなくコードのみが用意されている場合とても便利です。
- Material 3の設計情報（コンポーネント構造、Variables参照、命名）を保持したまま往復するのは難しく、Auto Layoutも部分的に残る形になりました。
- デザインシステムを維持して往復する用途では、1度の指示では再現が難しく追加の指示やプロンプトの調整が必要だと感じました。
ハマりメモ
今回の検証でちょっとハマってしまったので備忘のために書いておきます。
generate_figma_designは疎通確認のつもりで叩くとリクエストが大きくなりがちなので、編集は一切禁止と指示します。mcp.jsonはプロジェクト内の.vscode/mcp.jsonにあり、Figma MCPの接続先はtype: "http"/url: "http://127.0.0.1:3845/mcp"になっていた（= ローカルのFigma MCPサーバーを参照している）- VSCode側でサーバー状態が
Runningになり、Discovered 6 tools / 3 promptsと出れば、少なくとも「VSCode → Figma MCP」の疎通は成立している目安になる。 http://127.0.0.1:3845/mcpをブラウザで直接開くとInvalid sessionIdが返ることがあるが、これは失敗とは限らない（MCPはブラウザではなく、VSCodeなどのクライアントがセッション付きで呼ぶ前提のため）
破綻はありますが、こんなに簡単にAIを通じてFigmaとコードを行き来できるようになりとても驚いています。
今回の検証ではClaude Code to Figmaの理解とプロンプトスキルが足りないことを実感しました。
引き続きClaude CodeとFigmaについて勉強していきます。
最後までお読みいただきありがとうございました。
