Stop 05 · Wireframing & PrototypingTopics · 6/9

Auto Layout in Figma

In short

Without auto layout, changing a button's text means dragging everything by hand. With it, frames grow, shrink and space themselves like real code would. It's the skill that makes your designs behave.

A Figma feature that makes frames resize and reflow automatically based on their content — essential for designing components and layouts that need to adapt to varying content length or screen size.

The jaadu happily hooks one more colourful coach onto a toy train with evenly spaced coaches.

Think of it like this

Adding a coach to a train

Add a coach to a train and it simply gets longer. The gap between coaches stays the same and nothing overlaps. Auto layout does that for your designs: add an item and the frame adjusts itself.

Watch it happen

A chip that grows by itself

Icon

Veg

1/4A filter chip with auto layout: horizontal direction, 8px gap, 12px padding. It hugs its contents.

The big ideas

What you need to know

Direction and gap

Choose horizontal or vertical, then one gap value for the space between every item.

Padding

Space between the frame's edge and its contents, set once instead of nudged by hand.

Hug, fill or fixed

Hug fits the content, fill stretches to the parent, fixed stays a set size. Most layout bugs come from picking the wrong one.

It mirrors flexbox

Auto layout maps closely to CSS flexbox, so developers can build what you designed more accurately.

See it in code

Walk through the code

css

1/* Figma auto layout: horizontal, gap 8, padding 8/12, hug */2.chip {3  display: inline-flex;   /* horizontal, hug contents */4  align-items: center;    /* items centred vertically */5  gap: 8px;               /* spacing between items */6  padding: 8px 12px;      /* vertical / horizontal padding */7  border-radius: 999px;8}9 10.search-bar {11  display: flex;12  width: 100%;            /* 'fill container' */13}

1/3Horizontal direction that hugs its content, with items centred vertically.

The same chip in CSS. Each auto layout setting has a direct flexbox match, which is why developers love auto layout files.

Save yourself the pain

Common mistakes

Oops

Using auto layout but then adding absolute-positioned items everywhere.

Do this instead

Keep items in the flow. Use absolute position only for true overlays like a notification dot.

Oops

Leaving everything on 'fixed' width.

Do this instead

Set text and buttons to hug and containers to fill, so designs adapt to real content.

Your mission

Make a card that adapts

~35 min

Quick check

You want a button to stretch across the full width of its parent card. Which setting fits?

Go deeper

1Convert a static frame into an auto layout frame and test how it responds to content changes.
2Practice building a card component with auto layout that handles varying text lengths gracefully.
3Learn why auto layout dramatically speeds up building responsive-feeling designs.