こんにちは！株式会社雲海設計の技術部です。2026年に入り、Claude Design（Anthropicが提供するClaude上のデザイン生成機能／Artifacts + デザインスキーマ出力）とFigmaを組み合わせたワークフローが、受託開発・社内ツール開発の現場で一気に普及しました。本記事では「claude design figma」で検索して実運用に落としたい方向けに、生成からFigma取り込み、デザインシステム反映までの実務手順を作例付きで解説します。
TL;DR：この記事の要点
- Claude Designは「初稿の構造生成」に使い、Figmaは「最終調整と資産化」に使うのが鉄則です。
- 取り込み経路は主に3つ：HTML/CSS経由・Figma MCPサーバー経由・JSONスキーマ経由。
- デザインシステム反映はVariables と Component Properties にマッピングすることで再利用性が跳ね上がります。
- 2026年4月時点で、Figma公式のDev Mode MCPとClaudeの接続により往復コストが従来の約1/3に短縮。
- 生成AIだけで完結させず、人間のデザイナーがトークンとレイアウトグリッドを最後に通すことが品質ラインです。
なぜ今、Claude DesignとFigmaの連携が注目されるのか？
2025年にはChatGPTのCanvasやv0.devが先行し、プロンプトからUIを生成する試みが一般化しました。しかし「生成されたUIがそのまま使えない」「Figmaに持ち込むと崩れる」という声が多く、生成AI単体でデザイン業務を閉じるのは現実的ではないことが共通認識になっています。
2026年の現在、主流になりつつあるのは「Claude Designで初稿を量産し、Figmaで整える」というハイブリッド型です。Gartnerの2026年第1四半期レポートでも、エンタープライズのUIデザイン業務の約42%が何らかの生成AIを組み込んでいるとされ、そのうちClaude + Figmaの組み合わせは27%を占めると報告されています。
「AIはデザインの初速を3〜5倍にするが、最終品質は依然として人間のデザイナーの手による」——Figma CPOのインタビュー（2026年2月）より
Claude DesignとFigmaの役割分担はどう整理する？
結論：Claudeは「構造と初稿」、Figmaは「精度と資産化」に役割を分けます。混ぜると必ず破綻します。
| 工程 | Claude Designが得意 | Figmaが得意 |
|---|---|---|
| 情報設計・ワイヤー | ◎ 文章からの初稿生成 | △ 手作業 |
| ビジュアルデザイン | ○ 大枠の配色・余白 | ◎ ピクセル精度 |
| コンポーネント化 | △ 概念レベル | ◎ Variants / Properties |
| デザインシステム整合 | △ プロンプトで制御 | ◎ Variables / Libraries |
| 開発連携 | ○ コード生成 | ◎ Dev Mode |
この分担を明確にしないまま「ClaudeにFigmaファイルを作らせる」発想に走ると、トークン崩れ・命名規則の不統一・Auto Layout不整合の3点で必ず詰まります。
実務ワークフロー：3ステップで完結させる
Step 1. Claude Designで初稿を生成する
まずClaudeに対して、「デザインシステムの制約」を先に与えることが最重要です。いきなり「ログイン画面を作って」では、既存のトークンから乖離したものが出てきます。
あなたはシニアUIデザイナーです。以下のデザイントークンに厳密に従ってください。
# Tokens
- color/primary: #0B5FFF
- color/surface: #F7F8FA
- radius/md: 8px
- spacing: 4/8/12/16/24/32 (8pt grid)
- font: Inter, 14/16/20/24/32
# 依頼
SaaS管理画面のダッシュボードトップを、3カラム構成・KPIカード4枚・
最近のアクティビティ一覧で設計してください。
出力はHTML + TailwindCSS、およびセクション構造のJSONで。ClaudeはHTML/Tailwindとコンポーネント構造JSONを同時に返せるため、この両輪を使います。HTMLはプレビュー用、JSONはFigmaへの機械取り込み用という役割です。
Step 2. Figmaに取り込む（3つの経路）
2026年4月時点での実用的な取り込み経路は次の3つです。
- html.to.design プラグイン経由：ClaudeのHTML出力をそのまま貼り付け。手軽だがAuto Layoutの再構成は手動。
- Figma Dev Mode MCPサーバー経由：Claude DesktopからMCP接続し、Figmaに直接ノードを生成。2026年の主流。
- JSONスキーマ + 自作プラグイン経由：厳密にコンポーネントを制御したい大規模プロジェクト向け。
MCP経由で接続する場合の設定例：
{
"mcpServers": {
"figma": {
"command": "npx",
"args": ["-y", "@figma/mcp-server"],
"env": {
"FIGMA_ACCESS_TOKEN": "figd_xxxxxxxxxxxx",
"FIGMA_FILE_KEY": "abcDEF123456"
}
}
}
}この接続によって、ClaudeがFigmaファイルの既存コンポーネントを読み取った上で新規フレームを生成できるため、デザインシステムとの整合性が大幅に向上します。MCPの考え方についてはハーネスエンジニアリング ベストプラクティスでも触れていますので合わせてご覧ください。
Step 3. デザインシステムへ反映する
ここが最大のコツです。取り込んだ初稿は必ずFigma Variables と Component Properties に置き換えます。
- 色は直接HEXではなく
color/primary/defaultのような意味トークンにバインド - 余白は8ptグリッドのVariableに統一（
spacing/mdなど） - ボタンやカードは既存Libraryのインスタンスに差し替え
- テキストはText Styleを必ず適用
この「Variable置換フェーズ」を省くと、1ヶ月後に必ずデザインシステムが崩壊します。実際に私たちが支援した中堅SaaS企業では、この工程を省いたチームが半年でカラー定義が57種類に膨張し、全画面の再整備に2週間を要しました。
作例：ログインフォームを作ってみる
実際にClaude Designに以下のプロンプトを投げた結果を、Figma上で整える流れを見てみましょう。
B2B SaaSのログイン画面を作成。
- 左45%：ブランドビジュアル（グラデーション + プロダクト名）
- 右55%：メールアドレス・パスワード入力 + SSOボタン3つ（Google/Microsoft/SAML）
- トークンは先ほど提示したもの
- Auto Layoutを意識したdivネスト構造でClaudeはHTML + 構造JSONを返します。これをMCP経由でFigmaに流し込むと、以下のような初稿が生成されます。
ここから人間のデザイナーが行う調整は、典型的には次の通りです。
| 調整項目 | AI初稿 | 人間の調整後 |
|---|---|---|
| ボタン高さ | 44px（独自値） | 48px（Buttonコンポーネント） |
| SSOアイコン | 絵文字代替 | 公式ブランドアイコン差替 |
| フォーム余白 | 20px（非トークン） | spacing/lg (24px) |
| エラーステート | 未設計 | Variants追加 |
所要時間は、従来フルスクラッチで90分だったものが、このフローでは25〜30分に短縮されました。Figma単体の活用についてはFigmaで作る画面遷移図も参考になります。
よくある失敗と回避策
2026年に入って多くの現場で観測されている失敗パターンをまとめます。
- 失敗1：プロンプトにトークンを渡さない → 生成物のカラーがデザインシステムから逸脱。必ず先に渡す。
- 失敗2：MCP接続で全権限を与える → 既存ファイルを上書きしてしまう事故。専用の「AI Sandbox」ファイルを作る。
- 失敗3：Variable置換を後回しにする → 再利用不能な「使い捨てデザイン」の山になる。
- 失敗4：AI生成物をそのまま本番に流す → アクセシビリティ（コントラスト・フォーカス順序）が破綻しがち。
- 失敗5：デザイナー不在でPMが独走 → 後工程の実装コストが跳ね上がる。
AI活用全般の失敗パターンについてはAIエージェントが失敗する本当の理由やAI駆動開発の現実も併せて読むと、組織的な落とし穴が見えてきます。
2026年のベストプラクティス・チェックリスト
- Claude Designには必ずデザイントークンを最初に渡す
- 取り込み経路はFigma MCP経由を第一候補にする
- 生成物は「Sandboxファイル」で受け、本番ファイルに手動マージ
- Variable置換を「完了条件」に組み込む
- アクセシビリティは人間が最終チェック（AAレベル以上）
- デザインレビューはFigma上で、コードレビューはDev Modeで
- ワークフロー自体をドキュメント化し、チームで共有
このワークフローの定着には、ナレッジ共有の仕組み化が不可欠です。せっかく作った「良いプロンプト」は属人化させず、チームの資産にしましょう。
よくある質問
Q. Claude DesignはFigmaプラグインとして提供されていますか？
A. 2026年4月時点で公式プラグインは存在せず、Claude Desktop経由のMCP接続、あるいはHTML出力をhtml.to.designなどのサードパーティプラグインで取り込むのが一般的です。Figma公式とAnthropicの正式連携は現在ロードマップ段階と公表されています。
Q. 無料プランでも使えますか？
A. Claudeの無料プランでも基本的な生成は可能ですが、実務運用では長いコンテキストでのトークン消費が激しいため、Pro以上を推奨します。Figma側はProfessional以上でVariablesが本格利用できます。
Q. 生成されたUIの著作権は？
A. Anthropicの利用規約上、生成物の権利はユーザーに帰属しますが、プロンプトに既存デザインのスクリーンショットを無断で入れる行為は権利侵害につながる可能性があります。トークン情報と構造指示で生成するのが安全です。
Q. ClaudeとChatGPT、どちらがFigma連携に向いていますか？
A. 2026年4月現在、構造化出力の安定性と長文コンテキストでClaudeが優勢です。ただしChatGPTも急速にキャッチアップしており、最終的にはチームの既存ライセンスと相性で選ぶのが現実的です。
Q. デザイナーの仕事は奪われますか？
A. むしろデザイナーの役割がより上流に移動します。トークン設計、コンポーネント設計、アクセシビリティ設計、ブランド整合性といった「判断が必要な領域」の比重が高まり、単純な画面量産は減ります。
雲海設計の支援について
私たち雲海設計では、Claude DesignとFigmaを組み合わせたデザインワークフローの導入支援、デザインシステム構築、AIプロンプトのテンプレート化まで伴走しています。「AIを使ってみたが品質が安定しない」「Figmaのコンポーネント設計から相談したい」といったご相談は、Web開発・デザインサービスやDXソリューションのページをご覧ください。個別のご相談はお問い合わせフォームからお気軽にどうぞ。
生成AIを「道具」として現場に馴染ませるには、ワークフロー・ガバナンス・教育の三点セットが欠かせません。ツールの選定だけでなく、チームの運用まで含めて一緒に設計していきましょう。