Rather than generating an image and handing it over, Figma’s new design agent edits actual layers right on the canvas where the team is working. The quality of its output, though, depends more on how clearly your components, variables, and documentation are organized than on prompt-writing skill.
What changed is the workspace, more than the generation feature
The key to the Figma design agent is that AI and people work from the same file, the same layers, and the same design system. Released in May 2026, the agent lives in the Figma Design canvas and left rail, so you can start a prompt directly from a selected layer. While it works, designers can edit other areas themselves, or run several prompts in parallel to compare different directions.
That makes it more practical for exploration and iteration than for producing a single finished result from a blank screen. You can create three information architectures for the same checkout screen, or lay out concepts with different headline placements and image compositions side by side. Once you find a promising direction, adjust layers directly on the canvas instead of endlessly adding to the prompt. Figma also notes that direct editing can be more natural in some situations and save AI usage.
| Category | Figma design agent | Figma Make | Figma MCP |
|---|---|---|---|
| Primary workspace | Figma Design canvas | Code-based prototype editor | External coding agents and terminals |
| Main output | Editable design layers | Prototypes for validating behavior | Read and write between design and code |
| Best suited for | Exploring concepts, bulk edits, incorporating feedback | Validating interactions and behavior | Moving between code and canvas |
| Separate setup | Use directly on the canvas | Use within Figma products | MCP server connection required |
The three tools divide up stages of the work rather than compete with one another. You can use the Design agent to organize a screen’s flow, states, and copy, send it to Make to verify behavior, then bring it back into Design. If you started in code, you can also use MCP’s use_figma tool to create layers with real components and variables, then refine them on the canvas.
A good design system is now an interface for AI, too
For the agent to produce brand-appropriate results, your design system needs to be more than a showroom that looks good to people; it needs to be working rules that are hard for a machine to misinterpret. Figma says the more structured and complete a library is, the more accurately the agent can interpret and apply the design. You can choose the libraries to connect and narrow the scope by @mentioning specific tokens, variables, and components in your prompt.
If you only collect small atomic components such as buttons and inputs, the agent has to infer the composition rules. It is more effective to provide higher-level blocks—such as cards, headers, and feature rows—that already contain spacing, typography, and color rules. You also need auto layout, meaningful layer names, explicit variants and states, and color, spacing, and typography variables. Recently updated libraries must be published so the agent can reference the latest version.
Property descriptions can matter more than a polished documentation page
People can grasp on-canvas examples and prohibition markers at a glance, but an agent has to infer meaning from a tree of frames, text, and shapes. Writing the intended use, differences from similar components, states, and accessibility requirements in plain text within component descriptions communicates intent more directly.
You can also delegate documentation cleanup to the agent. Select an existing template and have it draft component descriptions, standardize layer names to kebab-case, find missing states and variants, or organize repeated screen patterns into candidates for new components. Official guidance also describes a workflow where you place a list of CSS variables on the canvas and identify items missing between actual code and Figma variables.
Fast generation and safe handoff are different problems
It is risky to treat the current beta as an automatic finished-design generator. In a public test by Entify Design using its own design system, results improved after instructing the agent to use the connected library, but issues remained: a semantically incorrect color variable was placed inside a button, and a text variable was applied to a divider. A screen can look convincing while its token references are wrong.
The same test also produced low-contrast colors on a light background. Since it was a single team’s test, it cannot be generalized to every environment, but it is enough warning that generation speed should not be treated as evidence that a handoff is ready. Figma also recommends separately checking for incorrect colors, components, variables, and styles from other libraries, and hard-coded values that should be variables before publishing a library.
Do not approve based on the canvas alone
Even when the visible colors and spacing look right, instances may be detached or variables with different meanings may be connected. Before developer handoff, verify component connections, variable sources, variants, auto layout, and contrast individually.
Check access requirements and cost before testing, too. As of August 2026, the agent is in open beta and available on Professional, Organization, and Enterprise plans. In shared-file chat, it is available to Full seats; in drafts, Full, Dev, Collab, and View seats can try it. Agent prompts and work do not consume AI credits during beta, but standard AI credit policies are expected to apply after general availability.
Four steps to test safely with one screen
- Duplicate a small, verifiable target.
Duplicate one screen with clear states—such as login, search results, or checkout—onto a separate page. Start from the duplicate, not the original, and write down success criteria such as “include error, empty, and loading states” and “use only the existing library.” - Lock the library and rules into the prompt.
Open the agent from the Figma Design left rail and select the target frame. Specify the library to use, then @mention the needed components and variables. Also state the allowed range, for example: “Duplicate this frame into three information architectures, but do not create new colors or detached components.” - Separate generation from bulk editing.
First have it create three directions in separate frames, then let a person choose one. Only within the selected direction, request repeated work such as entering real copy, standardizing padding, or changing component states. Keeping exploration and cleanup out of the same prompt makes it easier to identify where a rule broke. - Hand off only after a structural review.
In the Layers and Variables panels, check instance connections, semantic tokens, hard-coded values, and auto layout. Also inspect hover, focus, error, and disabled states, along with color contrast. If even one error appears, select and fix only that frame and its variables rather than regenerating everything, then review again.
The metric for this experiment is not just “how many minutes did it take to produce a screen?” Track the share of layers retained from the first result, the number of incorrectly connected variables, detached instances, accessibility errors, and the time people spend reviewing and fixing. If generation time falls but review time rises, the production workflow is not faster yet.
If you want to dig deeper
The Figma design agent is here — Learn about the canvas agent’s launch context, parallel prompts, and examples of bulk editing and feedback workflows. figma.com
Get started with Figma AI — Official help documentation for checking current beta plans, seat-level access, and differences from Figma Make. help.figma.com
AI workflows collection: Best practices to help Figma AI understand your design system — Covers how to organize component names, higher-level blocks, variables, and description fields so the agent can understand them more easily. help.figma.com
AI workflows collection: Use the Figma agent to improve your design system — Includes prompts you can use right away for documentation, bulk edits, pattern extraction, and pre-publishing reviews. help.figma.com
We Tested Figma Agent on a Real Design System. — An independent test showing semantic token drift and accessibility issues found in a real design system. entifydesign.com
