8 October 2026

Figma to code with AI agents: what Reddit says actually works

Quick answer: Pointing an AI coding agent at Figma through MCP does not solve the Figma-to-code problem by itself. Reddit's agent-specific threads report the same failure the old export plugins had, just one layer up: a usable first pass that drifts from the real component library and design tokens unless the agent also has rules to follow, not just data to read.

Thin outlined wireframe connected by a single line to a pair of code brackets, abstract illustration

The question used to be "which plugin exports the cleanest HTML." Now it's "which agent setup keeps Claude Code or Cursor from reinventing a button that already exists in the codebase." Same underlying problem, new tooling.

How are people actually wiring Figma into their agent?

The most detailed answer on this comes from r/vibecoding, where a developer lays out their working pattern: "use Figma MCP / Claude to pull the design apart, generate the frontend component by component, then wire the backend separately with Supabase/Firebase." Component-by-component, not whole-page-at-once, is the recurring theme across threads.

A r/ClaudeAI post pushes the opposite extreme, testing a Figma-to-mobile-app build in a single prompt, and links out to a collection of "UX / AI Design Skills for Claude Code" the poster built to constrain that kind of one-shot generation. The existence of a skills collection for this is itself the signal: raw MCP access needs a wrapper before it behaves.

On r/ClaudeCode, someone frames the real question directly: they've spent months exploring "how Figma's MCP Server could help designers bridge the gap between design systems and real code," and the thread exists because that bridge isn't automatic.

What's the "don't recreate what already exists" problem?

The sharpest warning comes from r/vibecoding: "Figma-to-code tools are getting better, but fitting into a real frontend codebase is still hard," with the top piece of advice being simply "don't recreate components that already exist." An agent reading a Figma frame has no idea your codebase already has a <Button variant="primary">; without that context it writes a new one, styled slightly differently, every time.

This is also where Figma's own Code Connect documentation comes in. Code Connect is Figma's mapping layer: it links a Figma component to the actual import path, prop names, and variant names in your repo, so the agent gets told which real component to reuse instead of guessing from pixels. Our Figma MCP breakdown covers what the 35 MCP tools can and can't do on their own; Code Connect is the piece that closes the "which component is this" gap.

Does going component-by-component actually fix it?

Mostly, per the threads, but not completely. On r/FigmaDesign, a commenter recommending Kombai over "Figma MCPs and other Figma to React tools" claims it "interprets Figma much better" than the generic MCP path, suggesting the gap between a raw MCP connection and a tool built specifically for code-faithful output is still real as of this thread.

A r/FigmaDesign build-in-public post shows the other end of the spectrum working: a one-command-line pipeline that pulls Figma variables directly, with the poster noting "no dev handoff, no wasted time." Variables (Figma's name for design tokens) flowing straight into the build is exactly the mechanism that keeps spacing and color consistent instead of the agent guessing a hex value.

What does it look like when this goes wrong?

The clearest cautionary story is on r/vibecoding: someone was told "design your entire app, export to code, done," tried it, and ended up with "the complete app structure" generated as a dumped codebase of dozens of files with no path back to a maintainable project. Export-and-ship without an intermediate design contract produces a snapshot, not a system.

Two more threads frame this as an open question rather than a solved one. r/vibecoding asks directly how people "manage the transition from design to development" without losing fidelity, and r/vibecoding asks for "successful cases where you took a layout from Figma and got a finished page that can be integrated into a project." Neither thread has a settled answer, which tracks: this is an active problem, not a shipped solution.

Do token-level fixes actually hold up?

Atomize's token-pipeline writeup makes the case in more technical detail: "AI coding tools have no built-in link to your design system. They use training data and your prompt unless you attach token structure, component usage rules, and spacing logic." Their fix is a three-step pipeline: export Figma variables as DTCG JSON, compile that into CSS custom properties with Style Dictionary, then document the rule "never hard-code hex values, pixel sizes, or font sizes" in an AGENTS.md file at the repo root. Teams running that pipeline report the agent's output shifting from inline styles like backgroundColor: "#2563EB" to token references like background: var(--ds-background-interactive-primary).

That's the same shape of fix DESIGN.md is built around: a single file the agent reads before it writes code, naming the real tokens and components so it stops inventing its own.

One independent tester's experience, documented on their own blog after what they call "extensive testing," rates plain Figma MCP output at around 85% accurate against the source design, with the gap concentrated in spacing and component reuse, not color or typography. That's one person's benchmark, not an industry figure, but it lines up with the Reddit pattern: close, not exact, and the miss is structural rather than cosmetic.

Checklist: before you point an agent at Figma

✅ Set up Code Connect (or an equivalent component map) before the first generation pass, not after. ✅ Export tokens as a real file (DTCG JSON, a tokens.css, anything versioned) instead of letting the agent read colors off the canvas. ✅ Generate component-by-component, the pattern every working thread above describes, not whole-screen-at-once. ✅ Write down the "don't recreate this" rule explicitly; the agent has no way to know your button already exists.

❌ Don't treat "design your app, export to code, done" as a real workflow; the r/vibecoding thread above shows exactly what that produces. ❌ Don't run two Figma MCP servers at once pointed at the same agent; overlapping tool definitions confuse the agent about which one to call. ❌ Don't skip the rules file because the agent "has the Figma data"; data without constraints is still a guess.

FAQ

Does Figma MCP give an AI agent everything it needs to write accurate code? No. MCP gives the agent access to the design data (components, variables, layer tree). It does not tell the agent which real codebase component or token to reuse for each one. That mapping is what Code Connect, or a manual design contract, provides.

Is Claude Code better than Cursor at this, based on the threads? The threads don't settle that; both appear across the roundup, generating comparable first passes and running into the same reuse problem. The tool that gets named as outperforming generic MCP is Kombai, built specifically for code-faithful conversion rather than general-purpose agent use.

What's the single highest-leverage fix? Per the Atomize pipeline and the r/FigmaDesign variables-via-CLI thread, it's getting design tokens into a real file the agent reads, rather than letting it infer values from the rendered design.

Does this replace a human developer reviewing the output? No thread claims that. Even the best-documented workflows describe component-by-component generation with review at each step, not an unattended pipeline.

Why does "export and ship" fail even with a good design? Because a finished Figma file encodes what the UI looks like, not how the codebase should be structured to produce it. Without that second layer, the agent has to invent file structure, naming, and reuse decisions from scratch, which is where the drift above all started.

Is this a different problem from the general Figma-to-code complaints? Related but distinct. Our general Figma-to-code roundup covers export plugins producing non-componentized "div soup." This is specifically about agentic tools (Claude Code, Cursor) with live MCP access, which fail in a narrower way: reasonable code, wrong reuse decisions.

Summary

An AI agent with Figma MCP access generates usable first-pass code, but drifts from the real component library without an explicit map.
Code Connect (or a manual equivalent) is what tells the agent which real component and props to reuse instead of rebuilding one.
Exporting tokens as a real file and generating component-by-component are the two patterns every working thread above describes.
"Export the whole design, ship the output" is the failure mode multiple threads warn against directly.
The fix threads converge on, unprompted, is the same shape as a design contract: one file the agent reads before writing code.

Workflow

DESIGN.md is that file: a single machine-readable spec naming your real tokens, components, and rules, built for exactly the gap these threads describe. Browse real examples in the library, read the Figma MCP breakdown for what the 35 server tools expose, or start with giving your AI agent a design system.