Skip to main content

Generate sidebar designs right on your canvas

Create navigation sidebars with AI directly in Figma Design—using your real components and design system. Explore multiple directions at once, iterate with follow-ups, and keep everything editable.

Try Figma's AI agent
  • AirBnb
  • Atlassian
  • Dropbox
  • Duolingo
  • GitHub
  • Microsoft
  • Netflix
  • The New York Times
  • Pentagram
  • Slack
  • Stripe
  • Zoom

Explore sidebar layouts faster than ever

Figma's agent generates real sidebar designs on your canvas using your components, so you can explore more options and move from concept to final faster.

Figma canvas showing an AI-generated design layout being exploredFigma canvas showing an AI-generated design layout being explored

Explore more layouts in higher fidelity

Figma's agent generates sidebar variations using your actual design system—real components, tokens, and styles. You're not starting from generic placeholders; you're exploring production-ready options from the first prompt.

Figma AI agent panel showing a bulk edit being applied across a designFigma AI agent panel showing a bulk edit being applied across a design

Cut the busywork, stay in flow

Skip the tedious scaffolding of nav structures, icons, and spacing. Describe the sidebar you need and let the agent handle the repetitive setup while you focus on the design decisions that matter.

Figma AI agent panel showing team feedback being synthesized into a designFigma AI agent panel showing team feedback being synthesized into a design

Align your team on every iteration

Every sidebar the agent generates lives in your shared file with full prompt history. Your team sees the thinking behind each direction and can build on it immediately—no export, no separate handoff.

The features behind the sidebars

A closer look at what sets Figma's agent apart, built for the way design teams actually work.

  • Screenshot showing Figma AI agent connected to a component library, auto-applying brand tokens to a designScreenshot showing Figma AI agent connected to a component library, auto-applying brand tokens to a design

    Connect a design library

    Point the agent to your design library so every sidebar uses your real components, icons, and tokens—not generic UI you'll have to rebuild later.

  • Screenshot of multiple simultaneous AI design prompts running in FigmaScreenshot of multiple simultaneous AI design prompts running in Figma

    Run prompts in parallel

    Explore a collapsed sidebar, an expanded version, and an icon-only variant all at once. Compare directions side by side without waiting between prompts.

  • Screenshot of a shared Figma AI conversation thread with design commentsScreenshot of a shared Figma AI conversation thread with design comments

    Shareable threads

    Share a thread and your team sees the full prompt, context, and iteration history. Everyone understands why a sidebar looks the way it does.

  • Screenshot showing Figma AI agent skill options for automating design workflowsScreenshot showing Figma AI agent skill options for automating design workflows

    Package workflows into skills

    Turn your best sidebar prompts into reusable skills. Run them with a single command to scaffold navigation patterns across projects consistently.

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

Notion logo

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 where you want the sidebar to appear.

  • Describe your sidebar

    Tell the agent what kind of navigation you need—sections, icons, collapse behavior. Point it to your design library so it uses your real components.

  • Review on the canvas

    Check the generated sidebar on your canvas. Refine in the same thread or start a parallel one to explore a different direction.

  • Keep iterating

    Prompt again until the sidebar is right, or turn the workflow into a reusable skill for future navigation patterns.

Become an agent expert

  • The Figma design agent is here

    Watch Figma's AI Agent in action and see how to put it to work in your own workflows.

    Read more
  • Figma agent playground intro screen with a 'Start' button and a sample chat prompt: 'Hey Figma, can you create different layouts for my reading app?Figma agent playground intro screen with a 'Start' button and a sample chat prompt: 'Hey Figma, can you create different layouts for my reading app?

    Work with the Figma agent

    Hands-on playground to explore Figma agent's capabilities — from bulk edits to feedback implementation — with step-by-step guidance built right in.

    Get started

  • How to use Figma agent in your design workflows

    Learn how to use Figma agent in your design workflows with a step-by-step tutorial from the Figma team.

    Watch now

FAQ

An AI sidebar generator creates navigation sidebar designs from text prompts. With Figma's agent, you describe the sidebar you need—sections, icons, layout—and it generates options directly on your design canvas using your actual components and design system.

Figma's agent reads your prompt and references your connected design library to generate sidebar layouts on the canvas. It uses your real components, icons, and tokens rather than placeholder UI, so outputs are closer to production-ready from the start.

Yes. Figma's agent supports parallel prompting, so you can explore multiple sidebar directions simultaneously—collapsed, expanded, icon-only—and compare them side by side on your canvas without waiting between prompts.

Sidebars generated by Figma's agent land on your canvas as fully editable layers and components. You can adjust them for different breakpoints, add auto layout, or refine responsive behavior just like any design you build by hand.

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

Powered by Fruition