Two hours. That is how long it took me to go from a blank terminal to an interactive app with hover states, micro animations, and a working design system, without opening Figma once. Then I pushed the finished screens back into Figma as editable layers.
If you are a designer, that sentence probably reads backwards. It read backwards to me too, and I have shipped design-to-code handoffs for the better part of a decade. But after wiring the Figma MCP server into my Claude toolchain and living with it for months, I now believe the default direction has flipped for a specific class of product work: code is the draft, Figma is the documentation. Here is the workflow, what it is genuinely good at, and the three places it still falls on its face.
Why the Old Direction Was Always Lossy
The traditional pipeline, design in Figma, hand off, wait, receive something that resembles the mockup, has a structural flaw that has nothing to do with anyone's skill: a Figma frame is a picture of software, and a picture cannot answer behavioral questions. What happens at 200 percent text zoom? What does the empty state look like with a 40-character German string? How does the hover state feel at 60fps versus 30?
Every one of those answers gets invented twice, once implicitly by the designer and once explicitly by the developer, and the two inventions never match. That gap is where the three weeks go.
Code-first inverts it. The first artifact is already the real thing: real breakpoints, real motion curves, real content overflow. Figma re-enters at the end, as the durable, commentable record of what actually shipped.
The Setup: Claude Code Plus the Figma MCP Server
The bridge is MCP. Figma's MCP server is connected into my Claude environment alongside my other connectors, and it works in both directions: Claude can read design context out of a Figma file (variables, components, layout data, screenshots), and it can write designs into Figma, generating new files and editable layers from code or from intent.
That second direction is the one that changes the workflow. If you have not touched MCP before, I wrote a plain-English explainer on how MCP turns a chatbot into an agent; the one-paragraph version is that MCP gives Claude typed tools instead of copy-paste, so "push these four screens to a new Figma file" is a tool call, not an export ritual.
Hour One: The Design System Comes First, in Code
I do not start with screens. I start by asking Claude Code for tokens: a color scale built around my brand green #38D39F, a type ramp pairing Instrument Sans for UI with DM Serif Display for headlines, spacing on a 4px base, radii, and shadows, all as CSS custom properties in one file. This is not hypothetical: my own site's blog surfaces run on exactly this kind of token layer, and it went through this workflow when I redesigned them.
Tokens-first matters for a reason specific to working with a model. When every subsequent prompt says "use the tokens," the agent stops inventing one-off hex values and margins, which is precisely the class of inconsistency that makes AI-generated UI look like AI-generated UI. It is the same principle behind the design system workflow that stopped giving me slop.
With tokens in place, components come fast: button variants, cards, inputs, a nav. Each one is real, focus rings, keyboard states, transition timing, because it costs the model nothing extra to make the real thing.
Hour Two: Screens, Motion, and the Push Back to Figma
Screens assemble from components in minutes each, and this is where code-first stops being a novelty and starts being better: I test the pricing table with a 9-item plan and a 2-item plan, the dashboard with zero data, the header at 360px, all live, all before any "handoff" exists. Motion gets tuned by feel in the browser, not approximated with a prototype arrow.
Then the sync step. I tell Claude to push the finished screens to Figma, and the MCP server creates a file with editable layers, real text nodes, frames, and components rather than flattened screenshots. From there the file behaves like any Figma file: comments, iteration, stakeholder review, a place for the design team to explore variants that then round-trip back as code changes.
For fine-grained polish passes after the push, I run the Impeccable design skill against the live pages; it catches hierarchy and contrast issues faster than my eyes do at hour two of a build.
What This Workflow Cannot Do Yet
Three honest limits, learned by hitting them.
Novel visual identity. Code-first excels when a design language exists or is derivable from tokens. It is the wrong tool for the exploratory, moodboard phase of inventing a brand. Divergent exploration is still faster as design, and Figma reading into Claude Code covers that direction well; my Figma-to-code workflow is exactly that pipeline run forwards.
Layer semantics on the push. The generated Figma layers are editable, but their structure reflects the code's structure. A designer inheriting the file will want a grouping pass before deep rework. It is a tidy-up, not a rebuild, but it is real time.
Taste. The model composes competently and plagiarizes the median of the internet's aesthetics. The 2-hour number is honest, but it includes me rejecting roughly a third of first attempts. Code-first moves the taste decisions earlier and makes them cheaper; it does not delegate them.
What Designers Should Actually Measure
If you evaluate this workflow, do not measure "did the AI make something pretty." Measure the round-trip time of a design decision: how long from "the card needs more breathing room" to seeing it in the real product, in real breakpoints, with real content. In the handoff world that loop was days. In this workflow it is under a minute, and the Figma file stays truthful because it is generated from the shipped thing rather than aspiring to it.
That is the actual headline, more than the two hours: the mockup and the product can no longer disagree, because one is derived from the other.
Try It on Something Real
Start small: tokens, three components, one screen, one push to Figma. You will know within an afternoon whether the inversion fits your team. And if you would rather see it applied than experiment from scratch, this code-first design system build is part of what I do for clients, from Laravel products to full brand-consistent UI overhauls. Have a look at my services and bring me the screen your team has redesigned three times; that one is always the best test case.
