TL;DR
- Apply Auto Layout (Shift+A) to frames with real content, not empty ones.
- Set Fixed / Hug / Fill independently per axis — this is what most beginners skip.
- Use built-in gap and padding instead of invisible spacer elements.
Auto Layout is the single feature that separates a static Figma mockup from a design that actually behaves like a real, responsive interface. Here’s how to use it properly, not just turn it on.
Apply it to a frame with real content first
Select a frame with at least two elements (like an icon and text) and press Shift+A. Practicing on an empty frame doesn’t teach you anything — the resizing behavior only makes sense once there’s content to reflow.
Understand the direction toggle
Auto Layout frames flow either horizontally or vertically. Toggling this is what turns a stacked list into a row of buttons, or vice versa, without manually repositioning anything.
Set sizing per axis, not the whole frame
Each axis (horizontal/vertical) can independently be Fixed, Hug contents, or Fill container. This is the part beginners skip and it’s the actual key to responsive-feeling components — a button should usually Hug contents horizontally but Fill container vertically inside a list.
Use gap and padding instead of empty spacer elements
Auto Layout frames have built-in gap (space between items) and padding (space around items) controls. Manually-placed invisible spacer rectangles are a sign Auto Layout isn’t being used correctly.
Nest Auto Layout frames for real layouts
A card component is usually an Auto Layout frame (vertical) containing another Auto Layout frame (horizontal, for a title + badge row). Nesting is normal and how most real interfaces are actually built.
The most common Auto Layout mistake
Leaving every element set to Fixed sizing defeats the entire point — the frame won’t actually respond to content changes. If you’re not seeing elements resize when you edit text inside them, check that the relevant axis is set to Hug contents or Fill container, not Fixed.
FAQ
What’s the keyboard shortcut for Auto Layout in Figma?
Shift+A applies Auto Layout to a selected frame.
Why isn’t my Auto Layout frame resizing?
Check the sizing setting on each axis — if it’s set to Fixed instead of Hug contents or Fill container, the frame won’t respond to content changes.
Can I nest Auto Layout frames?
Yes, and it’s standard practice — most real components (like cards) are built from nested Auto Layout frames combining vertical and horizontal layouts.