Skip to main content

Generate feature sections right on your canvas

Create polished feature sections using your design system—components, tokens, and styles—directly in Figma Design. Describe what you need and see it built with your real assets, ready to refine.

  • AirBnb
  • Atlassian
  • Dropbox
  • Duolingo
  • GitHub
  • Microsoft
  • Netflix
  • The New York Times
  • Pentagram
  • Slack
  • Stripe
  • Zoom

Explore more options in higher fidelity

Generate feature sections that match your design system from the start, so you can evaluate real directions instead of rough approximations.

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

Generate with your design system

Figma's agent builds feature sections using your connected library—real components, tokens, and styles—so every output fits your product's visual language 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

Explore multiple directions at once

Run parallel prompts to generate different layouts, content approaches, or visual treatments simultaneously. Compare options side by side without waiting for one to finish before starting another.

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

Keep your team aligned from the start

Every generated section lives in the same file your team works in. Stakeholders see the full prompt history and context behind each direction—no separate handoff or explanation needed.

The features behind the generation

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 your design library

    Point the agent to your library so every feature section uses your real components, colors, and type styles—not generic placeholders you'll need to swap 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 three layout directions at once or test different content approaches simultaneously. Compare results side by side and pick the strongest path forward.

  • 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 behind any feature section. No separate handoff needed.

  • 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 feature section prompts into reusable skills your team can run with a single command—consistent output, less repetition.

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. Create a frame on your canvas to work in.

  • Describe what you need

    Tell the agent what kind of feature section you want—layout style, content focus, number of features—and point it to your design library.

  • Review on the canvas

    Check the generated section. Refine in the same thread or start a parallel one to explore a different layout or content direction.

  • Keep iterating

    Prompt again until the result is right, then fine-tune by hand or turn the workflow into a reusable skill for your team.

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 feature section generator creates feature section layouts from a text prompt—handling structure, content placement, and visual hierarchy so you can focus on refining rather than building from scratch. Figma's agent generates these sections directly on your canvas using your connected design library, so outputs match your product's visual language from the start.

Figma's agent reads your prompt and references your connected design library to build feature sections using your real components, tokens, and styles. It places the output directly on your canvas as editable layers. You can refine with follow-up prompts in the same thread or run parallel prompts to explore multiple directions at once.

Yes. When you connect your design library, Figma's agent generates feature sections using your actual components, color tokens, and type styles—not placeholder UI. This means outputs are production-ready faster, with less manual swapping and rebuilding.

Figma's agent generates feature sections as editable layers and components on your canvas. You can adjust layouts for different breakpoints using Figma's existing responsive design tools like auto layout and constraints. The agent helps you scaffold quickly; you retain full control over responsive behavior.

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.

Powered by Fruition