Work with the AI agent in Figma Design
This feature is currently available to try for free in closed beta for a limited number of users. Learn more.
Who can use this feature
Available on Professional, Organization, and Enterprise plans
Users with Full seats can chat with the agent in Figma Design files
Users with Dev or Collab seats can try the agent in Figma Design files in Drafts
Requires edit access
In Figma Design, you can collaborate with an agent to generate and remix designs, automate busywork, and get design feedback.
Tip: Try chatting with the agent in a guided, hands-on playground file.
Access the agent
Select any layer on the canvas and click Agents to open the on-canvas prompt box, or use the keyboard shortcut Cmd or Ctrl + Enter. Click Dictate to speak your prompt, or start typing and press Send to run it.
You can also click Agents in the left navigation bar of a design file to chat with the agent in a persistent sidebar.
Tip: You can turn off on-canvas prompting by clicking Main menu > Preferences > Show AI Chat on canvas.
Note: This feature is currently in closed beta for a limited number of users. If you don't see it, you might not have access yet. Learn more about how we're rolling out the agent to teams and organizations.
Work with the agent
Here's a quick overview of how to use the agent in Figma Design:
Run multiple prompts at once
Speed up your workflow by running multiple prompts in parallel. Start a prompt on one frame, then move to the next—you don't have to wait for the first to finish.
Each running prompt shows an animated loading indicator on the canvas. Click it to open a chat window showing what the agent is working on, the steps it has completed, and the result when it's done. The chat window supports back-and-forth interactions so you can keep riffing as you go.
Tip: You can also hover over Agents in the left navigation bar at any time to quickly check the status of your recent threads.
Navigate your chats
Click Agents in the left navigation bar to open the chat sidebar and see all your chats in one place. The sidebar shows each chat sorted by recency, with a preview of the last message.
- Click New chat at the top of the chat window to start a new conversation.
- From within a conversation, click Back to see all your chats in the file.
Note: Chat history is private and not visible to other people in the file.
Connect a library
Connect any library available in the design file to the chat to generate results that match your team's components, styles, and variables.
Click Add context in the prompt box to connect a library. You can reference specific components or let Figma infer the best options.
Reference design system elements
With a library connected, type @ to reference specific components, variables, and styles directly in your prompts.
This helps the agent use your design system more effectively to create high-quality outputs.
Undo changes
Click Undo in the chat to revert the most recent change. You can also undo the change using Cmd or Ctrl Z.
Tip: If you want to do a side-by-side comparison before hitting undo, first duplicate the AI-updated version so you have a copy of it, then undo the changes on the original.
Ask the agent questions about using Figma Design
You can ask how-to questions directly in the chat—for example, "How do I use auto layout?" or "What's the difference between variables and styles?"
The agent draws from Figma's Help Center to give you accurate, up-to-date answers.
Best practices for working with the agent
- Use auto layout: Auto layout helps the agent make cleaner, more predictable edits. You can ask the agent to apply auto layout for you before making other changes.
- Provide more UI examples in your design system: If you’ve connected a library, the agent will draw from the library's components and styles. We recommend including practical, production-ready examples that show how components work together, not only individual base components.
- Be specific: Describe exactly what you want. Specific prompts reduce ambiguity and minimize the chances the agent will make incorrect assumptions. Select the layer you want to edit for greater control.
- Remove unnecessary hidden layers: Hidden layers are included as context for the agent to work from. Hidden layers that aren’t related to the current design can lead to unexpected outcomes.
- Organize chat threads: While not required, we recommend keeping chat threads separate for different workstreams in the same file. This helps keep each conversation focused on a specific set of changes.
- Add references: While you can't add attachments directly in the chat yet, you can drop images or design assets onto the canvas and then select them to reference them within the chat.
Currently supported features
| Feature | Currently supported | Examples |
|---|---|---|
| 0 → 1 generation | ✓ | Generate new screens or layouts from a prompt to explore new visual directions, create initial concepts based on existing context, and apply your design system to ideas |
| Edit layout | ✓ | Adjust spacing and alignment, convert layouts across screen sizes, apply auto layout, restructure sections |
| Edit component instances | ✓ | Assign component properties, switch variants, override text, images, size, visibility, and layout properties |
| Use styles | ✓ | Apply existing text, color, effect, and grid styles from the file or connected libraries |
| Use variables | ✓ | Apply variables, switch modes, update variable-bound properties |
| Generate and edit content in bulk | ✓ | Select multiple objects and populate realistic data, rewrite or translate copy, or replace placeholder images |
| Search libraries | ✓ | Search for relevant components, suggest reusable components from enabled libraries |
| Review comments | ✓ | Summarize, sort, and take action on comments in the design file |
| Provide design feedback | ✓ | Get accessibility feedback, run a design critique from the perspective of different personas (like new users, or a VP of Product), suggest opportunities to improve conversion |
| Edit images | ✓ | Remove background, generate changes from existing images |
| Author design system components, styles and variables | ✓ | Apply changes to main components, update parent variants, sync or overwrite design system components |
| Figma file actions | ✓ | Add comments, modify file-level metadata, perform non-canvas file actions |
| Search files | ✓ | Search for other files without leaving the current file |
| Select objects on the canvas | ✓ | Select layers, modify selections, issue commands like “select all primary buttons” |
| Vector editing and Draw tools | Coming soon | Create or edit vector illustrations, icons, paths, points, shapes, or boolean operations |
| Create icons | Coming soon | Generate icons, modify icon geometry, create icon sets |
| Use slots | Coming soon | Directly manipulate or reason about component slots |
| Apply advanced visual effects | Coming soon | Apply glass or frosted effects, control refraction, depth, or backdrop blur |
| Prototyping and interactions | Coming soon | Create prototypes, add interactions, define navigation patterns or overlays |
| Search the web or other documents | Coming soon | Look up documentation, search the web, answer real-world factual questions |
| Animations and motion | X | Animate elements, gradients, or hover states; define timing or easing |
| Export assets | X | Export assets on your behalf |
| Create diagrams and data visualizations | X You can create diagrams and visualizations using Figma AI in FigJam |
Create bar charts, Sankey diagrams, or other data-driven diagrams |
| Contact Figma or get support | X | Contact a product support specialist, open a support ticket, submit a bug |
Frequently asked questions
How many AI credits does it cost to use this feature?
The number of credits used by the agent changes based on the complexity of the task. Learn more about how AI credits work.
What’s the difference between the agent in Figma Design and Figma Make?
The agent in Figma Design helps you work in design files and uses all the design and AI tools available in the product.
Figma Make helps you generate interactive apps and prototypes and publish them to the web.
What’s the difference between the agent and the other AI tools in Figma Design?
The agent can use the existing AI tools in Figma Design—like Rename layers, Replace content, and Make image—to apply one-off changes or make bulk edits. Learn more about AI tools in design files.
What's the difference between the agent in Figma Design and using the 'write to canvas' MCP tool?
The AI agent in Figma Design lets you work directly in your Figma files to generate and remix designs, automate busywork, and get design feedback.
The write to canvas MCP tool is part of Figma's MCP server, and lets you work with external AI coding agents—like Claude Code, Codex, GitHub Copilot, Cursor—to write into a Figma file using the Plugin API.
Think of the Figma MCP server's write to canvas tool as a way to bring design content from your codebase or other external AI projects into Figma. You can then use the agent in Figma Design to explore and improve that content on the canvas.
What if the agent makes a change I don't want?
You can always undo any changes the agent makes. It is designed to support your craft—you remain in control of all design decisions.
Can I use the agent on mobile or in other Figma products?
The agent is currently only available in Figma Design from the desktop app or web browser.
Can I stop a prompt that’s running?
Yes. Click Stop in the chat box to end the current task.