figmaJul 30, 2026

A Properties Panel and Annotations, Now in Figma Make | Figma Blog (opens in new tab)

Figma Make now combines visual editing with code-aware prompting through a properties panel and annotations. The properties panel handles precise visual changes, while annotations let users describe interactions and animations in context. Together, these tools reduce prompting guesswork, use fewer credits, and help ensure visual edits are reflected in the underlying code. ## Visual Editing with the Properties Panel - Users can select elements and adjust spacing, typography, layout, opacity, z-index, borders, corner radii, and other properties. - A DOM tree acts like a layers panel, making it easier to find and select elements in the code. - Multiple instances of an element can be updated simultaneously. - Edits use existing color and typography tokens from the codebase. - Each change is staged in the prompt box for review or disposal before being applied. - Applying the changes updates the underlying code and creates a new file version. - Future Code Connect integration will link Make elements to Figma Design components. ## Contextual Changes with Annotations - Users can mark one or more areas directly on the canvas and describe the desired change. - Annotations support behavior beyond basic styling, such as: - Hover zoom effects - Delayed button fades - Press effects - Full-screen navigation overlays - The agent receives the exact location and context of the selected elements, making prompts more specific. - This approach supports flexible natural-language instructions while avoiding the ambiguity of describing element locations manually. ## Credit Savings and Workflow - Direct manipulation gives the agent a precise target and requires fewer tokens than a text-only prompt. - Edits are staged without consuming credits. - Credits are used only when the user applies the changes. - The workflow keeps design experimentation, review, prompting, and code updates in one continuous process. Figma’s broader goal is to make code editing feel more like visual design. The same properties-and-annotation workflow is planned for code layers on the Figma canvas, further connecting design exploration with production code.

design-to-codefigmafigma-makecode-connect+2

figmaJul 16, 2026

Workflow Lab: Deploying Designs Directly with Figma Make | Figma Blog (opens in new tab)

Figma’s workflow connects design, production code, and team review so designers can handle small, high-impact improvements without waiting for engineering backlog prioritization. Using Figma Make with a real codebase, a designer can identify accessibility issues, implement craft-level fixes, and move the work toward a merged pull request. The approach keeps engineers focused on larger architectural work while preserving design nuance and collaboration. ## The Problem with Backlog-Driven Fixes - Minor accessibility and usability improvements often enter a backlog where they compete with larger engineering priorities. - Small changes may be too granular to prioritize but too valuable to ignore. - Written handoffs can lose important nuance, creating clarification cycles between designers and engineers. - The example organization, the fictional Museum of Speculative Futures, is simultaneously improving accessibility and rewriting its website architecture. ## A Shared Ownership Model - The product manager proposes that engineers continue handling the major rewrite. - The designer takes end-to-end ownership of lower-risk, craft-level changes. - Figma Make with production code enables the designer to work directly against the real website implementation. - The workflow is intended to take changes from the Figma canvas through team review and into a pull request without filing a ticket. ## Testing the Existing Experience - Before making changes, the designer uses the Figma agent to generate synthetic personas, including: - A first-time visitor planning a trip - A returning member - Someone navigating with a screen reader - These personas explore the site and surface obvious friction early. - The audit identifies several issues: - A confusing exhibition or visit-page label - A call-to-action that is easy to miss - A date picker that is difficult to understand - A blank state when search returns no results - The article emphasizes that synthetic personas do not replace real user research, but they can identify issues before in-person sessions. ## Reviewing Design Improvements - The designer addresses the findings directly on the canvas. - The designer, engineer, and product manager review the proposed changes together. - They agree on improvements such as: - Clearer navigation language - A more prominent call-to-action - A more usable date picker - The changes support the shared goal of making the site easier to navigate for people with different ways of experiencing the web. The recommended workflow is to reserve engineers’ time for substantial technical work while enabling designers to directly resolve small, accessibility-focused issues in production code. Figma Make, the Figma agent, GitHub integration, and canvas-based review create a path from design insight to implementation without losing context or waiting indefinitely in the backlog.

design-to-codefigmaaiaccessibility+2

figmaJul 10, 2026

How Decagon Uses AI For Design System Saturation | Figma Blog (opens in new tab)

Decagon built its Deco design system to maintain quality and consistency as its AI-powered customer service platform scaled. By connecting Figma, Storybook, coding agents, and Figma MCP, the company reduced design-to-code friction and enabled agents to produce higher-fidelity implementations. The result is a shared design language and a continuous loop between design and engineering. ## Building a Design System for Quality at Scale - Decagon initially had no formal design system, while its product and team were expanding rapidly. - Inconsistencies across the platform weakened the polish expected by enterprise customers. - Designers and engineers created Deco together, addressing implementation details early, including: - Focus-mode behavior - Disabled, read-only, error, and warning states - Placeholder decisions - Existing code patterns and edge cases - Deco grew into an organization-wide Figma library with hundreds of components, styles, and variables. - Library analytics recorded tens of thousands of component insertions in 30 days, indicating broad adoption. - The system provides: - A single source of truth for design and implementation - A shared vocabulary between designers and engineers - Faster screen assembly from reusable components - Greater consistency across teams and product areas ## Connecting Design and Code with Figma MCP - Before MCP, designers exported specifications, developers interpreted them, and discrepancies were discovered during review, creating repeated back-and-forth. - Decagon moved its design-system components into Storybook so engineers and coding agents could work from precise, documented implementations. - The team created coding-agent skills that: - Require agents to use approved design-system components - Help designers add new components while keeping Figma and code aligned - With Figma MCP enabled, agents can access design specifications, code context, and the Figma canvas within the same workflow. - Designers can provide a Figma link to a coding agent, which uses design context and maps the requested interface to Deco components. - This produces high-fidelity starting points and speeds up iteration while reducing divergence between the intended design and the final code. Decagon’s experience suggests that design systems become significantly more valuable when they are connected directly to development tools and AI agents. Maintaining synchronized component libraries across Figma and code can help fast-moving teams scale without sacrificing consistency or implementation quality.

design-to-codefigmadesign-systemsai-agent+2

figmaJul 9, 2026

GPT-5.6 is Now Available in Figma Make | Figma Blog (opens in new tab)

GPT-5.6 is now available in Figma Make, where Figma says it improves both the speed and quality of AI-generated prototypes. The model is designed to produce stronger first passes, preserve existing designs more faithfully, and recover from errors without stopping. Figma’s examples suggest it can move teams from prompts or static designs to functional, responsive prototypes with less iteration. ## Faster exploration and error recovery - GPT-5.6 can turn complex prompts into working prototypes quickly, helping teams explore multiple ideas in one session. - In Figma’s stock-tracking app evaluation, it created: - An interactive dashboard - Sample prices and performance data - Keyboard shortcuts and search - A dark, gothic visual style - The model is described as more token-efficient, helping users make better use of Figma Make credits. - When builds encounter errors, GPT-5.6 can investigate and self-heal instead of stopping. Figma reports that it independently diagnosed and fixed a blank build. ## Faithful design-to-code conversion - GPT-5.6 can build prototypes from existing design specifications or Figma Design files. - In a nature sound player test, it preserved: - Layout and visual hierarchy - Spacing, proportions, and styling - A multi-track timeline and sound library - It also implemented functional interactions, including: - Play, pause, and skip controls - Working audio playback - Multiple playable tracks - Audio-responsive visual effects ## Higher-quality first passes - Figma says GPT-5.6 produces polished initial prototypes with functional interactions and responsive layouts. - A bookshelf e-commerce example included: - Product descriptions, measurements, and care information - Populated information dropdowns - An interactive product photo library - A clickable navigation menu - The prototype adapted reliably across different screen sizes without additional prompting. - Stronger first passes allow teams to spend more time refining ideas collaboratively rather than repairing basic implementation problems. GPT-5.6 is available through Figma Make’s model selector. Users can select it directly in Make and consult Figma’s help center for guidance on choosing and using AI models.

design-to-codeprototypingfigma-makeresponsive-design+3

figmaJun 29, 2026

Start Anywhere, a Magazine by Figma | Figma Blog (opens in new tab)

Figma’s 2026 *Start Anywhere* magazine explores how new tools are expanding the ways people begin and develop creative work. Its central argument is that as motion, code, and AI become more integrated into the design canvas, creative workflows are converging and becoming more expressive. Rather than prescribing one starting point, Figma encourages designers of all experience levels to choose an entry point and keep exploring. ## A Magazine About Design’s Changing Landscape - The magazine was created for Config 2026 by No Ideas, featuring work by several artists and designers. - Figma’s annual publication aims to capture what matters in design beyond rapidly changing product releases. - This year’s theme reflects the difficulty—and freedom—of writing about tools that evolve quickly. - The enduring principles are curiosity, patience, and understanding what something is before focusing on what it does. ## More Materials on the Canvas - Figma Motion introduces a timeline directly into the canvas, allowing designers to work with movement alongside components, variables, and collaborators. - Motion design principles remain important even as tools become easier to use: - Timing and mechanics give movement meaning. - Foundational craft helps designers make better creative decisions. - Code is also moving into Figma’s shared multiplayer environment. - Code layers allow teams to explore design and implementation side by side, making code a more direct part of the design process. ## The Design-to-Code Loop - As work moves fluidly between code and canvas, design and development workflows increasingly converge. - The magazine examines how this connected process can: - Enable faster experimentation. - Support multiple directions in parallel. - Improve collaboration between designers, engineers, and AI-focused teams. - Carry ideas more smoothly from early exploration into production. ## AI as a New Path from Idea to Product - AI tools are changing where product work begins and how ideas move through the development process. - The magazine presents examples from four organizations using AI in different ways. - These approaches suggest that AI can influence: - Ideation and initial exploration. - Product design and iteration. - The transition from design concepts to working software. - The continuity of ideas through production. ## Imagining Future Human–Computer Interaction - The “Future states” section asks what it might mean to reduce the gap between human and machine intelligence. - Contributors imagine software that interacts in more human-centered ways, including: - Interfaces that respond to users’ emotions. - Systems that help people anticipate the consequences of decisions. - New forms of interaction beyond traditional interfaces. ## Who the Magazine Is For - The publication addresses: - Beginners with ideas but no clear starting point. - Experienced practitioners looking for new creative possibilities. - Anyone who wants to produce effective design efficiently. - Its three covers represent different prompts and entry points into the same broader questions. The practical message is to start wherever the most interesting possibility appears—whether in design, motion, code, or AI—and continue iterating. The tools may change quickly, but curiosity and strong creative fundamentals remain useful across every workflow.

design-to-codefigmaaireact+1

figmaJun 24, 2026

Config 2026: New Materials, New Tools and a More Expressive Canvas | Figma Blog (opens in new tab)

Figma’s Config 2026 focuses on making the canvas a more expressive, collaborative environment where code, motion, shaders, generative plugins, and Weave tools work alongside traditional design layers. The company argues that code is a design material rather than a separate discipline, and that AI should support—rather than replace—human creativity. New features aim to let teams explore ideas faster while keeping design, implementation, and collaboration connected. ## Code Layers on the Canvas - Figma is introducing code layers, allowing any design layer to become an interactive code layer with one click or a prompt. - Teams can duplicate code layers and explore multiple directions side by side, just as they would with design frames. - Code layers support collaborative workflows including riffing, commenting, and iteration within the same Figma file. - Designers can extract code-generated designs back into editable design layers. - When changes are made to the design, a single click updates the corresponding code layer. - Early access is expected to begin in July 2026 through the Figma beta waitlist. ## Motion as a Core Design Material - Figma Motion brings animation directly into Figma Design, reducing the need to move between separate tools. - Its timeline includes keyframes, presets, and other controls for creating motion from scratch or adding animation to existing designs. - The Figma agent can generate an initial motion concept for designers to refine. - Motion can become part of a design system: an animation applied to a component can carry across screens and collaborators’ files. - In Dev Mode, developers can inspect the complete timeline, including timing values, easing curves, and keyframes. - Animation can be copied as CSS, JSON, or React-ready code. - Motion is MCP-compatible, allowing animated frames to be passed directly to coding agents. - Export formats include MP4, WebM, Animated SVG, and GIF, with additional formats planned. ## A More Unbounded Canvas - Figma describes the canvas as more than a place to store work: it is intended to connect ideas, tools, collaborators, and implementation. - The company’s broader Config strategy is to provide composable materials that let users experiment at the speed of their thinking. - Upcoming capabilities include shader fills and effects, generative plugins, Figma Weave tools, and expanded Figma agent functionality. - Figma argues that AI has lowered the barrier to creating, but people—not AI—will raise the creative ceiling through experimentation and bold expression. Figma’s direction is to unify design and development in one collaborative workspace. Designers and developers should use the new materials selectively: code layers for interactive exploration, Motion for reusable animation systems, and the canvas as a shared environment for rapid iteration from concept through implementation.

design-to-codefigmagen-aireact+3

figmaJun 24, 2026

Code on the Figma Canvas | Figma Blog (opens in new tab)

Figma is introducing code layers, making interactive code a collaborative object directly on the Figma canvas. Teams can generate, import, compare, edit, and convert code and designs in both directions, bringing designers and developers into one shared workflow. The feature aims to make experimentation and design-to-code iteration more visual, collaborative, and accessible. ## Creating and Sharing Code on the Canvas - Users can add a code layer from Figma Design, convert an existing frame into code, or ask the Figma agent to generate an implementation. - Projects can begin from templates, natural-language prompts, imported GitHub repositories, or uploaded local folders. - Code generated in Figma Make can be brought into Figma Design as a code layer. - Interactive code becomes part of the shared file, allowing teammates to inspect, comment on, and refine it together. ## Exploring Multiple Alternatives - Code layers work like duplicated design frames, allowing teams to explore several working alternatives side by side. - Designers can move, resize, and adjust elements while seeing the corresponding code update immediately. - Prompts can generate new versions while preserving the original. - Teammates can collaborate on the same code layer through comments and additional prompts. ## Moving Between Code and Design - The **Extract designs** feature converts a code layer’s current state into editable Figma layers. - Teams can extract a single screen, a particular state, or an entire user flow. - Design edits can then be applied back to the code layer, enabling fluid movement between visual design and implementation. ## Editing and Shipping Code - Users can open the code editor, annotate desired changes, ask the agent to implement them, or edit the code manually. - Once approved, the updated implementation can be converted back into a code layer and pushed to the project repository. - The resulting changes remain visible to the wider team on the Figma canvas. ## Availability - Code layers are rolling out in closed beta over the following weeks. - Interested users can request early access through Figma’s Config beta sign-up. Figma’s code layers are intended to make the canvas a shared space for designing, testing, and refining real interfaces. Teams interested in combining visual collaboration with AI-assisted development can request beta access and evaluate the workflow against their existing design and repository processes.

design-to-codefigmaai-agentreact+2

tossJun 16, 2026

Why the Designer Built an App Instead of a Mockup (opens in new tab)

AI is changing design by letting designers create working prototypes rather than only static mockups. While building Toss’s “underlay” component, the author used SwiftUI, AI, and Metal shaders to design interactions directly on an iPhone. The experience reduced the translation gap between design and development and showed that a functional code prototype can become a more accurate specification than a traditional design document. ## Turning End Screens into New Starting Points - Toss identified screens that appear after users finish tasks, such as completing a transfer or payment. - These “dead ends” usually signal the end of an experience and encourage users to leave the app. - The project aimed to turn them into starting points for new experiences through a reusable component that could work throughout the app. ## The Idea Behind Underlay - Existing notification patterns—bottom sheets, toasts, push notifications, and overlays—attract attention but can interrupt what users are doing. - The author found inspiration in removing a shipping label from a moving box and revealing text that had already existed underneath. - This led to the concept of an **underlay**: instead of placing new information on top of the current screen, the component reveals something beneath it. - The component needed to be recognizable as a feature, preserve the existing experience, and remain reusable across the app. ## Designing Interaction with AI and Code - Figma prototypes showed that underlay’s movement mattered more than its static appearance. - Without experience in Protopie or Framer, the author built an iOS playground in SwiftUI using Xcode and AI. - The designer’s role was to: - Describe the intended experience - Select the best options proposed by AI - Evaluate the result on a real device - The process became a cycle of designing, choosing, testing, and refining. ## Building and Refining the Prototype - The author first created a personal playground for quickly experimenting with layouts, buttons, and text. - Each change was tested through actual device interaction rather than static previews. - The prototype was revised hundreds of times because imagined motion often felt different once implemented. - A scanning-light interaction was created to suggest that AI was reading the screen and finding relevant information. - The visual effect used a Metal shader to control pixel-level properties such as: - Light diffusion - Tint and width - Movement speed - Background darkening - The author gradually began adjusting shader values directly, despite having no prior shader or interaction-tool experience. ## Replacing Interaction Guidelines with a Repository - Instead of preparing a detailed document specifying timing, easing curves, and delays, the author gave developers the working prototype repository. - The developers reproduced the core structure almost immediately because they could inspect and run the implementation directly. - During refinement, the designer adjusted values and interactions directly on the developer’s laptop with AI. - A working reference made communication more precise than phrases such as “the motion feels wrong.” - Both the AI and developers could respond to the same concrete behavior rather than interpreting abstract descriptions. ## Designing the Implementation Structure - The production iOS code ended up closely resembling the prototype’s structure. - This happened because the author had built the prototype for rapid user testing and iteration, not specifically for production. - A well-structured prototype allowed design changes to be communicated through code and reused during implementation. - The article argues that a good design is not only visually convincing; its underlying construction should also be viable. - When a prototype is built in a development-ready way, it can function as the specification rather than disposable code. ## Applying the Approach - Start with the best possible experience instead of limiting ideas to what a familiar design tool can express. - Use AI and code to create a working artifact, since real devices reveal details and textures static tools may hide. - When handing off complex interactions, provide executable code or a repository instead of relying solely on written guidelines. - As AI handles more of the “how,” designers increasingly differentiate themselves through what they choose to imagine and build.

design-to-codefigmaiosinteraction-design+3

figmaMay 28, 2026

Figma Make, Now on Your Local Code | Figma Blog (opens in new tab)

Figma is bringing Make beyond prototyping by connecting it directly to local production codebases. Designers can visually edit interfaces, use annotations and prompts for more complex behavior, and manage changes through Git workflows without leaving Figma. The broader goal is to make design and code a continuous, collaborative workflow rather than separate tools. ## Visual Editing in Production Code - Make connects to a local codebase and translates visual changes into code. - Users can select interface elements and modify: - Layouts - Colors - Fonts - Sizing - Other visual properties - Annotations let users describe interactions, animations, and other changes that go beyond simple property edits. - The feature is currently best suited to designers who already have access to their organization’s codebase. ## Git-Based Branching and Shipping - Make supports standard development workflows, including: - Creating branches - Reverting commits - Reviewing commit history - Creating pull requests - Changes remain in local commits until the team intentionally opens a pull request. - Engineering teams can review Make-generated changes like any other production contribution. ## Collaboration Between Design and Code - Local code changes can be shared as files and links with teammates who have access to the relevant branch. - Teammates can inspect changes, build on them, and compare versions through commit history. - Screens, pages, and components can be copied from Make into Figma Design as editable layers. - Changes made in Figma can be detected and brought back into Make, creating a round-trip workflow between the design canvas and codebase. ## Beta Availability - Direct editing, annotations, chat, and pull-request creation enter limited beta on May 28, 2026. - Beta access is limited to Figma’s Mac desktop beta app and requires joining a waitlist. - The features will not consume credits during beta; pricing for AI credits will be announced later. - Figma plans to expand availability to other platforms. Figma’s recommendation is effectively to use whichever environment best fits the current task—design canvas, code-based prototyping, or production code—while maintaining a shared workflow between them.

design-to-codeai-agentcollaborationfigma-make+3

figmaMay 26, 2026

Issue no.16: Trust the process | Figma Blog (opens in new tab)

Issue 16 of Figma’s newsletter, “Trust the Process,” explores how AI and agentic tools are changing product design. Its central argument is that faster creation makes judgment, context, and craft more important—not less. Teams need to choose the right problems, preserve design intent, and build workflows that connect design and code. ## Choosing What’s Worth Shipping - AI enables product teams to build and iterate rapidly. - The main risk is moving quickly in the wrong direction or settling for “good enough” output. - Strong product judgment and a clear sense of what creates meaningful differentiation remain essential. ## Using MCP to Preserve Context - Model Context Protocol (MCP) allows coding agents to access context from Figma files and design systems. - Figma’s MCP server helps developers translate design decisions into code more accurately. - Better documentation and structured design systems can make this workflow more effective. ## Building Visual Workflows with AI - Figma Weave supports AI-assisted work across video, photography, illustration, and 3D effects. - The newsletter highlights more than 20 workflow templates and methods for creating asset libraries from reference images. - Effective prompting depends on understanding the logic behind a visual language, including how to build, edit, and direct imagery consistently. ## The Design-to-Code Loop - Modern teams increasingly move back and forth between canvas and code. - This “roundtripping” gives designers and developers faster feedback and deeper product context. - Keeping real product states connected to the canvas can reduce drift between what is designed and what ultimately ships. - The convergence of design and development creates more opportunities to improve both speed and craft. ## Practical Experiments - A workflow lab demonstrates how Figma MCP can help teams refine a video export flow by bringing real product states into the design canvas. - Figma also offers efficiency tips for users who rely heavily on Figma Make, including ways to manage credits and streamline workflows. The newsletter recommends treating AI as an accelerator rather than a substitute for direction. The best results come from combining faster tools with deliberate judgment, strong context, and continuous collaboration between design and code.

design-to-codefigmaaimodel-context-protocol+2

figmaMay 12, 2026

What the Design-to-Code Loop Unlocks | Figma Blog (opens in new tab)

AI is bringing design and engineering into a more continuous, bidirectional workflow. Instead of treating code as an expensive final step, teams can use functional prototypes, editable designs, and AI assistance to explore behavior and visuals together. The result is broader participation, faster learning, and a shift from mechanical translation between design and code toward more semantic collaboration. ## AI Makes Code Part of Design Exploration - Code was traditionally costly and difficult to revise, while design allowed cheap, broad exploration. - AI reverses that relationship by making functional wireframes easier to create and iterate. - Designers can explore interaction and behavior—not just static layouts—then move work between code and canvas. - AI can translate between the two mediums in a way that preserves intent and structure rather than simply converting files or syntax. ## A More Bidirectional Collaboration Model - Code-based workflows tend to move in one direction and are often constrained by the patterns already present in a codebase. - Figma’s canvas gives teams space to reconsider assumptions and explore radically different directions. - Designers and developers can work from the same evolving artifact instead of repeatedly handing work off. - AI lowers participation barriers: people without access to an internal design system can import a live product into Figma as editable frames and begin contributing. ## Lower Learning Curves for Designers and Developers - AI turns steep technical learning curves into gradual ramps by providing a capable starting point. - People can learn frameworks, routes, React, and other concepts in the context of real work rather than abstract exercises. - Designers can extend beyond previous technical limits into areas such as shaders, 3D, and custom tools. - Deeper specialization remains possible, but the initial investment is much smaller and learning becomes more contextual. ## Curiosity as the New Differentiator - When AI tools become broadly available, access to technology alone is less likely to distinguish practitioners. - Curiosity and taste become more important: people who actively experiment can discover new possibilities. - AI functions as a patient tutor, reducing the friction of learning tools, frameworks, syntax, and development environments. - Staying effective requires continually exploring what can be built rather than relying only on existing technical expertise. The design-to-code loop is therefore less about replacing designers or developers and more about making experimentation and collaboration accessible across disciplines. Teams should treat AI as both a creative medium and a learning partner, moving freely between canvas and code while preserving room to question the initial direction.

design-to-codefigmadesign-systemsgen-ai+2

figmaApr 30, 2026

Workflow Lab: Expanding the Canvas with Figma MCP | Figma Blog (opens in new tab)

Figma’s workflow demonstrates how the Figma MCP server can reconnect design and implementation as features evolve. By reading coded states and generating editable frames on the canvas, an agent exposes product behavior that was invisible in the original design. This lets designers improve real edge cases and compare the shipped experience with design intent earlier. ## The problem: Code creates new product states - Astra, a fictional AI video platform, ships features rapidly with agentic coding tools. - An initial export flow covered sequence selection, format choice, settings confirmation, and export. - As development progressed, additional states appeared: - Encoding errors - Rendering and loading progress - Empty selections - Unsupported formats - These states were not necessarily design oversights; they emerged from real code and data. - When the canvas represents only the initial flow, designers cannot fully address the experience users will encounter. ## Expanding the canvas with Figma MCP - The Figma MCP server allows an agent to read implementation details and write results to the Figma canvas. - Using `use_figma`, the agent identifies coded states and creates editable frames using the team’s design-system components. - Astra’s canvas expands from four original frames to fourteen frames representing the broader product reality. - This replaces a slower task-and-ticket feedback loop with a direct conversation between design, code, and the agent. ## Designing better edge cases - The designer can immediately work on states that previously remained hidden: - Adds recovery guidance to the encoding error state. - Enhances the render loading state with progress information and an estimated completion time. - Adds copy and personality to the empty-selection state to encourage feature adoption. - Designers spend less time discovering missing requirements and more time shaping actual product behavior. - The canvas becomes a shared workspace for reviewing the full experience, not merely documenting the initial concept. ## Comparing design and implementation - The workflow also places the coded version beside the original Figma design for visual comparison. - A findings panel surfaces discrepancies by severity. - Example differences include: - A larger modal title - An additional “Post share link” button - A removed settings-panel surface - A demoted settings header The practical recommendation is to use Figma MCP as an ongoing design-code feedback loop: bring real implementation states onto the canvas, refine them with design expertise, and use visual comparisons to catch drift before it becomes part of the shipped product.

design-to-codedesign-systemsai-agentclaude-code+1

figmaApr 15, 2026

The TL;DR on MCP: Why Context Matters and How to Put It to Work | Figma Blog (opens in new tab)

MCP (Model Context Protocol) connects AI tools to the design decisions and data stored in tools like Figma. Figma argues that giving coding agents structured access to components, tokens, and layout rules produces code that better matches the intended design and design system. It also creates a two-way workflow in which developers and designers can move between code and canvas without losing context. ## MCP Connects Design and Development - Product work is increasingly iterative rather than a linear design-to-development handoff. - MCP lets AI coding tools access Figma files as structured design sources, not merely as screenshots. - Figma’s MCP server helps bring design context into code, while code-to-canvas tools can bring working interfaces back into Figma. - This keeps the broader product team involved as designs and implementations evolve. ## Why Context Matters for AI-Generated Code - Without context, an AI tool may: - Choose a color that resembles the brand color but is not linked to the correct design token. - Recreate a card instead of reusing an established component. - Flatten a complex, nested form into a single basic element. - These seemingly minor deviations accumulate across screens and components. - MCP exposes the underlying components, tokens, and layout decisions that explain how a design was built. ## Designers: Files Directly Influence Production Code - Design systems now influence not only human implementation but also AI-generated code, from prototypes through production. - Well-structured, consistent Figma files can guide AI toward more reliable and on-brand results. - Poor organization or small inconsistencies can spread widely because AI reproduces them at scale. - MCP also lets designers review code-built interfaces in Figma, add missing states, refine details, and prepare work for production without starting over. ## Developers: Less Translation, More Building - AI coding tools can accelerate implementation, but their output is less accurate when design intent is unavailable. - MCP reduces the translation required between a visual design and working code by supplying the system and component context behind the design. - Developers can spend more time building instead of reconstructing design decisions from screenshots or incomplete handoffs. Figma’s practical recommendation is to treat design files and design systems as active inputs to AI workflows. The better the structure and context captured in those files, the more consistently AI can generate code that reflects the intended product.

design-to-codefigmaaidesign-systems+3

figmaFeb 26, 2026

Building Frontend UIs with Codex and Figma | Figma Blog (opens in new tab)

Figma’s Codex integration creates a two-way workflow between coding and visual design. Using the Figma MCP server, developers can turn Figma designs into implementation context for Codex, then bring running interfaces back into editable Figma files. The result is a faster cycle for building, comparing, refining, and collaborating on frontend experiences. ## Starting an Application from a Design - Developers can select frames or nodes in Figma Design, Figma Make, or FigJam. - They copy a direct selection link by right-clicking a frame and choosing **Copy as → Copy link to selection**. - The link is provided to Codex with an implementation prompt, such as using existing design-system components. - Codex calls the MCP server’s `get_design_context` tool to retrieve: - Layout information - Styles and visual properties - Component details - Other design context needed for code generation - The MCP server supports additional tools and prompts for extracting information from Figma files. ## Bringing Code Back to the Canvas After iterating on the implementation, developers can import the live interface into Figma rather than recreating it manually. - The application must be rendered locally or on a publicly accessible web server. - Codex uses the `generate_figma_design` tool to convert the running UI into editable Figma frames. - Codex guides users through: 1. Creating or selecting a Figma file 2. Choosing a workspace 3. Setting up the application for capture 4. Opening the application in a browser session - The capture toolbar supports: - **Entire screen:** Captures the currently displayed screen - **Select element:** Captures a specific UI component - **Open file:** Opens the resulting Figma design for inspection ## Iterating Between Code and Design Once the interface is in Figma, teams can use the canvas to explore and refine the product. - Add design-system components. - Convert styles, fonts, and colors into variables. - Adjust layouts and add annotations. - Design interactions, empty states, and alternative flows. - Collaborate on multiple visual directions. - Send the refined design back to Codex through the same MCP workflow. The article presents this round trip as a continuous loop: design informs code, code produces a working interface, and the interface returns to Figma for further exploration. This lets teams begin from either a design or an implementation while preserving context and reducing the friction between developers and designers.

design-to-codefigmadesign-systemsmodel-context-protocol+2

figmaFeb 16, 2026

The Future of Design Is Code and Canvas | Figma Blog (opens in new tab)

The post argues that the future of product creation combines code with visual design canvases rather than treating them as separate, linear stages. Figma’s integration with Claude Code lets developers send rendered browser work into Figma as editable layers, enabling teams to explore alternatives visually and move changes back into code. The broader goal is to help builders avoid tunnel vision and choose better solutions before committing to implementation. ## Code and Canvas as Complementary Tools - Code is powerful for building and expressing ideas, while the canvas is better for comparing and navigating many possibilities. - Figma supports: - Divergent exploration of multiple approaches - Side-by-side comparison of designs - Direct manipulation of visual details - Big-picture evaluation before implementation ## Claude Code to Figma - Users can install the Figma MCP and type “Send this to Figma” in Claude Code. - The browser’s rendered state is translated into fully editable Figma layers. - After refining the design in Figma, Figma MCP can transfer design changes back into the codebase. - This creates a bidirectional workflow between production code and visual design. ## Moving Beyond Linear Workflows - Traditional product development often followed a sequence: brainstorm, design, then code. - AI and connected tools allow work to begin in a terminal, prompt box, visual interface, or sketch and move between formats. - Teams can now reconsider direction during development instead of simply advancing the first workable concept. ## Design as the Main Differentiator - As AI makes it easier to generate almost any articulated possibility, the difficult work becomes identifying the best solution. - Design judgment, craft, and point of view remain essential. - Figma positions the canvas as a space for stepping back, examining alternatives, and escaping the momentum of building the first version. The practical recommendation is to combine code-driven speed with canvas-based exploration: use code to create, Figma to compare and refine, and MCP integrations to keep both workflows connected.

design-to-codefigmaaiprototyping+2