Connect your design library
Point the agent to your design system so every error state uses your real components, colors, and typography—consistent from the first draft.
Generate error states right on your canvas
Create form validation errors, empty states, connection failures, and system messages with AI—directly in Figma Design. Describe the scenario once and see polished error UI using your real components.
Error states that match your system
Figma's agent generates error UI using your actual components, tokens, and styles—so every state feels native to your product from the start.
Explore more scenarios in higher fidelity
Figma's agent generates realistic error states using your design system components, not placeholder boxes. Explore form validation, empty states, timeout screens, and permission errors—all rendered with your real UI patterns.
Cut the busywork, stay in flow
Hand off the tedious work of building every edge case by hand. Describe the error scenario and let the agent scaffold the UI, so you can focus on the user experience decisions that matter most.
Align your team on edge cases early
Error states live in the same file your team works in, so developers and stakeholders see every scenario without a separate handoff. Nothing gets lost or forgotten before build.
The features behind the states
A closer look at what sets Figma's agent apart, built for the way design teams actually work.
Run prompts in parallel
Generate multiple error scenarios at once—empty state, connection error, validation failure—and compare directions side by side on your canvas.
Shareable threads
Share a thread and your team sees the full prompt, context, and iteration history behind any error state. No separate documentation needed.
Package workflows as skills
Turn your error state prompts into reusable skills your team can run with a single command—consistent edge case coverage across every project.
Figma feels like a natural extension of my hand. I do my design ideation on the canvas, and now the agent takes it the last mile. With my design libraries connected, I can move from design to code faster than ever before.
Andy Madrick
Product Designer, Notion
Get started with Figma's agent
Open the agent
Select Agents in the left side rail or hit CMD + Enter. Add a frame to your canvas to work in.
Describe the error scenario
Tell the agent what error state you need—form validation, empty state, timeout message—and point to your design library so it uses your real components.
Review on the canvas
Check the generated error state on your canvas. Refine in the same thread or start a parallel one to explore a different scenario.
Keep iterating
Prompt again until the error state is right, then turn the workflow into a reusable skill for your team.
Become an agent expert
The Figma design agent is here
Read moreWatch Figma's AI Agent in action and see how to put it to work in your own workflows.
Work with the Figma agent
Get startedHands-on playground to explore Figma agent's capabilities — from bulk edits to feedback implementation — with step-by-step guidance built right in.
How to use Figma agent in your design workflows
Watch nowLearn how to use Figma agent in your design workflows with a step-by-step tutorial from the Figma team.
FAQ
Figma's agent can generate a wide range of error states for your UI designs. This includes form validation errors, empty states, connection failure screens, permission denied messages, timeout notifications, and system error dialogs. Each state is built using your actual design system components, so they match your product's look and feel from the start.
Be specific about the context and user situation. Instead of just saying 'error message,' describe the scenario: 'form validation error when email field is empty' or 'empty state for a search with no results.' The agent uses this context to generate appropriate copy, icons, and layout. Adding details about tone—friendly, technical, urgent—helps refine the output further.
Figma's agent can help you think through error scenarios by generating variations you describe. While it doesn't automatically audit your designs for missing states, you can prompt it to generate common error patterns—network failures, permission issues, empty data—and build out coverage. Running parallel prompts lets you explore multiple scenarios quickly.
When you connect your design library to Figma's agent, it references your actual components, color tokens, and typography styles. This means every error state it generates uses your real UI patterns rather than generic placeholders. The result is error UI that feels native to your product without manual rebuilding.
Figma's agent is available on all paid Figma plans. You'll find it in the left side rail in Figma Design. During the current open beta, it doesn't consume AI credits—so it's a good time to explore, experiment, and share your feedback with us.
Build faster with Figma's agent