Skip to main content

Generate responsive designs right on your canvas

Create adaptive layouts across breakpoints with Figma's agent—using your real components and design tokens directly in Figma Design. Explore multiple responsive directions simultaneously, not one at a time.

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

Responsive design that scales with your system

Figma's agent generates adaptive layouts using your actual design library, so every breakpoint stays consistent with your components, tokens, and spacing rules.

Side-by-side comparison of a "My projects" screen in light and dark mode, showing Figma's agent applying a dark mode conversion using the prompt "Switch this design to dark mode"Side-by-side comparison of a "My projects" screen in light and dark mode, showing Figma's agent applying a dark mode conversion using the prompt "Switch this design to dark mode"

Explore breakpoints in higher fidelity

The agent generates real responsive layouts using your connected design system—not placeholder boxes. See how your actual components adapt across mobile, tablet, and desktop without rebuilding each variant by hand.

Four-screen mobile onboarding flow for a book app called "Dogeared" showing Figma's agent applying a brown color scheme and dark mode across all screens simultaneously using the prompt "Switch to brown color scheme and dark mode"Four-screen mobile onboarding flow for a book app called "Dogeared" showing Figma's agent applying a brown color scheme and dark mode across all screens simultaneously using the prompt "Switch to brown color scheme and dark mode"

Cut the busywork, stay in flow

Skip the tedious work of manually adjusting layouts for every screen size. Describe the responsive behavior you need and let the agent scaffold variants while you focus on the design decisions that matter.

Figma's agent panel showing a structured summary of 12 design comments grouped into Scope Questions, Design Feedback, and Pending Confirmation, alongside two mobile app screens for a speculative futures museum and a content discovery feedFigma's agent panel showing a structured summary of 12 design comments grouped into Scope Questions, Design Feedback, and Pending Confirmation, alongside two mobile app screens for a speculative futures museum and a content discovery feed

Align your team on every breakpoint

Responsive variants live in the same file your team already works in. Everyone sees how designs adapt across devices—no separate handoff documents or confusion about which breakpoint is current.

The features behind the agent

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 to a design library

    Generate and refine using your actual components, tokens, and variables—not placeholder UI you'll have to swap out later.

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

    Parallel prompting

    Run multiple prompts at once so you're evaluating directions in parallel, not burning time on each one in sequence.

  • 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 design. 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

    Skills

    Package your team's workflows and conventions into reusable /commands anyone can run on demand.

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

  • Step 1: Open the agent

    Select Agents in the left side rail or hit CMD + Enter. Add a frame to your canvas as the starting point for your responsive layouts.

  • Step 2: Describe the responsive behavior

    Tell the agent what breakpoints you need and how elements should adapt. Connect your design library so it uses your real components and tokens.

  • Step 3: Review the variants

    Check the generated layouts on your canvas. Refine in the same thread or start a parallel one to explore a different responsive approach.

  • Step 4: Keep iterating

    Everything stays editable on your canvas. Prompt again to adjust breakpoint behavior or fine-tune layouts by hand until they work exactly right.

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 responsive design generator creates adaptive layouts that work across different screen sizes and devices. Figma's agent generates responsive variants directly on your canvas using your connected design system, so every breakpoint uses your real components and tokens. Instead of manually rebuilding layouts for mobile, tablet, and desktop, you describe the responsive behavior and the agent scaffolds the variants for you.

Figma's agent reads your design context—connected libraries, existing frames, and the components already on your canvas—then generates responsive layouts that adapt to the breakpoints you specify. You describe how elements should reflow, stack, or resize, and the agent produces real editable frames using your actual design system. The output lands directly on your canvas, ready to refine.

Figma's agent can generate responsive layout variants based on your prompts and design system. You specify the breakpoints and describe how content should adapt—whether elements stack vertically on mobile or expand horizontally on desktop. The agent produces multiple variants you can compare and refine, though you stay in control of the final design decisions.

Start by connecting your design library so the agent uses your real components and spacing tokens. Describe the responsive behavior clearly—which breakpoints matter, how elements should reflow, what stays fixed. Use parallel prompting to explore multiple approaches at once. Everything stays editable, so you can refine by hand or prompt again until the responsive behavior is exactly right.

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