Figma to Claude Code: The Designer's Playbook

1┌─────────────────────────────────────────────────────────────────────────┐
2│                                                                         │
3│   BEFORE (Handoff Hell)                AFTER (Vibe Coding)              │
4│   ────────────────────                 ───────────────────              │
5│                                                                         │
6│   Design                               Design                           │
7│      ↓                                    ↓                             │
8│   Spec doc                             Claude reads Figma directly      │
9│      ↓                                    ↓                             │
10│   Dev interprets                       You prompt: "Build this"         │
11│      ↓                                    ↓                             │
12│   Review                               Production code                  │
13│      ↓                                    ↓                             │
14│   Feedback loop ×10                    Ship 🚀                          │
15│      ↓                                                                  │
16│   "Close enough"                       Timeline: Minutes                │
17│                                                                         │
18│   Timeline: Weeks                                                       │
19│                                                                         │
20└─────────────────────────────────────────────────────────────────────────┘

1Figma.com → Click profile (top-left) → Settings → Security
2→ Personal access tokens → Generate new token → Copy immediately

1claude mcp add figma -e FIGMA_PERSONAL_ACCESS_TOKEN=figd_xxxxxxxxxx

1In Claude Code, type: /mcp
2You should see: figma ✓ connected

1┌─────────────────────────────────────────────────────────────────────────┐
2│                         YOUR FIGMA FILE                                 │
3├─────────────────────────────────────────────────────────────────────────┤
4│                                                                         │
5│   ┌─────────────────────────────────────────────────────────────────┐   │
6│   │  WHAT CLAUDE CAN READ                                           │   │
7│   ├─────────────────────────────────────────────────────────────────┤   │
8│   │  ✓ Layer names & hierarchy    ✓ Auto Layout settings           │   │
9│   │  ✓ Colors (fills, strokes)    ✓ Component variants             │   │
10│   │  ✓ Typography styles          ✓ Spacing & padding              │   │
11│   │  ✓ Effects (shadows, blur)    ✓ Constraints                    │   │
12│   │  ✓ Design tokens/variables    ✓ Text content                   │   │
13│   └─────────────────────────────────────────────────────────────────┘   │
14│                                                                         │
15│   ┌─────────────────────────────────────────────────────────────────┐   │
16│   │  WHAT CLAUDE CANNOT READ                                        │   │
17│   ├─────────────────────────────────────────────────────────────────┤   │
18│   │  ✗ Actual image pixels        ✗ Prototype interactions         │   │
19│   │  ✗ Comments & feedback        ✗ Version history                │   │
20│   └─────────────────────────────────────────────────────────────────┘   │
21│                                                                         │
22└─────────────────────────────────────────────────────────────────────────┘

1Read my Figma design at:
2https://www.figma.com/design/[YOUR-FILE-ID]/[FILE-NAME]
3
4Give me:
51. Overview of the page structure
62. List of main sections
73. Color palette being used
84. Typography styles
95. Any components you can identify

1From the Figma file, extract and create:
2
31. A Tailwind config with:
4   - Custom colors matching the design
5   - Font families and sizes
6   - Spacing scale based on what you see
7
82. CSS variables file as backup
9
10Format the colors as semantic names (primary, secondary, accent, neutral).

1Look at the [COMPONENT NAME] in my Figma file.
2
3Generate a React component that:
4- Matches the exact styling (colors, spacing, typography)
5- Uses Tailwind CSS
6- Supports all variants I've defined (if any)
7- Is fully typed with TypeScript
8- Includes hover/focus states based on the design

1Generate the [SECTION NAME] section from my Figma design.
2
3Requirements:
4- Match the design exactly
5- Make it responsive:
6  - Mobile (<768px): [describe layout]
7  - Desktop (≥768px): [describe layout]
8- Use semantic HTML (section, nav, main, article)
9- Include all text content from the design

1┌─────────────────────────────────────────────────────────────────────────┐
2│                           MCP IN ACTION                                 │
3└───────────────────────────────┬─────────────────────────────────────────┘
4                                │
5        ┌───────────────────────┼───────────────────────┐
6        ▼                       ▼                       ▼
7┌───────────────────┐  ┌───────────────────┐  ┌───────────────────┐
8│  FIGMA DESIGN     │  │     FIGJAM        │  │   FIGMA MAKE      │
9│  ─────────────    │  │  ─────────────    │  │  ─────────────    │
10│                   │  │                   │  │                   │
11│  Design files     │  │  Wireframes &     │  │  AI-generated     │
12│  → Production     │  │  user flows →     │  │  UI → Inject      │
13│  code             │  │  Working app      │  │  into codebase    │
14│                   │  │                   │  │                   │
15│  ⭐ MOST USED     │  │  🎯 POWERFUL      │  │  ⚡ FASTEST       │
16└───────────────────┘  └───────────────────┘  └───────────────────┘
17        │                       │                       │
18        ▼                       ▼                       ▼
19┌───────────────────┐  ┌───────────────────┐  ┌───────────────────┐
20│ "Build my landing │  │ "Read my user     │  │ "Take this Make   │
21│ page from this    │  │ flow and create   │  │ design and add it │
22│ Figma design"     │  │ the Next.js       │  │ to my existing    │
23│                   │  │ route structure"  │  │ portfolio app"    │
24└───────────────────┘  └───────────────────┘  └───────────────────┘

1STEP 1                    STEP 2                    STEP 3
2───────────────────────────────────────────────────────────────────
3"Read my design          "Generate base            "Build homepage
4system file and          components: Button,       using these
5extract all tokens"      Card, Input, Badge"       components"
6        │                        │                        │
7        └────────────────────────┴────────────────────────┘
8                                 │
9                                 ▼
10                    STEP 4: Add pages one by one
11                    "Now build the pricing page"
12                    "Now build the about page"

1"Read [URL], extract tokens, generate full page with all sections,
2make it responsive, use Next.js + Tailwind. Go."
3
4     ┌──────────────────────────────────────────────────────────┐
5     │  ⚠️  Works best when your Figma file is well-organized  │
6     │     with proper naming and Auto Layout throughout       │
7     └──────────────────────────────────────────────────────────┘

1┌─────────┐    ┌─────────┐    ┌─────────┐    ┌─────────┐    ┌─────────┐
2│ Tokens  │ → │ Atoms   │ → │ Molecules│ → │ Sections│ → │  Page   │
3│ (colors,│    │ (button,│    │ (card,  │    │ (hero,  │    │ (full   │
4│ fonts)  │    │ input)  │    │ nav)    │    │ footer) │    │ page)   │
5└─────────┘    └─────────┘    └─────────┘    └─────────┘    └─────────┘

1┌─────────────────────────────────────────────────────────────────────────┐
2│  NAMING                                                                 │
3│  [ ] Layers use semantic names         hero-section ✓   Frame 427 ✗    │
4│  [ ] Components are clearly named      Button/Primary ✓  Component 1 ✗ │
5│  [ ] Variants have descriptive props   size=lg ✓        variant=2 ✗    │
6├─────────────────────────────────────────────────────────────────────────┤
7│  STRUCTURE                                                              │
8│  [ ] Auto Layout on ALL containers     Flexbox ready ✓  Absolute mess ✗│
9│  [ ] Flat hierarchy (minimal nesting)  Clean DOM ✓      Div soup ✗     │
10│  [ ] Sections clearly separated        Easy parsing ✓   Chaos ✗        │
11├─────────────────────────────────────────────────────────────────────────┤
12│  TOKENS                                                                 │
13│  [ ] Colors defined as styles          Extractable ✓    Hardcoded ✗    │
14│  [ ] Typography as text styles         Consistent ✓     Random ✗       │
15│  [ ] Spacing is consistent             Systematic ✓     Arbitrary ✗    │
16└─────────────────────────────────────────────────────────────────────────┘

11. NAME LAYERS LIKE CSS CLASSES
2   nav-links ✓    Group 5 ✗
3
42. WORK SECTION BY SECTION
5   Hero → Features → Testimonials → Footer
6   (Don't ask for entire page at once)
7
83. REFERENCE FIGMA DIRECTLY
9   "Look at the card in the Features section"
10   (Not: "Create a card with rounded corners")
11
124. EXPORT ASSETS FIRST
13   Images need manual export → /public folder
14   Then tell Claude: "Hero image is at /public/hero.png"
15
165. SHARE YOUR STACK UPFRONT
17   "I'm using Next.js 14 + Tailwind + TypeScript"
18   (Claude will match your conventions)

1I want to convert my Figma design to code.
2
3Figma URL: [PASTE YOUR URL]
4
5Stack: Next.js 14 + Tailwind CSS + TypeScript
6
7Please:
81. First, analyze the design and tell me what you see
92. Extract the color palette and create a Tailwind config
103. Then I'll tell you which section to build first
11
12Let's go step by step.