You don’t have to start by shortening prompts to reduce AI coding costs. The point where Coinbase cut costs by 22.5% was not instruction length, but the time agents spent searching for the right component.
What produced 22.5% was not shorter prompts, but an accurate starting point
Code Connect creates a translation layer between design components and production code components. With only the Figma MCP server, an agent can receive the canvas structure and visual information in a React-like form, but it may not know which component in the company codebase it corresponds to. Once Code Connect templates are in place, part of the MCP response becomes code snippets containing the real import statements, component names, and property values.
For example, even if a design includes a step indicator, without connection data an agent may combine a progress bar and labels to build a similar UI from scratch. If the connection data contains CDS’s Stepper and property mappings, it imports the existing component directly. The key to saving tokens is not giving the model less information, but giving it the location of the right answer so it does not need to explore wrong candidates.
Coinbase Design System manages components and design tokens across multiple platforms, including web and mobile. Its public repository includes packages for React, React Native, Android Compose, and iOS SwiftUI. In a multi-platform system like this, a simple list of component names is not enough, because even the same “button” has different import paths and APIs by framework. Code Connect can link one design component to separate code implementations in different languages and frameworks.
| What the agent needs to do | Without Code Connect | With Code Connect |
|---|---|---|
| Choose a component | Search the codebase or build new UI | Use the mapped production component |
| Convert properties | Inspect Figma properties and guess the API | Use explicit mappings between design properties and code props |
| Handle styling | May generate arbitrary CSS or similar colors | Refer to real tokens and usage examples |
| Cost of failure | Conversations grow longer through search, debugging, and rewriting | A narrower initial path reduces exploratory calls |
The Coinbase team started with outdated Code Connect mappings and no templates for new components. Using Claude Code and Figma’s figma-code-connect skill to process component lists in parallel, they expanded mapping coverage for hundreds of components across the entire design system in about four hours, according to the team’s account. The official CLI documentation also says this skill finds unconnected components in a Figma selection, checks the corresponding code in the repository, and generates .figma.ts templates. It explicitly says to review and revise generated output before publishing it.
22.5% is a hypothesis to validate, not a target to copy
Coinbase’s result is promising, but the sample is small. The team ran three trials using the same design, the same ambiguous prompt, the same Sonnet 4.6 model, and a freshly initialized empty codebase each time. They controlled for prompt caching so it would not favor the results, and reported average reductions of 11.5% in tokens used, 22.3% in implementation time, and 22.5% in cost.
You should not read these three figures as meaning the same thing. Token counts and billed cost can have different rates for input, output, cache reads, and cache writes. According to Anthropic’s documentation, cache reads and writes have pricing structures that differ from base input tokens, and cache hits vary depending on whether the same prompt prefix is retained. In your own experiment, do not record only one total-token figure; separate input, output, cache reads, cache creation, and actual billed cost.
A broader evaluation run separately by Figma supports the direction of Coinbase’s figures. Across 27 test cases for two React-based design systems, Code Connect reduced median token usage by 29.5% and task time by 19.6%, while code quality rose from 2 to 3 on a 1–4 scale. Still, these results are not a universal savings rate that applies unchanged to every organization.
In fact, the variable that most strongly moved outcomes in Figma’s evaluation was Code Connect coverage. The example design system, where Code Connect snippets averaged 20% of MCP responses, improved more than the internal system, where they averaged about 6%. With broader connection coverage, agents spent less time digging through node_modules, broadly searching icon names, or rebuilding existing components in CSS.
Do not use 22.5% as guaranteed ROI in a rollout proposal
The Coinbase figure is the average from its own evaluation, which ran one design three times per condition. Results will vary with the model, repository size, design complexity, component reuse rate, and cache state. It is safer to establish a baseline using a few screens your team implements often, then measure coverage and quality alongside it.
Visual similarity alone is also insufficient for judging quality. Coinbase checked whether the correct components and design tokens were used, while Figma’s evaluation also scored best practices including correctness, code quality, maintainability, completeness, and accessibility and security. Even if a screen looks similar, it should not count as a success if tabs do not actually switch or hundreds of lines of CSS replace an existing component.
Four steps to reproduce this in your team
Start by cataloging the components used most often
Choose 10 recently implemented screens and count the components that appear most often, such as Button, Input, ListCell, and Modal. For each item, record its Figma node, code import path, supported platforms, and whether it is deprecated. Rather than connecting the whole library from day one, prioritize the top 20 plus icons and complex forms agents often get wrong to see initial results quickly.
Choose between the UI and CLI based on your team structure
Figma’s in-app Code Connect UI is convenient for quickly linking paths and component names. The CLI, run from the repository, is better when you need to dynamically map design properties to real props and provide precise code examples. You can use both approaches together, but Code Connect currently requires a Full or Dev seat on an Organization or Enterprise plan.
Create mapping files and review the real imports
If you use the CLI, prepare Node.js 18 or later and a Figma personal access token with Code Connect permissions, then install the tool with npm install --global @figma/code-connect@latest. Create figma.config.json at the project root, then map Figma string, boolean, and enum properties to code props in .figma.ts files. Have a person review the generated templates’ import paths, defaults, variants, and deprecated components before publishing with npx figma connect publish.
Repeat the same tasks as A/B tests and segment by coverage
Select five medium-complexity screens from real work and run both “without Code Connect” and “with Code Connect” at least five times each. Keep the model, prompt, repository commit, permissions, and cache conditions fixed. For every run, record input, output, and cache tokens, cost, completion time, and tool-call count; also score whether builds and tests pass and whether the correct components and tokens are used. Finally, do not look only at the overall average: segment the results by the share of design system components on each screen and by connection-coverage range.
In operations, it is important to make new component releases and Code Connect updates part of the same definition of done. Coinbase also says it now synchronizes the corresponding templates whenever it creates or updates a component. Otherwise, stale mappings hand the agent an outdated answer with confidence rather than an accurate one.
If you want to dig deeper
How Coinbase used Code Connect to guide agents and shrink token costs — This is the seed case covering Coinbase’s three-run evaluation conditions, results, and design-system rollout. figma.com
Better code, fewer tokens: The benefits of Code Connect in MCP — Review the evaluation criteria for 27 test cases and how results varied with coverage. figma.com
Getting started with Code Connect CLI — Official developer documentation for installation, configuration files, template authoring, and publishing commands. developers.figma.com
Code Connect — Explains the differences between the UI and CLI, supported plans, and connection information delivered through MCP. help.figma.com
Coinbase has open sourced its design system — Introduces Coinbase’s public design system, including its structure, more than 100 components, tokens, and accessibility principles. coinbase.com
GitHub - coinbase/cds: Coinbase Design System · GitHub — See CDS’s actual platform-specific packages and public repository structure. github.com
