Figma Auto Layout is the fastest way to stop drawing static boxes and start building components that behave like real interfaces. If you want buttons, card lists and forms that grow and shrink with their content, you need to learn Auto Layout's content-aware rules instead of re-aligning every element by hand. In this guide we'll explain the logic with a CSS Flexbox analogy, then work through a real button and card example step by step.
What does Auto Layout actually do?
When you apply Auto Layout to a frame, Figma starts managing that frame like a flex container. Child elements are no longer freely dragged boxes; they're items arranged along an axis, with fixed spacing between them, respecting the container's padding. Delete an element and the rest shift automatically; lengthen the text and the container expands. In practice you gain:
- Direction: horizontal or vertical stacking — the equivalent of CSS
flex-direction. - Gap: a fixed space between elements — the same as
gap. - Padding: the container's inner spacing, configurable per side.
- Alignment: a 3x3 grid that positions elements on the main and cross axes.
Select a frame and press Shift + A to add Auto Layout instantly; press the same shortcut again to remove it.
Setting direction, gap and padding
Adding Auto Layout opens a new section in the right panel. The first setting is direction: horizontal (→) or vertical (↓). If a button's icon and label sit side by side, choose horizontal; if a card's title and description stack, choose vertical.
The second setting is gap, the space between elements. You can enter a fixed pixel value, or pick "Auto" to push elements to both ends of the container (the CSS justify-content: space-between idea). For padding you can enter a single value for all sides, separate horizontal/vertical values, or set each of the four sides individually.
Finally there's the alignment control: click a dot on the 3x3 grid to align elements left/center/right and top/middle/bottom. A vertical card usually wants "top-left", while a button prefers "center".
Resizing: the setting that makes a component truly flexible
Auto Layout's most powerful but most confused part is resizing behavior. Both the container frame and each child element have three options per axis, horizontal and vertical:
- Fixed: the size is set manually and doesn't change.
- Hug contents: the container shrinks to exactly fit its content — like a button collapsing to its label.
- Fill container: the element takes up the available space in its parent — similar to CSS
flex-grow: 1.
The right combination changes everything. For example, set a button container to Hug horizontally and it grows as the label lengthens; set the text element inside to Fill and the container to Fixed, and the button stays a fixed width with the text centered. "Fill" can only be chosen for elements inside an Auto Layout frame; on the outermost frame this option doesn't appear.
Step by step: a flexible button
Let's build a genuinely responsive button:
- Create a text layer and type "Send".
- With the text selected, press
Shift + A— Figma wraps the text in an Auto Layout frame. - Leave direction horizontal, set padding to 16 horizontal and 10 vertical.
- Set the frame's resizing to Hug contents on both axes.
- Add a corner radius and a fill color.
Now when you change the label from "Send" to "Submit form", the button widens on its own and the padding stays constant. Turn it into a Component (Ctrl/Cmd + Alt + K) and every instance keeps this flexible behavior. This maps neatly to CSS:
.button {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 16px;
border-radius: 8px;
}Card lists and nested Auto Layout
In real projects the power comes from nested Auto Layout. A typical card is built like this:
- Outer vertical Auto Layout: the card body (padding 24, gap 12).
- Inside, a title text and a description text — both set to Fill container horizontally.
- At the bottom, a horizontal Auto Layout for buttons, gap 8.
Place this card inside an outer vertical Auto Layout with a gap, and duplicating the card automatically creates a list. Delete a card and the list closes the gap without leaving a hole. For a multi-column grid, turn on the Wrap option: a horizontal Auto Layout pushes elements that don't fit onto the next line — behaving like CSS flex-wrap: wrap.
Common mistakes and tips
- Wrong resizing: if an element grows unexpectedly, it's probably set to "Fixed" where it should be "Fill", or vice versa. Check this first.
- Text won't wrap: if long text overflows on one line, set the text layer to Fill horizontally and Auto/Hug vertically; make sure the text is in "Auto height" mode rather than "Auto width".
- Negative spacing: Figma supports negative gap, which is handy for overlapping avatar stacks.
- Absolute position: to take an item out of the Auto Layout flow (for example a badge in the corner), select it and enable absolute position.
Frequently Asked Questions
Is Auto Layout the same as CSS Flexbox?
Not identical, but the logic is almost the same. Direction, gap, padding and alignment map directly to Flexbox concepts; "Fill container" is roughly flex-grow, and "Hug contents" is the shrink-to-content behavior. That's why handoff to frontend becomes much cleaner.
How do I remove Auto Layout?
Select the frame and press Shift + A again, or use the remove option next to the Auto Layout section in the right panel. The elements are left free in their last positions.
How many nested layers can I use?
There's no practical hard limit; 3-4 levels of nested Auto Layout are normal in complex components. Still, name your layers meaningfully and avoid unnecessary wrappers, otherwise maintenance gets harder.
Want to build a design system from scratch or convert your existing Figma file into responsive components? I design Auto Layout-based interfaces that are easy to hand off to developers. Let's talk about your project: get in touch.