Claude Code x Figma MCP: The Designer's Playbook

Your design to production workflow is delaying launches by 3x.

Hey there! This is an ⭐️ exclusive open edition of AI-First Designer ⭐️, to help designers transition into successful AI-First builders. Members get access to proven strategies, frameworks, and playbooks.

For more: 🔥 Apply to learn Vibe-Coding for Designers Course 🔥 | Claim your AI Design Guide for free | Get free 1:1 mentorship

---

⭐️ NEW: I’m starting an Instagram for designers who vibe-code (come build with me)

@felixleezd

Felix Lee on Instagram: "DAY 100 of vibe-coding as a designer.
…

If you’ve been reading this newsletter, you know I’m obsessed with what happens when designers start vibe-coding.

Now I’m taking it to Instagram 🎉 → short-form breakdowns of everything I’m building, the prompts behind it, what worked, and what I’d do differently.

Think of it as the visual companion to this newsletter: faster, messier, and way more behind-the-scenes. Whether you’re a designer dipping your toes into AI-assisted coding or a non-coder who wants to actually ship things, this is your corner of the internet now.

---

On to today’s guide →

Friends,

Your design to production workflow is delaying launches by 3x.

Everything you know about handing off to developers is wrong, because Figma MCP makes shipping 5x faster now.

After 100 days of vibe-coding as a designer, I found this to be the smoothest workflow for completing designs 5x faster (and with higher quality).

The new way: You ship it yourself! (bookmark this if you haven’t read it yet)

Felix Lee@felixleezd

Designers, this is the highest leverage skill you can learn this year. The future of design is here. Don't fall behind.

4:04 PM · Feb 8, 2026 · 231K Views

---

15 Replies · 69 Reposts · 1.18K Likes

Now, when you use Figma MCP, Claude Code can read your actual Figma -> every color, every spacing, component variant.

Literally no more design-to-dev translation loss.

I built this game in a one-shot using Figma MCP <> Claude Code. It’s insanely mind-blowing.

Felix Lee@felixleezd

Day 32 of vibe-coding as a designer I built a full Tetris game 👾 from a FigJam flowchart using Figma MCP - one shot! 🤯 Try it yourself.

5:00 PM · Jan 29, 2026 · 6.23K Views

---

7 Replies · 4 Reposts · 71 Likes

And a diagram to show you the 2026 workflow:

┌─────────────────────────────────────────────────────────────────────────┐
│                                                                         │
│   BEFORE (Handoff Hell)                AFTER (Vibe Coding)              │
│   ────────────────────                 ───────────────────              │
│                                                                         │
│   Design                               Design                           │
│      ↓                                    ↓                             │
│   Spec doc                             Claude reads Figma directly      │
│      ↓                                    ↓                             │
│   Dev interprets                       You prompt: "Build this"         │
│      ↓                                    ↓                             │
│   Review                               Production code                  │
│      ↓                                    ↓                             │
│   Feedback loop ×10                    Ship 🚀                          │
│      ↓                                                                  │
│   "Close enough"                       Timeline: Minutes                │
│                                                                         │
│   Timeline: Weeks                                                       │
│                                                                         │
└─────────────────────────────────────────────────────────────────────────┘

No coding background required.

Here, I wrote a 101 guide on everything you need to know about working with Figma MCP and Claude Code.

Let’s set it up.

---

Part 1 > How to set up Figma MCP

Step 1: Get your Figma Token

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

Step 2: Connect to Claude Code

claude mcp add figma -e FIGMA_PERSONAL_ACCESS_TOKEN=figd_xxxxxxxxxx

Step 3: Verify connection

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

---

Part 2 > How Claude Code sees your Figma

┌─────────────────────────────────────────────────────────────────────────┐
│                         YOUR FIGMA FILE                                 │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                         │
│   ┌─────────────────────────────────────────────────────────────────┐   │
│   │  WHAT CLAUDE CAN READ                                           │   │
│   ├─────────────────────────────────────────────────────────────────┤   │
│   │  ✓ Layer names & hierarchy    ✓ Auto Layout settings           │   │
│   │  ✓ Colors (fills, strokes)    ✓ Component variants             │   │
│   │  ✓ Typography styles          ✓ Spacing & padding              │   │
│   │  ✓ Effects (shadows, blur)    ✓ Constraints                    │   │
│   │  ✓ Design tokens/variables    ✓ Text content                   │   │
│   └─────────────────────────────────────────────────────────────────┘   │
│                                                                         │
│   ┌─────────────────────────────────────────────────────────────────┐   │
│   │  WHAT CLAUDE CANNOT READ                                        │   │
│   ├─────────────────────────────────────────────────────────────────┤   │
│   │  ✗ Actual image pixels        ✗ Prototype interactions         │   │
│   │  ✗ Comments & feedback        ✗ Version history                │   │
│   └─────────────────────────────────────────────────────────────────┘   │
│                                                                         │
└─────────────────────────────────────────────────────────────────────────┘

---

Part 3 > full proven workflow template

Phase 1: Analyze your full design 🧪

Read my Figma design at:
https://www.figma.com/design/[YOUR-FILE-ID]/[FILE-NAME]

Give me:
1. Overview of the page structure
2. List of main sections
3. Color palette being used
4. Typography styles
5. Any components you can identify

Phase 2: Extract design tokens 🪙

From the Figma file, extract and create:

1. A Tailwind config with:
   - Custom colors matching the design
   - Font families and sizes
   - Spacing scale based on what you see

2. CSS variables file as backup

Format the colors as semantic names (primary, secondary, accent, neutral).

Phase 3: Generate components ⚡️

Look at the [COMPONENT NAME] in my Figma file.

Generate a React component that:
- Matches the exact styling (colors, spacing, typography)
- Uses Tailwind CSS
- Supports all variants I've defined (if any)
- Is fully typed with TypeScript
- Includes hover/focus states based on the design

Phase 4: Build full sections 🖥️

Generate the [SECTION NAME] section from my Figma design.

Requirements:
- Match the design exactly
- Make it responsive:
  - Mobile (<768px): [describe layout]
  - Desktop (≥768px): [describe layout]
- Use semantic HTML (section, nav, main, article)
- Include all text content from the design

---

Part 4 > the 3 main Figma MCP use cases

┌─────────────────────────────────────────────────────────────────────────┐
│                           MCP IN ACTION                                 │
└───────────────────────────────┬─────────────────────────────────────────┘
                                │
        ┌───────────────────────┼───────────────────────┐
        ▼                       ▼                       ▼
┌───────────────────┐  ┌───────────────────┐  ┌───────────────────┐
│  FIGMA DESIGN     │  │     FIGJAM        │  │   FIGMA MAKE      │
│  ─────────────    │  │  ─────────────    │  │  ─────────────    │
│                   │  │                   │  │                   │
│  Design files     │  │  Wireframes &     │  │  AI-generated     │
│  → Production     │  │  user flows →     │  │  UI → Inject      │
│  code             │  │  Working app      │  │  into codebase    │
│                   │  │                   │  │                   │
│  ⭐ MOST USED     │  │  🎯 POWERFUL      │  │  ⚡ FASTEST       │
└───────────────────┘  └───────────────────┘  └───────────────────┘
        │                       │                       │
        ▼                       ▼                       ▼
┌───────────────────┐  ┌───────────────────┐  ┌───────────────────┐
│ "Build my landing │  │ "Read my user     │  │ "Take this Make   │
│ page from this    │  │ flow and create   │  │ design and add it │
│ Figma design"     │  │ the Next.js       │  │ to my existing    │
│                   │  │ route structure"  │  │ portfolio app"    │
└───────────────────┘  └───────────────────┘  └───────────────────┘

Figma MCP (FigJam) x Claude Code - from my AI First Designer School Tutorial

---

Part 5 > power user workflows for each

Workflow A: Design System → Full Site

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

Workflow B: speedrun a single page

"Read [URL], extract tokens, generate full page with all sections, 
make it responsive, use Next.js + Tailwind. Go."

     ┌──────────────────────────────────────────────────────────┐
     │  ⚠️  Works best when your Figma file is well-organized  │
     │     with proper naming and Auto Layout throughout       │
     └──────────────────────────────────────────────────────────┘

Workflow C: component first (for matured designers)

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

---

Part 6 > Figma checklist (before you start)

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

🔖 (Recommended) You definitely want to bookmark this.

Some final pro-tips on using Figma MCP

1. NAME LAYERS LIKE CSS CLASSES
   nav-links ✓    Group 5 ✗

2. WORK SECTION BY SECTION  
   Hero → Features → Testimonials → Footer
   (Don't ask for entire page at once)

3. REFERENCE FIGMA DIRECTLY
   "Look at the card in the Features section"
   (Not: "Create a card with rounded corners")

4. EXPORT ASSETS FIRST
   Images need manual export → /public folder
   Then tell Claude: "Hero image is at /public/hero.png"

5. SHARE YOUR STACK UPFRONT
   "I'm using Next.js 14 + Tailwind + TypeScript"
   (Claude will match your conventions)

Quick start reference:

I want to convert my Figma design to code.

Figma URL: [PASTE YOUR URL]

Stack: Next.js 14 + Tailwind CSS + TypeScript

Please:
1. First, analyze the design and tell me what you see
2. Extract the color palette and create a Tailwind config
3. Then I'll tell you which section to build first

Let's go step by step.

And you’re all ready to go. 😉🔥 Thank you for reading!

This article is based on my full Vibe-Coding course (if you’d like to learn more and also support this). It includes:

1. Installation walkthroughs (Mac + Windows)

2. Claude Code + Cursor orientation

3. First project tutorial

4. GitHub + version control

5. Vercel deployment

6. Custom domains

7. Supabase + OpenAI integration

8. NEW chapters on AI agents and Figma MCP!

🏛️ Apply to join our community (AI-first designer school) as a founding member (full courses available): https://adplist.org/vibe-code-designers

If you find this guide helpful, ❤️ Like this to come back again, and 🔄 repost or forward it and share your thoughts. Because more designers can learn to build.

See you next week!

- Felix
let’s connect on LinkedIn!