# Crafting design context for agentic coding workflows | Schema by Figma 2025 Source: https://www.youtube.com/watch?v=r_VhvtRP81E Recap page: https://rapidrecap.app/video/r_VhvtRP81E Generated: 2025-11-18T22:38:48.225+00:00 --- ## Quick Overview Figma is making agentic coding workflows more efficient by leveraging design context from Figma files and codebase context from the IDE, allowing large language models (LLMs) to generate design-faithful code, with the Figma MCP Server GA simplifying this process by providing rich, unified context including design tokens and file structure directly to the AI. **Key Points:** - Figma announced the General Availability (GA) of the Figma MCP Server, which provides rich context to AI agents for generating accurate code. - The workflow involves combining Design & Code Context (from Figma) and Codebase Context (from the IDE) to feed an AI model, which outputs code that aligns with design intent. - Design systems are crucial context providers, ensuring fidelity by encoding design decisions like variables and tokens, which the AI can use. - The speaker demonstrated how Code Connect allows engineers to link specific components in Figma to their code definitions, providing granular context. - The AI/MCP is being used to estimate task complexity (like developer wait time) and generate necessary code structures (like variable definitions) deterministically. - The goal is to move beyond simple code generation to a system where expertise and context drive the path from design representation to production code efficiently, reducing friction for developers. - The Figma MCP Server is available today for users on Dev and Full seats on Org plans. ![Screenshot at 00:04: Jake Allbaugh walking onto the stage to present "Crafting design context for agentic coding workflows" at a Figma event.](https://ss.rapidrecap.app/screens/r_VhvtRP81E/00-00-04.png) **Context:** Jake Allbaugh, Developer Advocate at Figma, presents updates related to improving agentic coding workflows, specifically focusing on how Figma's design context can be better leveraged by AI tools. The presentation emphasizes moving beyond simple code generation to creating systems that understand and adhere to established design principles, design systems, and existing codebase structures, thereby making the translation from design to production more efficient and context-aware. ## Detailed Analysis The presentation focuses on enhancing agentic coding workflows by providing rich, contextual information to AI models, moving beyond mere speed to achieve better fidelity and efficiency. Allbaugh stresses that making something meaningful is hard, and AI should help bridge the gap between 'What could exist' (design exploration) and 'What should exist' (production code). Design systems are highlighted as 'incredible context' because they encode design fidelity rules, variable definitions, and tokens, which are essential for accurate AI-driven code generation. A key demonstration showed how Code Connect integrates the IDE's codebase context with Figma's design context, sending this unified context to the AI model. The speaker showed that the AI can use this context to understand component definitions, variable usage, and even infer complexities like expected developer time or the need to adhere to specific naming conventions. The Figma MCP (Meta-Component Protocol) Server is now generally available (GA) for Dev and Full seat Org plans, allowing both local (e.g., http://127.0.0.1:3845/mcp) and remote (https://mcp.figma.com/mcp) access to this rich context, enabling tools to generate code and UI representations that are highly specific to the existing design system and codebase, ultimately reducing boilerplate work and cognitive load for engineers. ### The Goal - Not Just Faster, Further: AI should enable more meaningful creation, not just faster execution; design exploration ('What could exist') needs to be refined into production code ('What should exist') efficiently. ### The Role of Design Systems - Design systems provide crucial context (variables, tokens, naming conventions) that ensures AI-generated code aligns with design fidelity and existing codebase patterns. ### Code Connect Demonstration - Showcased connecting a Figma component instance to its corresponding code file in VS Code via the Code Connect UI, feeding codebase context back to the AI agent. ### MCP Server GA - The Figma MCP Server is now generally available, supporting both local (127.0.0.1) and remote (mcp.figma.com) connections for providing rich context to AI tools. ### Context is King - The expertise and systems developers bring make the contextual difference; AI helps manage this complexity by encoding design rules and component relationships deterministically. ### Future of AI in Development - AI should move beyond just generating simple code to understanding complex layout rules, component relationships, and design system constraints, leading to more valuable outcomes for product development. ![Screenshot at 00:04: Title slide featuring Jake Allbaugh and the presentation title: "Crafting design context for agentic coding workflows".](https://ss.rapidrecap.app/screens/r_VhvtRP81E/00-00-04.png) ![Screenshot at 00:33: Slide emphasizing the presentation's theme: "Not just faster, further," highlighting the goal of deeper, meaningful creation.](https://ss.rapidrecap.app/screens/r_VhvtRP81E/00-00-33.png) ![Screenshot at 01:56: Visual representation contrasting 'What could exist' \(complex, varied design options\) with 'What should exist' \(streamlined, production-ready structures\).](https://ss.rapidrecap.app/screens/r_VhvtRP81E/00-01-56.png) ![Screenshot at 03:37: Diagram illustrating the flow where Design & Code Context \(Figma\) and Codebase Context \(IDE\) feed an AI model to produce structured code/assets.](https://ss.rapidrecap.app/screens/r_VhvtRP81E/00-03-37.png) ![Screenshot at 04:46: A slide displaying the vast amount of data \(metadata\) returned from Figma, illustrating the complexity the AI needs to parse.](https://ss.rapidrecap.app/screens/r_VhvtRP81E/00-04-46.png) ![Screenshot at 05:55: A demonstration of the Code Connect UI showing how components map to their source code files.](https://ss.rapidrecap.app/screens/r_VhvtRP81E/00-05-55.png) ![Screenshot at 07:07: Diagram showing the AI model processing both Figma context and Codebase Context to generate structured output components.](https://ss.rapidrecap.app/screens/r_VhvtRP81E/00-07-07.png) ![Screenshot at 20:43: Slide announcing 'Figma MCP Server GA' with visual confirmation of successful local \(127.0.0.1\) and remote \(mcp.figma.com\) connections.](https://ss.rapidrecap.app/screens/r_VhvtRP81E/00-20-43.png) ![Screenshot at 21:14: Final slide summarizing the core message: "Your expertise and systems make the contextual difference."](https://ss.rapidrecap.app/screens/r_VhvtRP81E/00-21-14.png)