--- title: Better code, fewer tokens: The benefits of Code Connect... description: Figma measured the impact of Code Connect on AI coding agents using their MCP server. Without Code Connect, agents lack context about production components and... canonical: https://daily.dev/posts/better-code-fewer-tokens-the-benefits-of-code-connect-in-mcp-a99y4bth1 twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Better code, fewer tokens: The benefits of Code Connect in MCP | daily.dev og:description: Figma measured the impact of Code Connect on AI coding agents using their MCP server. Without Code Connect, agents lack context about production components and... og:url: https://daily.dev/posts/better-code-fewer-tokens-the-benefits-of-code-connect-in-mcp-a99y4bth1 og:image: https://api.daily.dev/og/posts/a99y4btH1.png og:image:alt: Better code, fewer tokens: The benefits of Code Connect in MCP 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. # Better code, fewer tokens: The benefits of Code Connect in MCP **[Figma](https://daily.dev/sources/figma)** · 10 min read · 2 upvotes · 0 comments ## Summary Figma measured the impact of Code Connect on AI coding agents using their MCP server. Without Code Connect, agents lack context about production components and either rebuild UI from scratch or pick wrong components, wasting tokens. With Code Connect, agents receive accurate code snippets tied to real design system components instead of generic React representations. Across 27 test cases using Claude Sonnet 4.5 and Opus 4.7, Code Connect reduced median token usage by 29.5%, cut task duration by 19.6%, and improved code quality by a full point on a 1–4 Likert scale. The key driver was Code Connect coverage — the more components are connected, the better the results. A Coinbase case study confirmed agents stopped fabricating components and instead used correct imports directly. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### Does using Code Connect with Figma's MCP server actually improve AI coding agent output? Yes. Figma's evaluation of 27 design-to-code test cases found that adding Code Connect templates to the Figma MCP server reduced median task duration by 19.6%, cut token usage by 29.5%, and improved code quality by a full point on a 1-4 Likert scale, compared to running the same tasks without Code Connect, using Claude Sonnet 4.5 and Claude Opus 4.7. _Teams weighing whether design-to-code tooling pays off can track findings like this on daily.dev._ ### Why do coding agents sometimes rebuild UI components from scratch instead of using existing design system components? Without Code Connect, Figma's MCP tool get_design_context only gives agents a generic React representation of what's on the design canvas, with no mapping to the actual codebase. This causes agents to fabricate new components, pick the wrong existing component, or waste tokens searching before eventually finding the right one, as seen when an agent built a stepper out of progress bars instead of using Coinbase's actual component. _Developers debugging inconsistent AI-generated UI code can follow context-engineering discussions like this on daily.dev._ ### How much does Code Connect coverage in a design system affect AI agent performance gains? Coverage is the single biggest factor. Figma's well Code Connected example design system (about 20% Code Connect snippets in MCP responses) showed larger gains than its larger internal Figma Pattern Library, which had only around 6% Code Connect coverage in responses; higher coverage meant fewer exploratory tool calls, less grepping, and closer-to-original results. _Teams deciding how much design system context to invest in for agent workflows can follow benchmarks like this on daily.dev._ ## Similar posts on daily.dev - [How Coinbase used Code Connect to guide agents and shrink token costs](https://daily.dev/posts/how-coinbase-used-code-connect-to-guide-agents-and-shrink-token-costs-bzlyvzsxx) · 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 - [From Figma to Code: How AI Is Transforming the Design Handoff](https://daily.dev/posts/from-figma-to-code-how-ai-is-transforming-the-design-handoff-eybuetwwr) · AT&T Israel · 1 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 - [The TL;DR on MCP: Why context matters and how to put it to work](https://daily.dev/posts/the-tl-dr-on-mcp-why-context-matters-and-how-to-put-it-to-work-e64pcueca) · Figma · 3 upvotes · 0 comments --- Tags: [#react](https://daily.dev/tags/react), [#mcp](https://daily.dev/tags/mcp), [#figma](https://daily.dev/tags/figma) [View this post on daily.dev](https://daily.dev/posts/better-code-fewer-tokens-the-benefits-of-code-connect-in-mcp-a99y4bth1) ```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":"Better code, fewer tokens: The benefits of Code Connect in MCP","url":"https://daily.dev/posts/better-code-fewer-tokens-the-benefits-of-code-connect-in-mcp-a99y4bth1","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/better-code-fewer-tokens-the-benefits-of-code-connect-in-mcp-a99y4bth1"},"datePublished":"2026-08-05T16:39:18.852Z","dateModified":"2026-09-13T20:44:22.012Z","description":"Figma measured the impact of Code Connect on AI coding agents using their MCP server. Without Code Connect, agents lack context about production components and...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/9fc804092fd150aace174f9a85e7e05d?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/9fc804092fd150aace174f9a85e7e05d?_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/better-code-fewer-tokens-the-benefits-of-code-connect-in-mcp-a99y4bth1","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"react,mcp,figma","timeRequired":"PT10M"} {"@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":"Better code, fewer tokens: The benefits of Code Connect in MCP"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/better-code-fewer-tokens-the-benefits-of-code-connect-in-mcp-a99y4bth1#faq","mainEntity":[{"@type":"Question","name":"Does using Code Connect with Figma's MCP server actually improve AI coding agent output?","acceptedAnswer":{"@type":"Answer","text":"Yes. Figma's evaluation of 27 design-to-code test cases found that adding Code Connect templates to the Figma MCP server reduced median task duration by 19.6%, cut token usage by 29.5%, and improved code quality by a full point on a 1-4 Likert scale, compared to running the same tasks without Code Connect, using Claude Sonnet 4.5 and Claude Opus 4.7. Teams weighing whether design-to-code tooling pays off can track findings like this on daily.dev."}},{"@type":"Question","name":"Why do coding agents sometimes rebuild UI components from scratch instead of using existing design system components?","acceptedAnswer":{"@type":"Answer","text":"Without Code Connect, Figma's MCP tool get_design_context only gives agents a generic React representation of what's on the design canvas, with no mapping to the actual codebase. This causes agents to fabricate new components, pick the wrong existing component, or waste tokens searching before eventually finding the right one, as seen when an agent built a stepper out of progress bars instead of using Coinbase's actual component. Developers debugging inconsistent AI-generated UI code can follow context-engineering discussions like this on daily.dev."}},{"@type":"Question","name":"How much does Code Connect coverage in a design system affect AI agent performance gains?","acceptedAnswer":{"@type":"Answer","text":"Coverage is the single biggest factor. Figma's well Code Connected example design system (about 20% Code Connect snippets in MCP responses) showed larger gains than its larger internal Figma Pattern Library, which had only around 6% Code Connect coverage in responses; higher coverage meant fewer exploratory tool calls, less grepping, and closer-to-original results. Teams deciding how much design system context to invest in for agent workflows can follow benchmarks like this on daily.dev."}}]} ```