---
title: "Figma MCP Designer Workflow — Felix Lee Demo"
aliases: [figma-mcp-designer, claude-code-designer-workflow, figma-to-code-demo]
tags: [claude-code, figma, mcp, design, workflow, skills, figjam]
sources: [raw/How to Design and Code with Claude Code and Figma MCP in 50 Min  Felix Lee.md]
created: 2026-05-15
updated: 2026-05-15
---

# Figma MCP Designer Workflow — Felix Lee Demo

Practical walkthrough by Felix Lee (CEO, ADPList) on using Claude Code + Figma MCP as a designer. Covers four concrete workflows: design-to-code, FigJam-to-game, UX reviewer skill, and code-to-canvas.

## Why Claude Code over other coding agents

- Higher quality output than Gemini AI Studio, Cursor Codex — "from a taste perspective, Claude Code just wins"
- Same model (e.g. Opus 4.6) in Cursor vs Claude Code produces **surprisingly different output** — Claude Code native wins
- Use Claude Code as the AI brain; use Cursor only as a file/preview pane if needed

## Workflow 1 — Figma Design → Working Website (15 min)

1. Open the Figma frame in **Dev Mode**
2. Copy the example prompt ("implement this design from Figma") from the Dev Mode panel
3. Paste into Claude Code terminal — Figma MCP auto-fetches all assets (images, icons, colors, fonts)
4. Iterate with follow-up prompts: after-state, logo fix, sticky elements
5. Total time: ~10–15 min for a functional landing page

**Key advantage of MCP over screenshot:** MCP fills all assets automatically. Screenshot approach requires back-and-forth to supply every icon/image manually.

## Workflow 2 — FigJam Flowchart → Working Game

1. Use FigJam AI to generate a flowchart (e.g. "draw a flowchart of a simple Flappy Bird game")
2. Copy the FigJam board link
3. Prompt: `"using this Figma flow chart, build the Flappy Bird game"` — paste the link
4. Claude Code calls `get_figjam` MCP tool, reads the board, then scaffolds the game
5. Result: playable HTML game with animations, scoreboard, difficulty settings — in minutes

**Caveat:** For well-known games (Flappy Bird, Tetris), the model likely knows the rules already. The flowchart mainly steers app structure, not core mechanics.

## Workflow 3 — UX Reviewer Skill

Prompt Claude Code to create the skill:
```
Create a Claude skill for a UX reviewer.
Review screenshots and mockups.
Keep it flexible, for designers or mixed teams.
```

- Claude generates a `ux-reviewer.md` skill file with structured instructions
- To use: `review this screenshot using the UX reviewer skill` — **must name the skill explicitly**, otherwise Claude ignores it and gives generic feedback
- A "council of advisors" pattern: create separate skills per role (UX researcher, UI designer, visual polisher) and run them in sequence or simultaneously

**Skill = a markdown file of structured instructions.** Write it yourself or have Claude generate it; open-source skill libraries on GitHub are also worth checking.

## Workflow 4 — Code to Canvas (Figma's new feature)

- Run app on localhost, then prompt: `export this to a Figma file using Figma MCP`
- Claude calls `generate_figma_design` — creates a new Figma file with the captured UI
- Output: **editable vectors/SVGs**, not screenshots — colors, shapes, icons are all editable components
- Limitation: layer names are auto-generated and messy (all named "icon", "group", etc.)

**Controversy:** The roundtrip (code → canvas → code) is circular. Designers want the opposite: Figma → full-stack app with database and backend. Code-to-canvas is useful mainly for design system synchronisation and design tweaks after the fact.

## Practical Apps Built With This Stack

| App | Complexity | Time | Notes |
|-----|-----------|------|-------|
| Personal website (felixlee.dev) | Dark/light mode, RAG AI chat, Supabase | Days | Good starter project — no client pressure |
| ADPList Rep Globe | 3D animated globe + live data from AWS CSV | ~12 hrs | Screenshot of Shopify globe as reference; no 3D asset used |
| Growth Analyzer | Landing page scorer, Stripe payments, Google auth | ~48 hrs / 3 wks | Hardest part: visual hotspot placement (Gemini Pro best for this) |

## Designer Adoption Landscape

- Most designers are **not freaked out enough** — still Figma-only, workflow unchanged
- ADPList data: only ~10–20% increase in Claude Code/Cursor conversations among designers in 6 months
- Main barrier: terminal + IDE looks daunting to non-coders
- Designers over-rely on Figma Make (less capable, no deep skills/MCP)
- Prediction: design systems will be the primary surviving Figma use case as LLMs get better at pixel-perfect fidelity

## Key Takeaways

- **Figma MCP pays off most for assets** — it eliminates the manual asset-supply loop that screenshot-only workflows require
- **Explicitly invoke skills by name** in prompts; Claude won't auto-activate them reliably
- **FigJam → code** works today, but the model's prior knowledge does the heavy lifting for common app types
- **Code → canvas** is useful for design-system sync, not as a daily workflow
- **Taste replication is unsolved** — even 4 hrs/day for 2 weeks couldn't reliably replicate a specific designer's aesthetic
- Designers who adopt Claude Code early gain a significant speed advantage; those who stay Figma-only risk being bottlenecked

## Related Articles

- [[wiki/claude-code/figma-mcp-guide|Figma MCP Guide — overview and capabilities]]
- [[wiki/claude-code/figma-mcp-setup|Figma MCP Setup — remote vs desktop variants]]
- [[wiki/claude-code/figma-mcp-code-to-canvas|Code to Canvas — generate_figma_design flow]]
- [[wiki/claude-code/figma-mcp-skills|All 8 Figma MCP skills]]
- [[wiki/claude-code/skills|Skills system — creation, storage, invocation]]

## Sources

- Raw: `raw/How to Design and Code with Claude Code and Figma MCP in 50 Min  Felix Lee.md`
- Original video: YouTube — Felix Lee × Peter Yang, published 2026-03-22
