second-brain

figma

10 min read

Figma

Visual design tool and AI platform for UI/UX work; increasingly a bidirectional bridge between design and code via Figma MCP.

Last updated: 2026-04-13

Overview

Figma is the dominant collaborative design tool for digital products. In the agentic era its role is shifting: from primary creation surface to a design-to-code and code-to-design bridge via its MCP integration with Claude Code. Most working designers are still in Figma-first workflows; more advanced users are going straight to Claude Code and only returning to Figma for collaboration, comments, and design system polish.

Felix Lee (CEO, ADPList) — who built three full products using Claude Code in 3.5 months — never opened Figma for any of them. His view: “The use case of Figma really isn’t what it was a year ago or even a few months ago.”

Figma MCP

Figma’s official MCP connects Figma/FigJam directly to Claude Code. Two main workflows:

1. Design → Code (primary use case)

Workflow:

  1. Create or open a design in Figma
  2. Switch to Dev Mode
  3. Copy the frame/component link
  4. In Claude Code: implement this design from Figma: [link]
  5. Claude Code reads the Figma file via MCP — including all assets, colors, fonts, icons (as vectors/SVGs, not screenshots)
  6. Outputs working HTML/CSS/JS

Key advantage over screenshot approach: MCP automatically provides all assets in editable vector form. Screenshot-based approaches require back-and-forth to get individual assets. MCP gives everything in one shot.

Time: Felix implemented a full landing page in ~15 minutes.

2. FigJam Flow → Code

Draw a flowchart or user flow in FigJam (using FigJam AI to generate the flowchart from a text prompt if you want), then point Claude Code at it:

using the Figma flow chart at [link], build a [Flappy Bird game / onboarding flow / etc.]

Claude fetches the FigJam board via MCP and uses it as the spec. Works even for non-trivial flowcharts.

3. Code → Figma (new as of early 2026)

Export a running localhost app back into Figma as editable vector components:

export this to a Figma file using Figma MCP

Claude reads your running app, converts elements to SVG/vector layers inside a new Figma file. All elements are editable — colors, shapes, icons — not just screenshots. The limitation: layer names are auto-generated and messy; needs cleanup. Felix’s take: “Good for a first version.”

The irony: the workflow becomes Code → Figma → Claude Code again, since you still need to ship. The use case is more about design handoff, collaboration, and stakeholder review than primary development.

4. Component Generation with Variants

Point Claude at a Figma file + your codebase; ask it to create a component:

create the card component in Figma using the Figma MCP. Here is the link: [link]. Make it an adjustable component.

Claude reads the component logic from your code, creates it in Figma with all variants and toggles (boolean properties, categories, states). A designer can then go in, clean up visual details, and push changes back to code. Closes the “missing variant documentation” gap that was common before.

5. Fidelity Comparison + Annotation

Compare Figma design intent vs. as-built code, annotated on canvas:

compare the difference between this Figma frame [link] and the login screen of my app. Annotate the differences with severity (high/medium/low).

Claude generates a new frame showing as-built alongside design, with annotations for every discrepancy. Can flag component overrides, spacing deviations, and even drop comments directly on the canvas (via Figma REST API — requires a personal access token from Figma admin).

6. State Explosion

Generate all states of a flow in Figma from code:

generate design frames in this Figma file for each state of the login flow

Claude reads the code logic, creates a frame per state, and adds fidelity notes on canvas — documenting what it built, what components it linked, what it had to manually rebuild (no library component available), and known issues requiring manual cleanup.

7. Variable / Token Management

Generate Figma variables from a local JSON token file:

generate my variables in this Figma file based on the JSON files in the current directory

Raw prompting creates one collection per file (not ideal). Use the community skill cc-figma-tokens to get properly structured output with modes (dark/light) handled correctly.

Setup

claude plugin install figma   # installs MCP + foundational skills in one shot

Then in Claude Code: /figma/mcp — verify Figma is connected and authenticated. The install command handles authentication prompts automatically.

Claude Code Desktop: A GUI version of Claude Code with no terminal required. Same capabilities. Better entry point for designers uncomfortable with the terminal.

Figma Make

Figma’s native AI feature for generating designs from text prompts inside Figma. Lower barrier than Claude Code — no terminal, no IDE.

Figma MakeClaude Code + Figma MCP
Barrier to entryLow (stays in Figma)Higher (terminal/IDE)
Output qualityGood for explorationSignificantly higher (Felix: “Claude Code just wins on taste”)
Skills/reasoningNoneFull skill files, deep reasoning
AssetsStays in FigmaVia MCP
Who’s using itMost designers todayAdvanced/technical users

Felix on Figma Make: rising adoption among designers, but “Figma Make is not really Claude Code because it doesn’t have all these deep skills.” Designers are over-reliant on Figma Make when Claude Code would produce dramatically better output.

When to Use Figma vs. Go Straight to Code

SituationRecommendation
Complex existing design systemFigma first — preserve component fidelity
Exploratory/new UIGo straight to Claude Code; iterate in code
Collaboration/stakeholder reviewFigma (comments, version history, sharing)
Dashboard with real data/chartsCode first — Figma can’t preview real chart rendering
Landing pages and marketing sitesClaude Code with Figma MCP if you have a design
Redesigning existing codeScreenshot into Figma for audit, then iterate in code

For the ECharts dashboard use case specifically: skip Figma. ECharts renders in browser; design in code so you see real chart output at every step. Figma mocks of charts are always wrong — wrong proportions, wrong interactivity, wrong data density.

For redesigning existing UI: Screenshot existing screens → import to Figma for annotation and comparison → then use Claude Code (with Figma MCP if you’ve redesigned in Figma) to implement. Figma is useful as the comparison and annotation layer, not the primary creation surface.

Figma Canvas as Cheap Exploration (Spotlight vs. Lantern)

Brett (Figma): spotlight vs. lantern mode.

  • Spotlight = code and agent workflows — focused, building toward a specific outcome, cost per token
  • Lantern = Figma canvas — shining light in all directions, cheap divergent exploration, no token cost

Key implication: Figma canvas exploration is free. AI token exploration is not. Know when to use which:

  • Diverging, exploring, ideating → Figma canvas (option-drag, duplicate, annotate)
  • Once you’ve converged on a direction → Claude Code to implement

When you associate cost with something (tokens), it becomes precious and harder to discard. Figma protects your exploration budget. This is one of the clearest practical arguments for keeping Figma in the workflow even if you’re Claude Code-first.

Skills for Design Work in Claude Code

Foundational Skills (from Figma)

  • figma-use — installed automatically with claude plugin install figma. Teaches Claude how to interact with the Figma Plugin API: structure, variables, components, layers. Required foundation for any write-to-Figma workflow.
  • cc-figma-tokens — community skill for variable/token management. Generates proper multi-mode (dark/light) variable collections from JSON token files. Install from Figma community skills.

Building Your Own Skills

Ask Claude to build a skill by interviewing you:

I want to make a skill that describes my design system.
Interview me in depth using the ask user question tool.

This generates a skill tailored to your specific system rather than a generic one.

Composable Skills

Skills can be small and layered — Claude mixes and matches them as needed. Think of it like a component library: small composable pieces are more flexible than one monolithic skill. Reference one skill from another to build compound knowledge.

A design review panel pattern: create separate skills for UX researcher, UI designer, and visual polisher. Invoke them together as a “council of reviewers.”

Gotcha Sections

When Claude makes a consistent mistake, add it as a gotcha in the skill:

## Gotchas
- Badges should be ellipses, not circles — if you're making a badge, check the border-radius
- Font weight 500 is "medium", not "semibold" in our system

Gotchas are the fastest path from “it keeps getting this wrong” to “it never gets this wrong.”

Prompting Philosophy

  • Be specific — ambiguous prompts (“make it look better”) produce mediocre results. One or two words can completely change output.
  • Give freedom + specifics — don’t over-constrain. Describe what you want, not exactly how to do it.
  • Be honest about uncertainty — “I don’t know what I want, interview me” produces better results than guessing at a vague direction.
  • Explicitly invoke skills — Claude will try to find the right skill, but being explicit is more reliable. Say “using the UX reviewer skill.”
  • “Use your taste” — a surprisingly effective prompt when you want Claude to make judgment calls rather than ask.

Skills as Cross-Functional Knowledge

Skills are now the medium for transferring knowledge across PM/Design/Eng:

  • A designer can write a skill that teaches engineers how to generate Figma-compatible components
  • An engineer can write a skill that helps designers understand terminal constraints
  • A PM can write a skill encoding the product brief format designers need

Tariq (Anthropic): “Someone might know how to use variables. Skills are a way of building on top of each other’s knowledge.”

Taste Is Hard to Codify

Felix spent 2+ weeks (4 hours/day) trying to build a skill file that replicates design taste. His conclusion: “It’s just been really hard. I can see where people are coming from that it’s not possible. I don’t think it’s impossible but let’s see.”

The problem: AI treats everything as high quality. You can’t write a rule for “don’t be slop” because the model can’t reliably tell what slop is — especially visually. Text slop is largely solved; visual slop still has room to go.

This validates the design-taste-craft framework: taste is a human filtering function that currently cannot be fully offloaded.

Designer Adoption Landscape (as of early 2026)

From Felix’s ADPList data (55,000+ mentor bookings/month):

  • Conversations about Claude Code/deep AI tools: up only 10–20% in the past 6 months
  • Figma Make: clearly rising
  • Most designers are not freaked out enough. Workflow hasn’t drastically changed for the majority.

Main barriers for designers adopting Claude Code:

  • Terminal and IDE look daunting (high psychological barrier)
  • Figma Make scratches enough of the itch to delay urgency
  • Most aren’t practicing outside of work

Connections

  • design-taste-craft — taste/craft/POV is the human layer that Figma MCP doesn’t replace; taste codification is an open problem
  • thin-harness-fat-skills — UX reviewer skill as an example of fat skill; Figma MCP as a thin harness tool
  • product-trio-agentic-era.md — designer role shift: from maker to taste-judge and evaluator
  • dylan-field — Figma CEO; design-to-code vision; diverge/converge framing
  • felix-lee — ADPList CEO; practitioner who built production apps entirely without Figma
  • openclaw — similar pattern: MCP tools as the integration layer between agents and external systems

Sources

Graph View

Backlinks