Figma/design-systems

245 posts

figma

How To Move Fast Toward the Right Thing | Figma Blog (opens in new tab)

AI has made software execution dramatically faster, but it has not made judgment easier. The article argues that teams must deliberately decide what is worth building, provide agents with strong context and constraints, and preserve a distinct human point of view. Otherwise, polished prototypes can create hidden tech debt and increasingly average products. ## AI Accelerates Execution, Not Clarity - AI can quickly produce polished, production-like outputs, but apparent polish may hide weak decisions and fragile implementation. - Large language models often fill in missing requirements themselves, causing prototypes to fail under real-world constraints. - **Cognitive surrender** describes accepting AI-generated decisions without scrutiny or independent deliberation. - Teams should follow a “consideration imperative”: pause to understand the problem and define the right outcome before accepting the first plausible solution. ## Context Has to Come First - Agentic engineering shifts developers from manually writing every line of code to expressing intent clearly and directing AI. - Effective intent requires: - **Deterministic layers**, such as tests, type checks, and validation, to catch model errors consistently. - **High-signal context**, including specifications and documented components. - **Clear interfaces**, so agents understand how systems and components connect. - Tools such as Figma MCP’s Code Connect can provide agents with real production components, including props and variants, rather than forcing them to infer implementation from pixels. - Investing in design systems and documented decisions gives agents a precise vocabulary and guardrails, producing more consistent output, leaner code, and less technical debt. ## Good Can Still Be Average - AI tends to generate work that resembles common patterns in its training data, or work that is “in distribution.” - Typical AI-generated results—geometric gradient logos, familiar presentation fonts, or rounded-corner cards—are competent but interchangeable. - When teams repeatedly accept adequate results, their judgment can narrow from asking “What should this be?” to choosing “Which option is least wrong?” - As AI raises the baseline of acceptable work, products can become unremarkable unless people deliberately define what makes them distinctive. ## The Point of View Needs to Be Yours - AI can improve execution, but it cannot replace a team’s responsibility to establish intent, standards, and a meaningful perspective. - Without a clear point of view, the model’s default assumptions determine both what gets built and how it looks. - Moving quickly is valuable only when speed is paired with careful consideration, strong context, and deliberate choices. Teams should treat AI as an execution partner—not as the source of product judgment. Define the problem, encode decisions in systems and safeguards, and challenge generic outputs before shipping.

figma

Try These 10 Skills—And Show Off Your Own | Figma Blog (opens in new tab)

Skills are plain-text Markdown instructions that help Figma’s agent apply a designer’s preferences, workflows, and judgment. The post argues that skills are useful not only for engineers but also for codifying creative approaches, such as easing curves, typography, image audits, and motion principles. Figma now lets users create, preview, edit, and iterate on skills directly in the product, with some also compatible with Figma’s MCP server. ## What Figma skills enable - Designers can create skills from: - A reference design frame - Specific instructions or guidelines - Repeated personal workflows - The agent can draft a skill, which users can preview and test in chat. - Skills can be refined by: - Editing instructions and formatting - Asking the agent for recommendations - Opening the Markdown editor for manual changes - Skills can capture individual design judgment and help teams reproduce a consistent point of view. - Some skills work with Figma’s MCP server and third-party agents. ## Examples of personal design skills - `/image-audit` checks whether images in a file can be exported and places a report on the canvas. - `/shader-starter` helps users write more effective shader prompts. - `/make-a-type-scale` creates a type scale from selected text and generates corresponding font variables. - `/ease-like-miggi` applies the author’s preferred easing curves to motion keyframes, allowing teammates to use the same motion style. ## `/xray-scan`: Create radiographic image effects Created by Adele Ix, this skill transforms a photo or description into a realistic X-ray image. - Produces two visual treatments: - Glowing white lines on black - Darker tones on white - Supports layered monochrome collages with glowing edges. - Is especially suited to combining multiple scans into a unified composition. ## `/find-animation-opportunities`: Identify missing motion Created by Emil Kowalski of Linear, this skill reviews a design and suggests where animation could improve the experience. - Identifies elements that should animate and areas that may be over-animated. - Recommends: - What should move - Where the motion should occur - Exact animation values - Suggestions can be implemented manually in Figma Motion or applied by the agent. - Works best when focused on one frame with contextual information, such as the target persona. - It can also be asked which elements should remain static. ## `/camera-pan-and-zoom`: Animate static compositions Created by Mallory Dean, this skill adds camera-like movement to a static design. - Builds a nested camera rig around selected content. - Supports pan, zoom, and roll animations. - Can create directed sequences, such as touring a grid of cards before zooming out to reveal the full composition. - The skill is intended to make static compositions feel more cinematic and dynamic. ## Practical takeaway Designers can use skills to turn personal techniques and repeatable creative decisions into reusable tools. Start with a focused workflow, test the generated skill in Figma, and refine its Markdown instructions until it reliably produces the desired result.

figma

Better Code, Fewer Tokens: The Benefits of Code Connect in MCP | Figma Blog (opens in new tab)

Code Connect improves how coding agents translate Figma designs into production code by supplying real design-system components, imports, and prop values. Figma’s evaluations found that Code Connect reduced median task duration by 19.6%, lowered token usage by 29.5%, and increased code quality by one point on a 1–4 scale. The central conclusion is that better design-to-code context helps agents work faster while producing code that fits existing codebases. ## The Problem: Visually Correct but Technically Wrong Code - Without production context, agents often: - Rebuild interfaces from basic primitives. - Invent components that already exist. - Choose the wrong design-system component. - Spend extra tokens searching, debugging, and rewriting. - Figma’s MCP server normally provides a React representation of the design through `get_design_context`. - This output may match the visual design but does not explain how the design maps to a company’s actual component library. ## How Code Connect Enriches MCP Responses - Code Connect links Figma components to their real implementations in a codebase. - With Code Connect templates configured, MCP responses replace generic React markup with production-relevant snippets. - Agents receive: - Correct component imports. - Accurate component names. - Appropriate property values. - Code that reflects the company’s design system. - For example, generic markup for a tab control can be replaced with an existing component such as: ```tsx <SegmentedControl value="design" options={["Design", "Code"]} /> ``` ## Coinbase Case Study - Coinbase’s Design Systems team adopted Code Connect as engineers increasingly used coding agents. - Without Code Connect, agents sometimes fabricated alternatives, such as constructing a stepper from progress bars. - With Code Connect, agents received literal imports and accurate code representations for Coinbase Design System components. - Coinbase reported improved output quality and reduced token usage. ## Evaluation Results - Figma created an evaluation harness that ran identical design-to-code tasks: - Once without Code Connect. - Once with Code Connect templates. - The evaluation covered 27 test cases. - It measured: - Code quality. - Token consumption. - Task duration. - The tests used two React-based design systems: - Simple Design System (SDS), Figma’s example system. - Figma Pattern Library (FPL), a larger internal system. - Across the tests, Code Connect produced: - **19.6% lower median task duration** - **29.5% lower median token usage** - **A one-point increase in code quality on a 1–4 Likert scale** Teams using coding agents for design-to-code work should connect their Figma components to production implementations through Code Connect. Providing exact component context reduces guesswork and tokens while helping agents produce maintainable, design-system-compliant code.

figma

Sightlines Issue no.1: Insights from Config | Figma Blog (opens in new tab)

Figma’s first *Sightlines* issue distills lessons from Config’s Leadership Collective about leading design, product, and engineering teams in the AI era. Although organizations are still experimenting with AI, core leadership principles remain unchanged: build curious teams, preserve quality, collaborate openly, and rely on human judgment. As AI accelerates production, taste and thoughtful editing become increasingly important differentiators. ## Navigating Leadership in the AI Era - Leaders are still determining how to integrate AI into products, teams, and workflows. - The central challenge is gaining AI’s speed without sacrificing quality. - Many leaders are learning alongside their teams rather than presenting themselves as having all the answers. ## Fundamentals That Still Matter - Strong leadership continues to depend on: - Curious, critical-thinking teams - High standards for craft - Clear judgment about what makes work effective - Leaders are encouraging a beginner’s mindset by: - Starting from first principles - Experimenting with new tools and processes - Prototyping directly with their teams ## Collaboration and Human Judgment - AI tools can encourage isolated, individual workflows, so leaders are emphasizing collaboration more strongly. - Effective practices include: - Open critiques and feedback - Showing work early - Debating outcomes collectively - As AI automates more creation, human “taste”—the ability to judge, refine, and select high-quality work—becomes the key differentiator. ## Lessons from Industry Leaders - Teo Connor of Airbnb argues that an increase in mediocre AI-generated work will make strong editing and creative judgment more valuable. - Jen Dunnam emphasizes designing for people rather than chasing tools, noting that human needs remain constant. - Ian Silber of OpenAI recommends trusting capable teams and accepting that leaders cannot oversee every detail. - Jeetu Patel of Cisco describes meticulous design as a way to demonstrate care and create an emotional connection with customers. The practical recommendation is to adopt AI with experimentation and openness while preserving the human practices that sustain quality: collaboration, critical thinking, empathy, strong standards, and continual cultivation of taste.

figma

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.

figma

Issue no.17: Build with joy | Figma Blog (opens in new tab)

Figma’s Issue No. 17, “Build with joy,” celebrates the creative motivation behind making things: turning a vision into reality. Inspired by Config 2026, it presents tools, ideas, and stories that encourage designers to explore their own paths while developing stronger creative judgment. The central message is that tools help, but care, taste, and a clear point of view ultimately shape meaningful work. ## Config 2026 and Choosing Your Own Path - Figma introduces new tools and materials for its canvas, enabling teams to extend existing workflows and move faster. - The accompanying Config magazine uses a choose-your-own-adventure format, allowing readers to explore topics in any order. - Its broader focus is how teams are adapting established processes to reach new creative and professional goals. ## Cultivating Taste - Chief Design Officer Loredana Crisan defines taste as more than recognizing quality; it also involves sustaining the energy and care required to achieve it. - Her experience playing music helped shape her understanding of creative judgment. - The article emphasizes that taste develops continuously through practice, attention, and a strong point of view. - Crisan identifies care for the user, the craft, and the final result as essential qualities. ## Motion as Design in Time - Figma’s Brand Studio offers an introduction to motion design. - Motion is framed as the combination of design and time, with timing and movement affecting how an idea is perceived. - Small distinctions—such as whether an animation feels like a “whoosh” or a “whoop”—can significantly change its character and meaning. ## Color as Cultural Language - Pantone’s color experts explain how colors acquire cultural associations and influence behavior. - Familiar examples include Coca-Cola red, Barbie pink, and Brat green. - Brands use color to create meaning, communicate identity, and help drive cultural trends. - Color is presented not merely as decoration, but as a system of shared social and emotional signals. ## Further Exploration - Dylan Field recaps Config 2026 and the new dimensions Figma is bringing to its canvas. - Figma’s community imagines future software, including systems that respond to moods and tools that predict what comes next. - The latest Figma merchandise collection follows eight illustrators from initial sketches through production. Figma’s recommendation is ultimately to build with curiosity and joy: use new tools as a starting point, but rely on care, experimentation, and cultivated taste to determine what is worth making.

figma

Got Skills? Make the Figma Agent a Better Collaborator | Figma Blog (opens in new tab)

Figma’s custom skills turn team knowledge and workflows into reusable instructions for the Figma agent. They complement design systems by adding guidance such as brand voice, critique methods, writing standards, and review processes. Figma’s experience suggests that any repeated task or team-specific judgment can become a shared skill that improves consistency and collaboration. ## Custom Skills Capture Team Expertise - A skill is a reusable set of plain-English instructions for the Figma agent. - Skills can be triggered in chat with a forward slash (`/`). - Teams and organizations can publish skills so members do not have to recreate prompts or explain workflows repeatedly. - They are particularly useful for practices that are easy to use but difficult to document and often exist only in someone’s head. ## A Second Opinion on Demand Skills can provide focused critique and help teams apply shared standards. - **Simulate stakeholder feedback:** Figma created a skill based on CEO Dylan’s comments, allowing designers to pressure-test work before a review. - **Apply UX writing standards:** A skill based on Figma’s style guide checks capitalization, punctuation, and other consistency issues. - **Review work as a new user:** The agent can assess an experience from a first-time user’s perspective, exposing friction and missing context that experts may overlook. - Design systems supply components, patterns, and UI elements; skills add broader team expertise such as compliance rules, product principles, and critique frameworks. ## Build Once, Use Everywhere Repeated team rituals are strong candidates for automation through skills. - **Catch-me-up:** Summarizes recent file or project activity so returning teammates can quickly understand what happened without searching comment threads. - **Crit preparation:** Interviews the designer about the project, persona, scope, and audience, then creates a critique page with guided discussion prompts. - Figma’s crit-prep skill draws on Nielsen Norman Group best practices to encourage more effective research questions. - **Crit recap:** Organizes feedback into themes, decisions, action items, and deferred items. - Recaps can be placed on the canvas or copied into Slack, helping preserve decisions and keep follow-up work visible. ## Connecting Existing Tools The article begins describing how skills become more powerful when they can draw on the tools a team already uses, suggesting that skills can connect workflows and information across the organization. The provided excerpt ends before giving the specific examples or implementation details. Teams should start by identifying repeated tasks, recurring meetings, or expert review processes and turn those into shared slash-command skills.

figma

Introducing Figma Motion: Your Canvas Now Has a Timeline | Figma Blog (opens in new tab)

Figma Motion brings animation directly into the Figma canvas, alongside components, variables, and team collaboration. Its timeline, keyframes, presets, agent assistance, and Dev Mode support aim to make motion a shared design activity rather than a specialist handoff. The feature also enables reusable motion systems through animated components and motion variables. ## Design and Animate in the Same File - Motion is a new canvas mode alongside Design, Draw, and Dev modes. - Designers can switch a frame into Motion mode to access a timeline. - The timeline supports: - Dragging layers to control timing - Scrubbing through animations - Independent keyframes for position, scale, rotation, and opacity - Auto keyframing while the playhead is moving - Time-based comments tied to specific moments - Preset styles such as fade, move, and scale provide a quick starting point. - Animation styles can be stacked to run simultaneously or sequenced across the timeline. - Figma’s agent can guide less experienced designers and help generate or refine animations. - Motion remains in the same file as the rest of the design, reducing context switching and handoff friction. ## Build a Reusable Motion System - Animated components carry their motion behavior wherever the component is reused. - Motion can become part of a design system instead of being recreated as one-off work. - Motion variables allow teams to define reusable animation properties such as easing. - Variables can have multiple modes, letting teams switch animation behavior across an entire page or file. - Custom animation styles are planned for a future release. ## Collaboration and Handoff - Time-based canvas comments let teams review precise points in an animation. - Dev Mode gives developers access to the motion work, supporting smoother implementation. - Figma presents motion as a shared responsibility across designers, developers, and collaborators. - Atlassian users cited improved collaboration, faster feedback, and easier adoption by designers who are less familiar with animation. ## Shader Effects and Motion - Properties exposed by shaders can be keyframed on the motion timeline. - Any shader-controlled value with a slider or input field can potentially be animated over time. - This expands animation beyond Figma’s traditionally limited set of animatable properties. Figma Motion is positioned as a way to make motion native, systematic, and collaborative. Teams can prototype animations alongside interface designs, encode them into components and variables, and bring developers into the process earlier.

figma

Speaking the Language of Color | Figma Blog (opens in new tab)

Color is presented as a cultural language that influences emotions, perception, branding, and consumer behavior. The Pantone Color Institute studies these associations through psychology and trend forecasting, helping organizations choose colors that communicate specific messages. Effective color decisions require cultural awareness, a clear brand purpose, and consideration of the physical or digital medium where the color will appear. ## How Colors Influence Perception - Color associations often arise from nature: - Yellow suggests sunlight, warmth, and joy. - Green implies renewal and growth. - Brown conveys groundedness. - Blue is associated with dependability and stability. - Orange recalls fruit and tangy sweetness. - Cultural trends also shape color preferences, including: - Film, art, travel, sports, and technology. - Lifestyle changes and broader social conditions. - Economic pressures, which can cause palettes to shift. - Color meanings vary by region: - Black is associated with mourning in much of the West, while white serves that role in parts of the East. - Red can suggest love, anger, or urgency in Western contexts, but luck and prosperity in Eastern cultures. - Brands should research local color sensibilities rather than assume that a trend has universal meaning. ## Building a Brand Story Through Color - Strong brand palettes express what a company stands for and support its broader narrative. - Coca-Cola’s red communicates energy and excitement and has become inseparable from the brand. - Airbnb’s 2014 shift from baby blue to salmon pink was intended to convey warmth, humanity, comfort, and connection—qualities that supported its expansion into local Experiences. - “Brat Green,” associated with Charli XCX’s 2024 album, illustrates how an unconventional color can capture attention and reflect cultural attitudes: - Its yellow undertone adds energy and vitality. - Its organic associations suggest authenticity amid increasing digital saturation. - Its unusual appearance helps it stand out on social media. - Pantone’s own Config palette combines bright, pastel, earthy, aquatic, and nature-inspired colors to connect the physical and digital worlds. ## Designing for Materials and Surfaces - Colors do not appear identically across screens, fabrics, packaging, or other physical materials. - A color that looks appealing digitally may seem overly harsh in person. - Some hues achievable in fabric dyes may not be practical for products made from other materials. - Color decisions should therefore begin early in the design process, with the material, surface finish, and viewing context already considered. ## Tracking Cultural Change - Pantone’s Color of the Year program has run for more than 26 years and is one of the design industry’s most closely watched color forecasts. - The institute’s broader work combines color psychology, global observation, and trend forecasting to identify how cultural shifts influence color preferences. The practical recommendation is to treat color as a strategic design decision: define the intended message, understand the audience’s cultural associations, and test the color in its actual material and environmental context.

figma

4 Ways We’re Using Our MCP Server at Figma | Figma Blog (opens in new tab)

Figma’s MCP server has expanded beyond design-to-code workflows to support Slides, FigJam, Figma Make, and the Figma design agent. The post argues that agents can now create and update production-ready artifacts while preserving team context, design systems, custom fonts, and brand consistency. In practice, humans still provide review and polish, but agents can complete much of the initial content and formatting work. ## Broader MCP capabilities - Agents can create or update: - Figma Slides presentations - FigJam boards - Figma Make prototypes - Canvas designs through the Figma agent - The server supports: - Custom fonts uploaded from a user’s computer - Downloading assets as SVG, PDF, JPG, or PNG through `download_assets` - Reusable MCP skills that encode team decisions and workflows - These capabilities connect external context and coding tools with Figma’s design environment. ## Creating and refreshing Figma Slides decks - Designer advocate Mallory Dean maintains an evergreen deck about Figma’s AI product launches. - She prompted an agent to: - Update the deck with the new Figma agent - Gather information from Slack, Google Drive, Shortcut blog posts, and release notes - Suggest content updates and new slides - The agent used the `use_figma` tool and `/figma-use-slides` skill to modify the existing deck template. - The first 80% of the content work was completed before human review. - Mallory still needed to replace images, edit copy, and approve the final slides. - Uploaded custom fonts allowed the deck to use the correct brand typefaces rather than web-safe substitutes. - Similar workflows can support: - Product kickoff decks - Design explorations - Go-to-market presentations - Sales decks with current product information - The stated benefit is faster production of presentations that remain aligned with a team’s design system and brand. ## Generating FigJam boards from live data - Product manager Prasant Lokinendi frequently prepares feature kickoff workshops. - Building an engaging FigJam board requires collecting company context and formatting the board for each session. - To streamline this process, he created the `/figjam-builder` skill. - Figma describes skills as a way to make agent outputs more consistent and context-aware. - Teams can use community-created skills or submit their own through Figma’s community-resources repository. Figma’s MCP workflows are most useful for accelerating repetitive preparation and production work while leaving humans responsible for review, judgment, and final creative decisions.

figma

You Never Stop Cultivating Taste | Figma Blog (opens in new tab)

Mastery is not just learning tools or techniques; it is developing a distinctive point of view through repeated practice and intentional choices. Figma’s Loredana Crisan argues that “taste” is cultivated continuously through care for one’s craft, empathy for users, and disciplined attention to detail. AI can expand creative exploration, but it cannot replace the judgment that makes work personal and meaningful. ## Taste Is Built Through Practice - Expertise requires understanding both the material and the tools of a craft. - Crisan compares design to piano and music composition: technical correctness matters less than knowing why choices create emotion and impact. - Taste develops through: - Consistent practice - Mentorship and critique - Feedback and collaboration - Sustained creative attention - Developing a point of view is the most time-consuming part of mastery—and it never truly ends. ## Taste Is a Form of Care - Taste is visible when work feels intentional, refined, and thoughtfully executed. - Dieter Rams’ Braun products demonstrate this principle by considering not only an object’s function but also its surroundings, physical interactions, and overall experience. - Taste is not universal popularity; different designers can have different sensibilities while showing equal intentionality. - In product design, taste appears in trade-offs such as: - Form versus function - Expressiveness versus legibility - What to include versus what to omit - Which compromises to accept or reject - Taste comes from both love of the craft and care for the people using the result. - Designers should test details across varied contexts, including screen sizes, color profiles, languages, devices, transitions, and uncommon user states. ## What Designers With Taste Demonstrate When hiring for taste, Crisan looks for three qualities: - **Discernment:** The ability to identify what is not working and explain why with nuance. - **Empathy:** Attention to the person experiencing the interface, including needs that may not be obvious. - **Creative energy:** A persistent drive to make, experiment, and pursue side projects or unresolved problems. ## AI Expands Exploration but Cannot Replace Judgment - AI may reduce the labor involved in producing work, but accepting its first output would undermine the iterative process required for quality. - Examples such as James Dyson’s 5,127 prototypes illustrate how refinement and rejection are central to creative mastery. - Better tools increase the distance a creator can travel between an idea and its execution, but the vision still comes from the creator. - AI can help generate more possibilities, while taste determines which possibilities are worth developing. - A creator’s distinctive voice emerges from accumulated, intentional decisions repeated over time. The practical recommendation is to use AI and other tools to explore broadly, while continuing to practice, critique, refine, and care deeply about both the craft and the people who experience the final result.

figma

4 New Ways to Go From Idea to Product With AI Tools | Figma Blog (opens in new tab)

AI tools are reshaping product development by enabling teams to prototype, test, and refine ideas earlier and across both code and design. The article argues that working prototypes can expose problems that static mockups miss, while preserving design context throughout the path to production. It illustrates this shift through examples from FloQast, Merkle, Affirm, and Accor. ## AI-enabled product workflows - Product teams are: - Prototyping earlier instead of relying solely on traditional requirements documents. - Testing ideas in code before finalizing designs. - Exploring more possibilities at greater scale. - Carrying design-system context into implementation. - Figma presents these practices as ways to balance faster iteration with deliberate product decisions. ## Testing constraints in code AI coding tools make it easier for non-developers and product teams to build functional prototypes involving: - Multi-step workflows. - Conditional behavior based on user permissions or data. - Actions that trigger subsequent actions. - Realistic backend logic and data relationships. A prototype can then be moved into Figma with Codex to Figma for collaborative exploration and refinement. If implementation work continues in code, teams can move the design back through MCP while retaining the relevant design context. ## FloQast’s complex workflow prototype ### The challenge - FloQast needed to redesign an accounting workflow for investigating discrepancies. - Users previously had to move between multiple pages to: - Find an issue. - Investigate it. - Resolve it. - The team wanted one page where users could see tasks, identify blocked work, and take action. - Because the workflow depended on interconnected steps, real data, and business logic, a static mockup could not fully validate the concept. ### The unlock - UX manager Benjamin Ellis built a working prototype with an AI coding tool. - The prototype included: - A simulated backend. - Realistic data based on an actual customer’s workflows. - Clickable scenarios where completing one task affected the next. - Testing the workflow revealed interactions that appeared sound in a design mockup but failed when subjected to realistic conditions. ### The impact - The team and designer committed to a direction only after testing it against real scenarios. - They identified interaction problems earlier. - The approach reduced later surprises and increased confidence in the final design. ### When this approach is useful - When behavior depends on permissions, data, or sequential actions. - When a small fix is faster to make directly in code. - When designers and developers need a working example to scope a complex experience together. ## Exploring with AI on the canvas The next section introduces using AI directly in the Figma canvas to explore product possibilities. The provided excerpt ends before describing the specific workflow or company example. Teams should use code-backed prototypes when logic and real data are central to the experience, then bring those prototypes into collaborative design tools to refine decisions with greater confidence.

figma

The Figma Design Agent is Here | Figma Blog (opens in new tab)

Figma introduces a design agent built directly into its canvas and left rail. Unlike external tools, it understands a team’s components, tokens, libraries, standards, and best practices, while preserving designers’ ability to manipulate files directly. The agent is intended to support exploration, iteration, collaboration, and repetitive production work without forcing a choice between AI speed and design precision. ## A Figma-native design agent - Works inside the same Figma file as the team, acting as a collaborative partner. - Can start from any design layer and generate or edit Figma layers. - Supports parallel prompting to explore multiple ideas simultaneously. - Lets designers continue making manual edits while the agent works. - Uses context from frequently and recently used components, with additional control through selected libraries and `@` mentions for tokens, variables, and components. - Is designed for direct manipulation and editing of Figma files, rather than simply producing external suggestions. ## How the agent works with MCP and Figma Make - The Figma agent is intended for canvas-based work and has deeper design-system context. - Figma’s MCP server and `use_figma` support movement between code and the canvas: - Pull code into Figma for iteration or design-system application. - Push designs back to code while maintaining fidelity. - Teams can begin in Figma Design, use the agent to clarify flows, states, copy, and structure, then send work to Figma Make to generate code layers. - Alternatively, teams can start in Figma Make, copy frames into Figma Design, refine them with the agent, and return them to Make. ## Exploring more design directions - The agent helps designers generate several approaches instead of settling for the first plausible result. - It can: - Produce distinct stylistic directions for the same design. - Compare checkout flows optimized for different business goals. - Generate alternative information architectures. - Create multiple screen or layout variations. - Example prompts include generating organic, modern, and retro style options, or producing image carousels with different title treatments. - Once a direction is selected, hands-on editing remains an efficient way to refine the design and reduce unnecessary prompting. ## Automating repetitive design work - The agent handles bulk operations that require both scale and design context. - Potential tasks include: - Renaming variables consistently. - Replacing components across many screens. - Applying padding changes throughout a flow. - Populating frames with realistic content. - Updating typography across a file. - Replacing placeholder text and imagery. - Setting chip components to active states. - Converting screens to dark mode with appropriate fill and contrast changes. - For design-system teams, it can help update library descriptions, tags, use cases, naming conventions, and component documentation. - This automation is designed to preserve momentum between AI-generated changes and precise manual adjustments. The practical recommendation is to use the Figma agent for broad exploration and context-heavy repetitive work, while retaining direct canvas manipulation for judgment, refinement, and final design decisions.

figma

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.

figma

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.