What if the tools that write your code could also design your interface?
For years, product development has followed a fairly structured pipeline: designers build the interface in design software, developers translate those designs into code, and teams spend countless hours ensuring both sides stay synchronized.
But what if that separation disappeared entirely?
Figma recently introduced a new capability that allows AI agents to design directly on the Figma canvas. Instead of simply generating UI suggestions or writing frontend code, these agents can now interact with real design files, components, and design systems.
The goal is simple: allow AI to participate directly in the design workflow rather than sitting outside of it.
Before diving deeper, here are some important terms to understand.
Key Terms
Figma Canvas: The workspace where designers create and edit UI layouts, components, and prototypes inside Figma.
AI Agent: An AI system capable of performing tasks autonomously, such as generating code, modifying files, or executing workflows.
Design System: A structured set of reusable UI components, styles, variables, and design guidelines used to maintain consistency across a product.
MCP Server (Model Context Protocol): A system that allows AI agents to interact with external tools and environments while maintaining context about how those tools work.
Design Tokens: Reusable design variables (like colours, spacing, and typography) shared between design and development environments.
Skills: Instruction files written in Markdown that teach AI agents how to perform specific workflows within Figma.
How AI Agents Work Inside Figma
Traditionally, AI tools interacting with design systems lacked access to the detailed context that designers rely on daily. This often resulted in designs that felt generic or inconsistent with an existing product.
Figma’s new MCP server changes this by allowing AI agents to operate directly on the canvas.
Instead of generating isolated design ideas, agents can now:
Create UI components using existing design systems
Modify layouts directly in Figma files
Access variables like color palettes and spacing rules
Generate or refine design assets alongside developers
In practice, this means AI can now participate in the same workspace as human designers.
Two core tools enable this interaction.
1. Generate Figma Design
This tool converts HTML from a live application or website into editable layers inside Figma.
If developers change a UI component in code, the design can quickly be recreated inside Figma so designers can iterate on it again.
2. Use Figma
This tool allows AI agents to create or modify design elements directly on the canvas using the existing design system.
Instead of producing mockups outside the workflow, the AI works inside the same structure that designers already use.
Together, these tools allow teams to move fluidly between code and design.
The Role of “Skills”
One of the most important ideas introduced with this system is the concept of skills.
Skills are instruction sets written in Markdown that define how AI agents should behave while working in Figma.
They provide guidance such as:
Which steps to follow when generating designs
How to apply design system rules
What spacing conventions to use
Which components should be reused
In other words, skills give agents access to the intent behind a design system, not just the assets themselves.
This makes AI behaviour far more predictable.
Because AI models are inherently non-deterministic (the same prompt can produce different results), encoding workflow instructions into skills ensures that generated designs remain consistent with the team’s standards.
Several example skills were released alongside the feature, including:
Generating components from a codebase
Creating new UI screens from existing components
Applying hierarchical spacing automatically
Synchronizing design tokens between code and Figma
Running multi-agent workflows to build designs in parallel
Anyone can create a skill without needing to build a plugin or write traditional software code.
Self-Healing Design Iteration
Another interesting capability introduced with this system is self-healing iteration.
When an AI agent generates a design screen, it can:
Take a screenshot of the result
Compare it with the expected output
Automatically adjust the design if something does not match
Because the AI is working with real components, variables, and layout systems instead of static images, these adjustments interact with the underlying design structure.
This means the AI is not just editing visuals; it's modifying the actual system that defines how the interface works.
What the Authors and Developers Claim
According to the teams developing this system, integrating AI directly into the design canvas has several benefits:
First, it removes the gap between design and development.
Instead of translating between tools, teams can iterate within a shared environment where code and design remain synchronized.
Second, it allows AI to work with real product context.
Design agents can now access:
existing components
layout rules
typography systems
accessibility specifications
Finally, encoding workflows into skills makes AI outputs more consistent and predictable, which is critical when building real production software.
What This Means for Mobile Designers
For mobile designers, the introduction of AI agents directly into the design canvas could significantly change how interfaces are created, iterated on, and maintained.
Some of the most useful changes include:
AI-Assisted UI Generation
Designers can generate full UI screens using existing components and design tokens, allowing early prototypes or layout explorations to be created much faster.
Design System Enforcement
Because agents work directly with components, variables, and tokens, designs automatically follow the standards defined in the design system. This helps maintain consistency across large mobile applications where design-drift is common.
Automated Design Refinement
AI agents can iterate on their own output by analyzing screenshots of generated designs and adjusting spacing, layout, or components until the design better matches expected results.
Accessibility Integration
Some AI skills can generate screen reader specifications or accessibility metadata directly from UI designs, making it easier to incorporate accessibility considerations early in the design process.
Collaborative Design Workflows
AI agents can potentially work alongside designers as assistants, generating components, applying spacing rules, or organizing layouts while the designer focuses on higher-level creative decisions.
Overall Significance
The most important idea behind this feature is not simply that AI can generate designs.
It’s that AI can now work inside the design environment itself.
Instead of generating UI concepts externally, AI agents are becoming participants in the design process. Operating within the same structure, systems, and constraints that human designers use.
This shifts AI from being a design suggestion tool to a collaborative design partner.
My Thoughts:
After using Figma for a couple of years now, I can confidently say that this is a change that designers have been salivating over since the introduction of Figma Make.
Any and all code created by Figma Make would not only be unusable in most cases, but would also be so incredibly bloated that it would not be worth trying to use for anything development-wise.
Most of the work comes from not including every detail possible in the first prompt, and there is almost no way that it will reach exactly what you want it to be without purchasing a subscription to get more tokens in Figma Make.
I can now say goodbye to almost all of my front end development time.
Thank you Figma! 🫡
Agents, Meet the Figma Canvas | Figma Blog
Starting today, you can use AI agents to design directly on the Figma canvas. And with skills, you can guide agents with context about your team’s decisions and intent.
figma.com
Top comments (0)