--- title: How Coinbase used Code Connect to guide agents and... description: Coinbase's Design System (CDS) team used Figma's Code Connect feature within Figma's MCP server to give coding agents production-component context when... canonical: https://daily.dev/posts/how-coinbase-used-code-connect-to-guide-agents-and-shrink-token-costs-bzlyvzsxx twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: How Coinbase used Code Connect to guide agents and shrink token costs | daily.dev og:description: Coinbase's Design System (CDS) team used Figma's Code Connect feature within Figma's MCP server to give coding agents production-component context when... og:url: https://daily.dev/posts/how-coinbase-used-code-connect-to-guide-agents-and-shrink-token-costs-bzlyvzsxx og:image: https://api.daily.dev/og/posts/BZLyVzSXx.png og:image:alt: How Coinbase used Code Connect to guide agents and shrink token costs og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # How Coinbase used Code Connect to guide agents and shrink token costs **[Figma](https://daily.dev/sources/figma)** · 7 min read · 2 upvotes · 0 comments ## Summary Coinbase's Design System (CDS) team used Figma's Code Connect feature within Figma's MCP server to give coding agents production-component context when converting designs to code. After modernizing Code Connect mappings for hundreds of components (done in about four hours using a Claude Code agentic workflow), they ran a controlled evaluation using the same design, prompt, and Sonnet 4.6 model across three runs with and without Code Connect. Results showed Code Connect reduced token usage by 11.5%, implementation time by 22.3%, and cost by 22.5%, while also improving component selection accuracy and eliminating agent hallucination of icon/illustration names. The team distinguishes Code Connect's role (providing context) from CDS agent skills' role (shaping implementation decisions like avoiding deprecated components). ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### How much does Figma Code Connect reduce token usage and cost when AI agents convert designs to code? Coinbase's Design System team measured an average 11.5% reduction in token usage, 22.3% reduction in time to implementation, and 22.5% reduction in cost when using Code Connect versus not, across three controlled test runs using the same design, prompt, and Sonnet 4.6 model. Component selection accuracy also improved, and icon-name hallucination issues disappeared entirely. _Teams weighing AI coding agent context strategies can track real-world benchmarks like this one on daily.dev._ ### What problem does Figma Code Connect solve for AI coding agents converting designs into code? Code Connect gives coding agents context about a team's actual production components when converting a Figma design into code, so agents choose the correct existing component instead of building one from scratch with primitives. Coinbase's team found this fixed recurring issues like agents building a custom Stepper component from two progress bars, or hallucinating icon and illustration names. _Engineers refining agentic design-to-code workflows can follow practical case studies like this on daily.dev._ ## Similar posts on daily.dev - [Better code, fewer tokens: The benefits of Code Connect in MCP](https://daily.dev/posts/better-code-fewer-tokens-the-benefits-of-code-connect-in-mcp-a99y4bth1) · Figma · 2 upvotes · 0 comments - [Figma Design to Code, Code to Design: Clearly Explained](https://daily.dev/posts/figma-design-to-code-code-to-design-clearly-explained-u3nuveewv) · ByteByteGo · 2 upvotes · 0 comments - [Blog: From Figma to Production Code: How The Figma MCP Changes the Role of Frontend Engineering](https://daily.dev/posts/blog-from-figma-to-production-code-how-the-figma-mcp-changes-the-role-of-frontend-engineering-ggfzgf2ew) · Wawandco · 2 upvotes · 0 comments --- Tags: [#ai-agents](https://daily.dev/tags/ai-agents), [#mcp](https://daily.dev/tags/mcp), [#figma](https://daily.dev/tags/figma), [#design-systems](https://daily.dev/tags/design-systems) [View this post on daily.dev](https://daily.dev/posts/how-coinbase-used-code-connect-to-guide-agents-and-shrink-token-costs-bzlyvzsxx) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"How Coinbase used Code Connect to guide agents and shrink token costs","url":"https://daily.dev/posts/how-coinbase-used-code-connect-to-guide-agents-and-shrink-token-costs-bzlyvzsxx","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/how-coinbase-used-code-connect-to-guide-agents-and-shrink-token-costs-bzlyvzsxx"},"datePublished":"2026-09-02T15:24:12.279Z","dateModified":"2026-09-02T15:44:12.845Z","description":"Coinbase's Design System (CDS) team used Figma's Code Connect feature within Figma's MCP server to give coding agents production-component context when...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/af9953caf1ce5bf3da188631202d8a44?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/af9953caf1ce5bf3da188631202d8a44?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Figma","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Figma","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/d81fd85ddaea4d25a658694de448118f","url":"https://daily.dev/sources/figma"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/how-coinbase-used-code-connect-to-guide-agents-and-shrink-token-costs-bzlyvzsxx","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"ai-agents,mcp,figma,design-systems","timeRequired":"PT7M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Figma","item":"https://daily.dev/sources/figma"},{"@type":"ListItem","position":3,"name":"How Coinbase used Code Connect to guide agents and shrink token costs"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/how-coinbase-used-code-connect-to-guide-agents-and-shrink-token-costs-bzlyvzsxx#faq","mainEntity":[{"@type":"Question","name":"How much does Figma Code Connect reduce token usage and cost when AI agents convert designs to code?","acceptedAnswer":{"@type":"Answer","text":"Coinbase's Design System team measured an average 11.5% reduction in token usage, 22.3% reduction in time to implementation, and 22.5% reduction in cost when using Code Connect versus not, across three controlled test runs using the same design, prompt, and Sonnet 4.6 model. Component selection accuracy also improved, and icon-name hallucination issues disappeared entirely. Teams weighing AI coding agent context strategies can track real-world benchmarks like this one on daily.dev."}},{"@type":"Question","name":"What problem does Figma Code Connect solve for AI coding agents converting designs into code?","acceptedAnswer":{"@type":"Answer","text":"Code Connect gives coding agents context about a team's actual production components when converting a Figma design into code, so agents choose the correct existing component instead of building one from scratch with primitives. Coinbase's team found this fixed recurring issues like agents building a custom Stepper component from two progress bars, or hallucinating icon and illustration names. Engineers refining agentic design-to-code workflows can follow practical case studies like this on daily.dev."}}]} ```