Jenny XieEditor, Figma
The Coinbase Design System team put Code Connect to the test against coding agents—and found that it boosted design system adherence while cutting token costs by an average of 22.5%.
Share How Coinbase used Code Connect to guide agents and shrink token costs
The Coinbase Design System (CDS) team supports the largest U.S. cryptocurrency exchange across mobile and web for consumers and businesses. They’ve scaled a design system for quality, consistency, and accessibility—but what needs to change when its primary users shift from engineers to agents? Technical Lead Erich Kuerschner saw an opportunity to improve agent output with the Figma MCP server Figma’s MCP server brings your design decisions into the tools where code gets written—so what gets built actually matches what was designed. Here’s what that unlocks for everyone who builds products. When going from design to code, agents lack the context of your production components. With Code Connect in Figma’s MCP, they get that context. We measured its impact on token usage, task duration, and code quality.
The TL;DR on MCP: Why context matters and how to put it to work
Better code, fewer tokens: The benefits of Code Connect in MCP
“The tests showed us that Code Connect often reduces the number of tokens your agent needs to spend while converting a Figma design into code,” he says. “The quality of that code is noticeably better, thanks to the better context Code Connect provides.” Here’s how the CDS team adapted for new engineering workflows with Code Connect, and measured its impact on time, quality, and cost.
Bringing Code Connect into agentic workflows
The CDS team already had a few agent skills that teach agents to follow their design system’s best practices: choosing the right components for the job, avoiding deprecated components and patterns, using CDS design tokens, and more. They had built an internal prototyping playground on top of those skills, so anything made there stuck to CDS by default. But both were tuned for writing code from scratch. Another common workflow was still underserved: turning a Figma design into production-quality CDS code. Product engineers told the team that the process was slow, inaccurate, and too unpredictable to bring into their regular workflows.
Code Connect was the obvious lever, but CDS hadn’t updated their mappings since before the release of the Figma MCP server. What existed was out of date, and many new components had no templates at all. “Based on what I’d heard about Code Connect, it was a way to improve the reliability of design-to-code workflows without having to rely solely on our agent skills,” says Erich.
Fully adopting and modernizing the Code Connect setup would involve updates to hundreds of components across mobile and web. Erich used Claude Code to build an agentic workflow that took a list of Figma components and worked through them in parallel, with the figma-code-connect skill writing the templates. “In about four hours, we went from having a few of our components migrated to the newer Code Connect format to full coverage of our design system,” he says.
Today, every CDS component in Figma is connected to its sibling in code via Code Connect. Code Connect is part of every component workflow on the CDS engineering team. The team uses Figma MCP server to pull design specs, create or update components in code, and keep components’ corresponding Code Connect templates in sync with the latest changes.
Setting up the evaluation
It was time to benchmark the quality of agent outputs against token usage and time spent on implementation, with and without Code Connect. “We wanted to understand what Code Connect was getting us, and whether it would help address our product engineers’ concerns about the reliability of the design-to-code workflow, ” says Erich.
He used the same design, prompt, and model (Sonnet 4.6) for three runs in a blank codebase, resetting after each one to “make sure there were no lingering clues for the next agent to nibble on,” he says. He also had to control for prompt caching, which had the potential to impact the experiment, producing positive test results for reasons unrelated to Code Connect. The prompt was simple and intentionally vague: Implement this design from Figma, with a link to the design file.
The goal was to use a design that wasn’t too simple (like a button with an input), or too complex (like an entire mobile app home screen), but that landed somewhere in the middle.
There were a couple of traps, too, says Erich: “In the header of our contrived example, we used the CDS Stepper component, which has dozens of properties, and is quite complex in the code. What was most important was having a wide variety of components, including ones which had been common challenges for agents to get right. For example, agents had been notorious for hallucinating illustration and icon names. After completing our adoption of Code Connect, that problem disappeared overnight.”
Agents had been notorious for hallucinating illustration and icon names. After completing our adoption of Code Connect, that problem disappeared overnight.“Agents had been notorious for hallucinating illustration and icon names. After completing our adoption of Code Connect, that problem disappeared overnight.”
Measuring the ROI of Code Connect
Across both visual and code outputs, the two main factors Erich looked at were component choice and design system adherence. “With Code Connect, component selection was excellent,” he says. Agents consistently used the right components—even tricky ones, like the ListCell and Stepper—instead of building them by hand with primitives: “One common mistake we saw agents making without Code Connect was building the Stepper component with two progress bars and labels.” He checked whether agents used the right design tokens, using semantic colors and sizing, say, instead of styling with CSS or inline styles.
The three runs showed that Code Connect made the same job cheaper and faster. On average, it cut token use by 11.5%, time to implementation by 22.3%, and cost by 22.5%, with every run improving by these measures. The evaluation made it clear that agent skills and Code Connect have different jobs:
- CDS agent skills shape how the agent implements a solution. From choosing the right pattern to avoiding deprecations, these decisions ensure high-quality outputs, especially at scale.
- Code Connect gives the agent the best possible context when starting from designs. With component context upfront, it spent fewer tokens searching and guessing, which resulted in cost and time savings regardless of agent skills.
Outside of their tests with Code Connect, the CDS team regularly evaluates their design system skills to make sure changes to those skills don’t cause problems for agents. They’ve noticed that with each new generation of models, agents are getting better at using CDS without relying on skills. Eric sees the evals as a way to prepare for a time when skills may no longer be necessary—the quality of context, however, will always matter. “You don’t want to be stuck without Code Connect in that future,” he says, “because we’ve seen what happens: The agent can go wild in how it interprets the design.”
Learn more about Code Connect, which is available on Organization and Enterprise plans for Full or Dev seats.
Jenny Xie is a writer and editor interested in design, tech, and culture. She was previously a content strategist at Figma and the executive editor at Dwell. She is the author of the novel Holding Pattern.
WebsiteTwitterInstagramLinkedIn
Better code, fewer tokens: The benefits of Code Connect in MCP
How Decagon uses AI for design system saturation