Figma から Claude Code へ：デザイナーのためのプレイブック

1┌─────────────────────────────────────────────────────────────────────────┐
2│                                                                         │
3│   以前 (ハンドオフ地獄)                    以後 (バイブコーディング)               │
4│   ────────────────────                    ───────────────────              │
5│                                                                         │
6│   デザイン                               デザイン                              │
7│      ↓                                    ↓                             │
8│   仕様書                               Claude が Figma を直接読み取る             │
9│      ↓                                    ↓                             │
10│   開発者が解釈                           あなたがプロンプト：「これを構築して」        │
11│      ↓                                    ↓                             │
12│   レビュー                               プロダクションコード                    │
13│      ↓                                    ↓                             │
14│   フィードバックループ ×10              リリース 🚀                          │
15│      ↓                                                                  │
16│   「まあ似たようなもの」                タイムライン：数分                        │
17│                                                                         │
18│   タイムライン：数週間                                                       │
19│                                                                         │
20└─────────────────────────────────────────────────────────────────────────┘

1Figma.com → プロフィールをクリック (左上) → 設定 → セキュリティ
2→ 個人アクセストークン → 新しいトークンを生成 → すぐにコピー

1claude mcp add figma -e FIGMA_PERSONAL_ACCESS_TOKEN=figd_xxxxxxxxxx

1Claude Code で、次のように入力: /mcp
2次のように表示されるはず: figma ✓ connected

1┌─────────────────────────────────────────────────────────────────────────┐
2│                         あなたの FIGMA ファイル                            │
3├─────────────────────────────────────────────────────────────────────────┤
4│                                                                         │
5│   ┌─────────────────────────────────────────────────────────────────┐   │
6│   │  CLAUDE が読み取れるもの                                         │   │
7│   ├─────────────────────────────────────────────────────────────────┤   │
8│   │  ✓ レイヤー名と階層構造    ✓ Auto Layout 設定                      │   │
9│   │  ✓ 色 (塗り、線)           ✓ コンポーネントのバリアント               │   │
10│   │  ✓ タイポグラフィスタイル  ✓ 間隔とパディング                       │   │
11│   │  ✓ エフェクト (シャドウ、ブラー) ✓ 制約                            │   │
12│   │  ✓ デザイントークン/変数    ✓ テキストコンテンツ                     │   │
13│   └─────────────────────────────────────────────────────────────────┘   │
14│                                                                         │
15│   ┌─────────────────────────────────────────────────────────────────┐   │
16│   │  CLAUDE が読み取れないもの                                        │   │
17│   ├─────────────────────────────────────────────────────────────────┤   │
18│   │  ✗ 実際の画像ピクセル      ✗ プロトタイプのインタラクション             │   │
19│   │  ✗ コメントとフィードバック ✗ バージョン履歴                        │   │
20│   └─────────────────────────────────────────────────────────────────┘   │
21│                                                                         │
22└─────────────────────────────────────────────────────────────────────────┘

1次の Figma デザインを読み取って:
2https://www.figma.com/design/[YOUR-FILE-ID]/[FILE-NAME]
3
4以下を教えて:
51. ページ構造の概要
62. 主要セクションのリスト
73. 使用されているカラーパレット
84. タイポグラフィスタイル
95. 識別できるコンポーネント

1Figma ファイルから、以下を抽出して作成:
2
31. 以下の内容を含む Tailwind 設定:
4   - デザインに一致するカスタムカラー
5   - フォントファミリーとサイズ
6   - 見た内容に基づいたスペーシングスケール
7
82. バックアップ用の CSS 変数ファイル
9
10色はセマンティック名 (primary、secondary、accent、neutral) でフォーマットすること。

1Figma ファイル内の [COMPONENT NAME] を見て。
2
3以下の React コンポーネントを生成して:
4- 正確なスタイリング (色、間隔、タイポグラフィ) に一致すること
5- Tailwind CSS を使用すること
6- 定義したすべてのバリアントをサポートすること (ある場合)
7- TypeScript で完全に型付けされていること
8- デザインに基づいたホバー/フォーカス状態を含むこと

1Figma デザインから [SECTION NAME] セクションを生成して。
2
3要件:
4- デザインに完全に一致すること
5- レスポンシブにすること:
6  - モバイル (<768px): [レイアウトを説明]
7  - デスクトップ (≥768px): [レイアウトを説明]
8- セマンティック HTML (section、nav、main、article) を使用すること
9- デザインのすべてのテキストコンテンツを含むこと

1┌─────────────────────────────────────────────────────────────────────────┐
2│                          MCP の実際の動作                                │
3└───────────────────────────────┬─────────────────────────────────────────┘
4                                │
5        ┌───────────────────────┼───────────────────────┐
6        ▼                       ▼                       ▼
7┌───────────────────┐  ┌───────────────────┐  ┌───────────────────┐
8│  FIGMA デザイン   │  │     FIGJAM        │  │   FIGMA MAKE      │
9│  ─────────────    │  │  ─────────────    │  │  ─────────────    │
10│                   │  │                   │  │                   │
11│  デザインファイル  │  │  ワイヤーフレーム  │  │  AI 生成           │
12│  → プロダクション  │  │  & ユーザーフロー  │  │  UI → コードベース │
13│  コード           │  │  → 動作するアプリ  │  │  に注入           │
14│                   │  │                   │  │                   │
15│  ⭐ 最もよく使う   │  │  🎯 強力         │  │  ⚡ 最速          │
16└───────────────────┘  └───────────────────┘  └───────────────────┘
17        │                       │                       │
18        ▼                       ▼                       ▼
19┌───────────────────┐  ┌───────────────────┐  ┌───────────────────┐
20│ "この Figma       │  │ "このユーザー     │  │ "この Make        │
21│ デザインから      │  │ フローを読み取って│  │ デザインを        │
22│ ランディング      │  │ Next.js の        │  │ 既存のポートフォリオ│
23│ ページを構築して"  │  │ ルート構造を      │  │ アプリに追加して"  │
24│                   │  │ 作成して"         │  │                   │
25└───────────────────┘  └───────────────────┘  └───────────────────┘

1ステップ 1                  ステップ 2                  ステップ 3
2───────────────────────────────────────────────────────────────────
3"デザインシステム          "基本コンポーネントを       "これらのコンポーネント
4ファイルを読み取って       生成: Button、             を使ってホームページを
5すべてのトークンを          Card、Input、Badge"       構築して"
6抽出して"
7        │                        │                        │
8        └────────────────────────┴────────────────────────┘
9                                 │
10                                 ▼
11                    ステップ 4: ページを 1 つずつ追加
12                    "次に価格ページを構築して"
13                    "次にアバウトページを構築して"

1"[URL] を読み取って、トークンを抽出し、すべてのセクションを含む完全なページを生成して、
2レスポンシブにして、Next.js + Tailwind を使って。実行。"
3
4     ┌──────────────────────────────────────────────────────────┐
5     │  ⚠️  Figma ファイルが適切に整理され、適切な名前が付けられ、│
6     │     全体に Auto Layout が適用されている場合に最も効果的です  │
7     └──────────────────────────────────────────────────────────┘

1┌─────────┐    ┌─────────┐    ┌─────────┐    ┌─────────┐    ┌─────────┐
2│ トークン │ → │ 原子    │ → │ 分子    │ → │ セクション│ → │ ページ  │
3│ (色、   │    │ (ボタン、│    │ (カード、│    │ (ヒーロー、│    │ (完全な │
4│ フォント)│    │ 入力)   │    │ ナビ)   │    │ フッター)│    │ ページ) │
5└─────────┘    └─────────┘    └─────────┘    └─────────┘    └─────────┘

1┌─────────────────────────────────────────────────────────────────────────┐
2│  命名                                                                  │
3│  [ ] レイヤーはセマンティック名を使用      hero-section ✓   Frame 427 ✗   │
4│  [ ] コンポーネントは明確に命名            Button/Primary ✓  Component 1 ✗│
5│  [ ] バリアントには説明的なプロパティ      size=lg ✓        variant=2 ✗  │
6├─────────────────────────────────────────────────────────────────────────┤
7│  構造                                                                  │
8│  [ ] すべてのコンテナに Auto Layout       Flexbox 対応 ✓  Absolute mess ✗│
9│  [ ] フラットな階層 (最小限のネスト)       Clean DOM ✓      Div soup ✗   │
10│  [ ] セクションは明確に分離               Easy parsing ✓   Chaos ✗      │
11├─────────────────────────────────────────────────────────────────────────┤
12│  トークン                                                              │
13│  [ ] 色はスタイルとして定義               Extractable ✓    Hardcoded ✗   │
14│  [ ] タイポグラフィはテキストスタイルとして  Consistent ✓     Random ✗    │
15│  [ ] 間隔は一貫性がある                   Systematic ✓     Arbitrary ✗  │
16└─────────────────────────────────────────────────────────────────────────┘

11. レイヤーを CSS クラスのように命名する
2   nav-links ✓    Group 5 ✗
3
42. セクションごとに作業する
5   Hero → Features → Testimonials → Footer
6   (一度にページ全体を依頼しない)
7
83. Figma を直接参照する
9   "Features セクションのカードを見て"
10   (「角丸のカードを作成して」ではない)
11
124. まずアセットをエクスポートする
13   画像は手動エクスポートが必要 → /public フォルダ
14   その後 Claude に伝える：「ヒーロー画像は /public/hero.png にあります」
15
165. 使用するスタックを事前に共有する
17   "Next.js 14 + Tailwind + TypeScript を使っています"
18   (Claude があなたの規則に合わせます)

1Figma デザインをコードに変換したいです。
2
3Figma URL: [あなたの URL を貼り付け]
4
5スタック: Next.js 14 + Tailwind CSS + TypeScript
6
7以下をお願いします：
81. まずデザインを分析し、何が見えるか教えてください
92. カラーパレットを抽出し、Tailwind 設定を作成してください
103. その後、どのセクションから最初に構築するか指示します
11
12ステップバイステップで進めましょう。