What a connected design system does to AI code

On 5 August 2026, Figma published the result of running the same 27 design-to-code tasks twice: once with its design components mapped to the real code behind them, once without. With the mapping in place, agents used 29.5% fewer tokens — the chunks of text a model reads and bills by — finished 19.6% faster, and produced code an LLM judge scored a full point higher on a scale of 1 to 4. The variable under test was never the model. It was the design system.

That reframes what a design system is for. A design system is the shared set of components and rules a product's interface gets assembled from, and it used to be judged on whether those components were consistent, named sensibly and documented. The property Figma measured is a different one: whether each component in the design file has a line back to the component that implements it in the repository. A system can be immaculate on the first test and score zero on the second.

What "connected" means here

Code Connect is a Figma feature that ties a component in a design file to the actual component in your codebase. Without it, an agent that asks Figma for a screen receives a description of what it can see — frames, colours, spacing — and reconstructs a plausible version in React. With it, the agent receives the import path and the property values of the component that already exists in your repository, so it stops inventing a button and starts importing yours.

Both travel through Figma's MCP server. MCP, the Model Context Protocol, is an open-source standard for connecting AI applications to external systems — a way for an agent to pull structured data out of a tool rather than inferring it from a screenshot. Figma's implementation can "pull in variables, components, and layout data directly into your IDE". We wrote about the same pipe running the other way — code captured back onto the Figma canvas. This is the return trip, and it is the one with numbers attached.

The number worth planning around is not 29.5%

Figma tested two React design systems: its public example system, and Figma Pattern Library, a larger internal one described as "a realistic design system with more patchy Code Connect coverage". In the first, Code Connect snippets made up about 20% of what the MCP server returned. In the second, around 6%.

Then the sentence that carries the whole study: "the single biggest factor that moved numbers was Code Connect coverage."

Read those together and the headline figure changes meaning. Coverage here is not the share of your components that someone has mapped; it is the share of what the MCP server actually hands the agent that comes back as real code. On that measure the two systems tested sat at 20% and 6%. The 29.5% token saving is therefore a median across systems where four fifths or more of every response was still the agent guessing. Our read is that it describes a floor rather than a ceiling. What a thoroughly connected system does is unknown, because Figma did not test one — the most connected system in the study was Figma's own showcase, at one snippet in five.

The maturity test just moved

For anyone commissioning or running product work, this splits a budget line that used to be single. Documenting a component and connecting it are now separate jobs, with separate costs and separate payoffs, and only the second one shows up in an agent's output. A design system audit that reports component consistency and design token coverage is answering last year's question.

The new question is blunter: when an agent asks for this screen, does it get our components or does it get an approximation? That number exists and it is measurable in exactly the way Figma measured it. Our position is that it belongs in every design system audit written from here on.

What it costs before it pays

Code Connect is not free in either sense. Figma's documentation states it is "available on a Dev or Full seat on the Organization, and Enterprise plans", which rules it out for small teams on lower tiers. The work is also per component: install the @figma/code-connect CLI, generate an access token, add a config file, then write a template file mapping each component's properties to its code, and publish. Figma's own quickstart guide notes that a coding agent can write those template files for you, which is a fair signal of how tedious the task is by hand.

If coverage is the lever, breadth is the wrong instinct. Ten components that appear on every screen — button, input, select, card, modal, table row — will land in far more MCP responses than sixty documented but rarely used ones. Connect the ten first. Completeness is the metric that feels responsible; frequency is the one that moves the number.

The caveat, stated

Figma measured its own feature and published a favourable result, which is worth holding on to. In its favour, the methodology is described, the judging rubric is named, and the caveat about medians hiding case-by-case variation is Figma's own sentence rather than ours. We would take that over a rounder number with no method attached.

What would settle it is someone outside Figma running the same tasks against a system at 60% coverage. Until that exists, the open question is not whether connecting components helps. It is whether the curve keeps climbing past the coverage nobody has reached yet, or flattens out somewhere just above it.

Sources

• Better Code, Fewer Tokens: The Benefits of Code Connect in MCP — Tom Weightman, Figma, 5 August 2026.
• Code Connect — Figma developer documentation.
• Code Connect quickstart guide — Figma developer documentation.
• Figma MCP server — Figma developer documentation.
• What is the Model Context Protocol? — official MCP documentation.