How to Use Figma Auto Layout for Responsive Components: A Practical Walkthrough

If you have been designing in Figma for a while, you already know that static mockups only get you so far. The moment a developer asks for a component that adapts to different content lengths, screen sizes, or states, you need something more robust. That is where Figma Auto Layout comes in.

This walkthrough is written for intermediate designers who want to move beyond fixed frames and start building components that behave like real code. We will cover the core mechanics, show you how to structure nested frames, and share the resizing rules that make your work truly responsive. Source: https://banani.co.

What Is Figma Auto Layout (and Why It Matters)

Auto Layout is a Figma feature that arranges elements inside a frame based on direction, spacing, padding, and alignment. Think of it as Figma’s version of Flexbox in CSS. Instead of manually nudging pixels every time content changes, Auto Layout does the heavy lifting for you.

Here is what it unlocks:

• Buttons that resize with their text
• Cards that stretch or shrink based on content
• Lists that automatically reflow when you add or remove items
• Nested components that behave like production-grade UI

Before You Start: Set Up Your Workspace

Make sure you are running the latest version of Figma. Auto Layout has evolved significantly, and features like wrap, absolute positioning inside Auto Layout, and min/max width are all mature and stable now.

The shortcut you will use constantly:

• Shift + A: Add Auto Layout to a selected layer or group
• Shift + Alt/Option + A: Remove Auto Layout

Step 1: Build Your First Auto Layout Button

Let’s start with the classic example, a button.

1. Draw a text layer that says “Get Started”.
2. Select the text layer and press Shift + A.
3. In the right panel, set horizontal padding to 24px and vertical padding to 12px.
4. Set corner radius to 8px and give it a fill color.

Now try changing the text to “Sign up for free trial”. Notice how the button expands automatically while keeping perfect padding. That is Auto Layout doing its job. For a real-world example, look at another team working this way.

Understanding Resizing Rules

Each Auto Layout frame has three resizing behaviors you need to master:

Rule	Behavior	When to Use
Hug contents	Frame shrinks to fit its children	Buttons, badges, tags
Fill container	Frame stretches to fill parent	Input fields, full-width cards
Fixed	Frame stays at set dimensions	Icons, avatars, thumbnails

Step 2: Nest Frames to Build a Card Component

Real components are almost never a single frame. They are Auto Layouts inside Auto Layouts. Here is how to build a responsive product card:

1. Create a vertical Auto Layout frame (this is your card container).
2. Inside, add an image frame at the top with fixed height and Fill container width.
3. Below the image, create another vertical Auto Layout for the text block with padding of 16px.
4. Inside the text block, add a title, description, and a horizontal Auto Layout for the price and CTA button.
5. Set the description text to Fill container so it wraps naturally.

The magic here is the parent-child relationship. When the card grows, everything inside adjusts predictably. There’s a good explainer over at figma.com.

Alignment and Spacing Between Items

Inside any Auto Layout frame, you get a small alignment box in the right panel. Use it to control where children sit inside the frame. For evenly distributed items, set spacing to Auto. This is perfect for navigation bars where the logo sits left and menu items sit right.

Step 3: Use Wrap for Truly Responsive Layouts

Auto Layout Wrap is one of the most underused features. It lets children flow to the next line when they run out of horizontal space, similar to CSS flex-wrap.

To enable it:

1. Select your horizontal Auto Layout frame.
2. In the right panel, change the flow from “No wrap” to “Wrap”.
3. Set horizontal and vertical gap values separately.

This is ideal for tag clouds, filter chips, or responsive grid systems.

Step 4: Absolute Positioning Inside Auto Layout

Sometimes you need one element to break the flow, like a notification badge on top of an avatar or a “New” ribbon on a card. Select the child element and toggle Absolute position in the right panel. The element will stay in place while everything else respects the Auto Layout rules.

Step 5: Turn It Into a Reusable Component

Once your Auto Layout structure works the way you want:

1. Select the parent frame.
2. Press Ctrl/Cmd + Alt + K to create a component.
3. Add variants for states (default, hover, disabled) or sizes (small, medium, large).
4. Expose properties like text, icon visibility, and boolean toggles.

You now have a production-ready component that developers can translate directly into code.

Common Mistakes to Avoid

• Over-nesting frames: Every extra Auto Layout adds complexity. Only nest when you need independent padding or alignment.
• Mixing Fixed and Fill incorrectly: If a parent is set to Hug and a child is set to Fill, Figma will get confused. Match your rules logically.
• Ignoring min/max width: Use these to prevent components from collapsing or stretching beyond usable dimensions.
• Forgetting to name layers: A well-named Auto Layout structure saves hours during handoff.

Pro Tips for Production-Ready Components

• Match your padding and spacing to your design tokens (4px, 8px, 16px, 24px scale).
• Use Fill container aggressively for text so it wraps like real HTML.
• Test your components by dropping them into different frame widths before shipping.
• Document resizing behavior in your design system so developers know what to expect.

FAQ

How do I add Auto Layout in Figma?

Select one or more layers and press Shift + A, or click the Auto Layout option in the right panel under the Design tab.

Why don’t I see Auto Layout in my Figma panel?

Make sure you have at least one layer selected. If the panel still does not show it, update Figma to the latest version. Auto Layout is only available for frames, not raw groups. skillshare.com has a solid rundown on this.

What is the shortcut for Auto Layout?

Shift + A adds Auto Layout. Shift + Alt + A (Shift + Option + A on Mac) removes it.

Can Auto Layout replace Constraints?

For most component work, yes. Constraints are still useful for absolute positioning inside fixed frames, but Auto Layout gives you far more flexibility for responsive design.

What is the difference between Hug and Fill?

Hug makes the frame shrink to its content. Fill makes it stretch to fill the parent. Use Hug for buttons and badges, Fill for content areas that need to expand.

Wrapping Up

Auto Layout is not just a productivity feature, it is the bridge between design and development. Once you internalize how padding, spacing, resizing rules, and nested frames interact, you will stop making static mockups and start designing systems that scale. Open Figma, pick one component from your current project, and rebuild it with Auto Layout today. Your future self, and your developers, will thank you.