Connect a design library
Point the agent to your design system and it generates breadcrumbs using your real components, typography tokens, and spacing variables—not generic placeholders.
Generate breadcrumb navigation right on your canvas
Create clear, consistent breadcrumb components with AI—directly in Figma Design. Figma's agent builds navigation that matches your design system, so you can focus on the user journey, not the repetitive assembly.
Navigate complexity with less busywork
Breadcrumb navigation keeps users oriented, but building it by hand gets tedious. Let the agent handle the scaffolding while you focus on the flow.
Explore more options in higher fidelity
Figma's agent generates breadcrumb variations using your actual design system—real components, tokens, and spacing—so you can evaluate options that are ready to ship, not placeholder wireframes you'll rebuild later.
Cut the busywork, stay in flow
Skip the repetitive work of duplicating components, adjusting separators, and aligning text. Describe what you need, and the agent builds breadcrumbs that follow your system's patterns while you focus on the bigger navigation picture.
Align your team, close the loop
Breadcrumb components land directly in your shared file, so developers and stakeholders see the same source of truth. No screenshots, no separate handoffs—just navigation that's ready for review and implementation.
The features behind the navigation
A closer look at what sets Figma's agent apart, built for the way design teams actually work.
Parallel prompting
Explore multiple breadcrumb structures at once—different separator styles, truncation approaches, or responsive behaviors—without waiting for one to finish before starting another.
Shareable threads
Share the thread and your team sees the full prompt history behind each breadcrumb variation. Context travels with the component, no separate documentation needed.
Skills
Package your breadcrumb generation workflow into a reusable skill. Run it again for new pages or hand it to teammates so everyone builds navigation the same way.
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 the canvas where you want your breadcrumbs to land.
Describe the breadcrumbs
Tell the agent the page hierarchy, separator style, and any truncation rules. Point it to your design library so it uses your real components.
Review on the canvas
Check the generated breadcrumbs on your canvas. Refine in the same thread or start a parallel one to explore a different structure.
Keep iterating
Prompt again to adjust spacing, add icons, or try responsive variants. Everything stays editable, so you can fine-tune by hand when needed.
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 is available on all paid Figma plans. You'll find it in the left navigation bar 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