Coding agents are getting much better at turning designs into code. But without the right context, they often rebuild your UI from primitives instead of using the production code components your team already maintains. This can make the output look right, while still being wrong for your codebase. It can also make the agent spend more time (and tokens) searching, guessing, debugging, and rewriting.When agents work with the Figma MCP server, Code Connect can provide them with additional context by connecting Figma components to real components in your codebase. If Code Connect is set up, agents receive production-relevant code snippets in the MCP response, instead of only a React representation of the visual design.We originally built Code Connect to improve the design-to-code process for human developers. But today many teams and role types are doing this kind of work with coding agents. So we set out to measure whether, and how much, Code Connect improves agents’ performance.In our evals, we found that just like with human developers, Code Connect helps agents adhere to a company’s design systems and produce better outputs, faster. We tested design-to-code tasks with agents using Figma’s MCP server, both with and without Code Connect templates set up.We found that with Code Connect:The median task duration was reduced by 19.6%Code quality increased by a full point on a Likert scale of 1–4Token usage for the median task was reduced by 29.5%This post walks through how Code Connect provides context for agents, how we ran the evals, and what we learned along the way.How Code Connect enriches Figma’s MCP server responseCase study: CoinbaseThe Coinbase Design Systems (CDS) team architects and maintains the core design components, tokens, and infrastructure that drive consistency and efficiency across Coinbase's largest consumer products. As the engineers moved to agent-driven development, they invested in Code Connect so agents build with the right components instead of reinventing them.To measure the impact, Frontend Engineer Erich Kuerschner ran the same design, prompt, and model with and without Code Connect. “Without Code Connect, the agent would sometimes fabricate its own version of components: say, build a stepper out of progress bars,” says Erich. “With it, the agent sees accurate representations of the design as code and literal import statements pointing directly to the correct CDS components to use, so the output code quality vastly improved and we saved tokens at the same time.”Figma’s MCP server lets coding agents retrieve structured context about a design. One of the key tools, get_design_context, gives the agent a code description in React of what is on the canvas. The output is visually correct, but because the agent doesn’t know how this maps to components in your codebase, three things tend to happen:The agent makes up a new component from scratch.The agent picks the wrong component from your design system.The agent finds the correct component eventually, but does unnecessary work in the process, which uses extra tokens.When Code Connect templates have been set up, the Figma MCP server substitutes parts of the generated React with production-accurate code snippets. Instead of guessing, the agent now has real code to use from your codebase. It’s told exactly which component to import, and which property values to pass in.Here’s an example of the difference in practice. With no Code Connect, Figma’s MCP will pass the coding agent React like this:TypeScript<div role="tablist" className="flex gap-1 rounded-md bg-gray-100">