How to Use Auto Layout in Figma

Auto Layout is the feature that separates designers who can build real UI from designers who fake it. Once you understand it properly, you'll never go back to manually nudging elements into place.

Adding Auto Layout

Select any frame or group and press Shift+A. That's it. Figma converts the selection into an Auto Layout frame, and your elements become children that follow the rules you set.

You can also add it via the right panel — there's a "+" button next to the Auto Layout section — but Shift+A is faster.

Direction: horizontal vs vertical

The first decision is which axis your content flows along. Horizontal stacks elements side by side (think a button's icon + label, or a nav bar). Vertical stacks them top to bottom (think a card with image, title, body, and action).

You switch direction in the Auto Layout section of the right panel. Keyboard shortcut: after selecting the frame, use the direction toggle at the top of that section.

Spacing modes

This is where most beginners get lost. You have two main options:

Packed: Items sit together with a fixed gap between them. You set the gap value (e.g., 8px between items). Items stay clustered at the start, center, or end depending on your alignment setting.

Space Between: Items are distributed to fill the container, with equal space between them. No fixed gap — the spacing adjusts as the container resizes.

Use Packed for most components (buttons, tags, form fields). Use Space Between for navigation bars where you want items spread across the full width.

Padding

Padding controls the space between the container edge and its children. You can set uniform padding or control each side independently — click the padding field to expand it into top/right/bottom/left.

For buttons, 12px top/bottom and 16px left/right is a solid starting point. For cards, 24px all around typically works.

Fill container vs hug contents

This trips up almost everyone when they start.

Hug contents means the frame shrinks or grows to exactly fit whatever is inside it. Use this for buttons — the button should be as wide as its text plus padding, nothing more.

Fill container means the element stretches to fill its parent Auto Layout frame. Use this for content areas that should expand — like the label inside a button when you want it to take up remaining space.

Set these in the width/height fields at the top of the right panel. You'll see "Hug" or "Fill" as options alongside fixed sizes.

Min and max width/height

Once you're comfortable with hug and fill, min/max constraints give you guardrails. A button that hugs its text can have a min-width: 120px so it never looks tiny on short labels. A sidebar that fills its container can have max-width: 320px so it doesn't blow out on large screens.

Find these in the width/height fields — click the chain icon to access min/max.

Wrapping

Wrapping lets an Auto Layout frame flow onto multiple lines when children don't fit on one row. It works like CSS flexbox wrap. Enable it in the Auto Layout section when direction is set to horizontal.

Useful for tag groups, icon grids, and filter chips that should reflow instead of overflow.

Try Figma Free

Three patterns to practice

Button that grows with text: Frame with horizontal Auto Layout, hug width, hug height, 12px vertical padding, 16px horizontal padding. Add a text layer inside. Change the text — the button resizes automatically.

Card grid that reflows: Outer frame with horizontal Auto Layout, wrapping enabled, Space Between spacing. Inner cards set to fixed width. Add more cards — they wrap to the next row.

Navigation bar: Horizontal Auto Layout frame set to Fill container width. Logo on the left (fixed width). Nav links in the middle (horizontal Auto Layout, Space Between). CTA button on the right (hug width). Set the whole thing to a fixed height.

Common mistakes

Forgetting to set fill vs hug. If a child element is set to fixed width and you resize the parent, nothing moves. Set elements to "Fill container" when you want them to be responsive.

Nesting the wrong way. Auto Layout frames can nest inside each other, and that's powerful. But if your outer frame is vertical and you need a horizontal row inside it, you need to wrap that row in its own horizontal Auto Layout frame first.

Setting padding on children instead of the parent. Padding lives on the Auto Layout container, not on the child elements. If you add margin to a child manually, you're fighting the system.

Auto Layout takes an afternoon to click properly, but after that, your designs become dramatically easier to maintain — especially when designs change late in the process.