Figma Code Connect Cut Coinbase's AI Costs 22%. The Catch
By The WAALEE Team · · 4 min read
Figma published a case study this fall worth paying attention to if you're running coding agents against a design system: Coinbase's design system team tested Code Connect across three identical runs of the same prompt and watched token use drop 11.5%, time to implementation drop 22.3%, and cost drop 22.5%. Real numbers, from a real team, not a cherry-picked demo. The part worth sitting with is what had to be true before any of that kicked in.
What Code Connect actually does
Code Connect links a component in a Figma file to its matching component in your codebase, so an agent reading a design doesn't have to guess which React component a given button maps to. It isn't a token extractor and it isn't a styling tool. It's a lookup table: this Figma component is that code component, use it, don't invent a new one. Paired with Figma's Dev Mode MCP server, an agent implementing a design can call into that lookup table mid-generation instead of pattern-matching off a screenshot and hoping for the best.
The test, and what it actually measured
Per Figma's write-up, Coinbase's design system team ran the same design, the same deliberately vague prompt ("implement this design from Figma"), and the same model, Sonnet 4.6, three times in a blank codebase, resetting the environment between runs to control for prompt caching. Averaged across those three runs: 11.5% less token use, 22.3% faster time to implementation, 22.5% lower cost. Qualitatively, component selection was described as excellent: the agent picked the right components, like ListCell and Stepper, instead of improvising similar-looking ones, and icon-name hallucinations that showed up before Code Connect stopped showing up after.
That's a genuinely good result if you're in Coinbase's position. It's also a result that took real work to reach before the three test runs ever started.
What had to be true first
Coinbase's own Code Connect mappings were out of date, and plenty of newer components had no mapping at all. Before the test could run, technical lead Erich Kuerschner's team used Claude Code and Figma's own `figma-code-connect` skill to run migrations in parallel, going from a handful of mapped components to full coverage in about four hours. Four hours is a good number when every one of those components already exists, in Figma, with a code counterpart sitting in a repo waiting to be wired up. It isn't a number that applies if you don't have that yet.
- A design system that already lives in Figma, maintained by someone, with components that roughly match what's actually shipped in code.
- A codebase with a component for each of those, named closely enough that a mapping makes sense.
- Someone with the time, and the seat, since Code Connect ships on Organization and Enterprise plans only, to build or fix that mapping before an agent ever benefits from it.
Most teams we talk to don't have all three. A marketing site that was never built in Figma. A product that grew past whatever Figma file someone sketched two years ago and never kept current. An agency handed a client's live URL with no design file attached at all. None of that is a Code Connect problem. It's a step before Code Connect, and skipping it is why the same kind of agent that performs this well against Coinbase's design system will quietly default back to a generic button on yours.
Three ways an agent gets at your design system right now, and what each one assumes you already have:
- Figma Code Connect: Maps existing Figma components to existing code components so agents stop guessing which one to use. Needs both sides already built, and an Organization or Enterprise seat.
- Figma Dev Mode MCP server: Reads variables, styles and node structure out of a Figma file you already have access to. Nothing here if the file doesn't exist.
- WAALEE: Paste any live URL, no Figma file or component mapping required, and get the real colors, type and spacing back as W3C tokens plus a ready prompt for Claude, Lovable, v0, Cursor or Bolt.
Build the mapping once you have something to map
None of this is an argument against Code Connect. An 11 to 22 percent improvement across token use, time and cost is a real number, and any team sitting on a maintained Figma file should go fix their mappings the way Coinbase did, in an afternoon, not a quarter. The argument is about order. Code Connect makes an existing, accurate design system cheaper for an agent to use correctly. It doesn't create that design system, and it won't help you if your actual source of truth is a live site with no Figma file behind it at all. Get the real values out first, in whatever form your team can maintain, before spending the afternoon wiring up a connector that assumes they're already there.