Design to code in 2026: what actually works

In August 2026, Figma published an eval of its own MCP server: across 27 design-to-code test cases, adding Code Connect mappings cut median token usage by 29.5% and median task duration by 19.6%. The model didn't get smarter between runs. It got told which components already existed.

Design to code is the work of turning a design file into production UI code. In 2026 most of that work runs through AI agents reading design context from Figma, and the result is only as good as the components and tokens the agent can map the design to. Without a mapping, the agent rebuilds your UI from rectangles. With one, it composes from your library.

What does each design-to-code tool actually do?

Here is the state of things as of October 2026, checked against each vendor's docs.

The details matter. Code Connect needs a Dev or Full seat on a Professional, Organization, or Enterprise plan. Figma recommends its remote MCP server for most users, and some tools exist only there, such as search_design_system for searching connected libraries and use_figma for writing to files (writing to the canvas is in beta). v0 says it checks each component, prop, and token against your sources and won't use anything it can't verify.

Why does generated code drift from the design?

Without a mapping, the MCP server's get_design_context tool returns React and Tailwind generated from the layer tree, and the agent has to guess what that markup is. Is this rounded rectangle your Button, or something new? Is #4F46E5 your brand token or a one-off?

When it guesses wrong, you get a fourth slightly different card, padding in raw pixels, and icons imported by names that don't exist. Coinbase's Erich Kuerschner described that last failure in Figma's case study: "Agents had been notorious for hallucinating illustration and icon names."

This isn't a model problem. A design file describes appearance; your codebase holds behavior, accessibility, and API.

A mapped component is a fact the agent can look up; an unmapped one is a guess it has to make.

Generated code is only as good as the components it maps to

In Figma's eval, the MCP server swapped parts of its generated React for production snippets wherever Code Connect templates existed. LLM judges scored output against reference code, and median code quality rose from 2 to 3 on a 1 to 4 scale.

Coinbase's design system team ran three evaluations with the same design, prompt, and model. Per Figma's September 2026 write-up, Code Connect cut token use by 11.5%, time to implementation by 22.3%, and cost by 22.5%. Before testing, they brought stale mappings to full coverage in about four hours, using Claude Code with Figma's figma-code-connect skill.

Mapping helps only when the mapped component is worth reusing: clear props, sensible variants, and tokens instead of hard-coded values. Map a messy component and the agent will faithfully reuse the mess.

The mapping ladder: a component-mapped workflow

Each rung makes the next one cheaper.

1. Tokens. Bind every color, space, radius, and type value in Figma to variables with the same names as your code's theme. An agent that sees color/surface/primary can emit the token; a hex code gives it nothing.
2. Component names. Button in Figma is Button in code. Not Btn, not Buttons/Main.
3. Props. A Figma variant property called size with values sm, md, and lg becomes a React prop called size with the same values.
4. Usage rules. Short guidance on when to use Dialog versus Sheet. Make kits take guidelines with the package, Figma's MCP server offers a create_design_system_rules prompt, and most coding agents read an AGENTS.md file.
5. Agent access. Code Connect, a component manifest, or an MCP server that lists your components, so the agent looks before it writes.

Score one point per rung. Teams at one or two points should expect to rewrite most generated UI. Teams at four or five mostly review composition.

What still needs a human?

Four things stay with people:

• New patterns. If a design needs something the library lacks, the agent will invent it. Decide whether it belongs in the system first.
• Responsive behavior. A frame shows one width. Someone decides what wraps, stacks, or hides at the others.
• Accessibility. Focus order and keyboard paths come from the implementation and your testing, not the canvas.
• Content. Real strings and error messages are rarely in the frame.

One review habit catches most drift: scan the diff for new component definitions first. Any file that defines a component instead of importing one deserves a second look.

Where Pegasus fits

Pegasus approaches the mapping problem from the naming side. It ships as a Figma library and matching React code with the same component names, variant structure, and tokens on both surfaces, which puts the first three rungs of the ladder in place before you write anything.

The code is TypeScript React built on shadcn/ui, Base UI primitives, recharts, and Tailwind CSS, so the React and Tailwind that Figma's MCP server emits by default already match the stack.

For the fifth rung, Pegasus includes a local MCP server that exposes the component catalog (components, props, variants, and tokens) to MCP clients such as Claude Code and Cursor. The 470 design tokens are Figma variables themed from the same source as the code's theme object, so the token an agent reads in the design is the token it writes in code.

The fourth rung, usage rules for your own product, is still yours to write.

FAQ

Can AI turn a Figma design into production code?

It can produce a strong first draft, often close to shippable when the agent knows your components. Figma's MCP server, Figma Make, and v0 all read design context and your design system. Without a mapping to real components, expect rebuilt markup with raw values. With mappings, the work shifts to reviewing composition, responsive behavior, and accessibility.

What is Figma Code Connect?

Code Connect links components in your codebase to the matching components in a Figma library. Dev Mode then shows your real import and props instead of autogenerated snippets, and Figma's MCP server passes the same snippets to AI agents. As of October 2026 it needs a Dev or Full seat on a Professional, Organization, or Enterprise plan.

What is the difference between Dev Mode and the Figma MCP server?

Dev Mode is the interface for people: statuses, annotations, inspection, and compare changes inside Figma. The Figma MCP server gives design context to AI agents in tools like Claude Code, Cursor, and VS Code through the Model Context Protocol. The remote server can also write to Figma files, a capability in beta as of October 2026.

Do I need a design system to use AI design-to-code tools?

No, but output quality depends on one. Without a design system, the tools generate new components on every request and you maintain each copy. With one, they reuse what you have, which Figma's own testing links to fewer tokens, shorter tasks, and better judged code quality. Even a small set of well-named components helps.

Sources

• Better code, fewer tokens: The benefits of Code Connect in MCP, Figma (2026)
• How Coinbase used Code Connect to guide agents and shrink token costs, Figma (2026)
• Guide to the Figma MCP server, Figma Help Center (2026)
• Tools and prompts, Figma MCP server docs (2026)
• Code Connect, Figma developer docs (2026)
• Dev Mode, Figma (2026)
• Use your design system package in Make kits, Figma Help Center (2026)
• Design Systems 2.0, v0 docs (2026)