How to Use Auto Layout in Figma

Vertical stacks children top to bottom, like a list or a form. Horizontal lines them up in a row, like a button with an icon and a label or a nav bar. Horizontal also offers wrap, which moves items that don't fit to the next line and gives you separate gaps for items and rows. Grid is available on all plans and places children into rows and columns; it has its own guide at auto layout grid.

Real components are auto layout frames inside auto layout frames. A card might be a Vertical frame holding an image, a text stack and a Horizontal button row, and each button is its own Horizontal frame with an icon and a label. Build from the inside out: make the smallest pieces first, press Shift+A on each, then select them together and press Shift+A again to wrap them in the next level. When the inner frames hug their content and the outer ones use Fill or Fixed widths, changing one label resizes the whole card correctly.

The gap field takes a number, or one of three Auto spacing modes:

• Between (the default Auto mode): the first and last items sit at the edges, and the free space is shared between the items.
• Evenly: the edge space and the gaps are all the same size.
• Around: each gap is twice the size of the edge space.

If the content is too big to fit, the gap stops at 0. It doesn't go negative.

Padding is the space between the frame's edge and its children. You can set it as one value for every side, as a vertical and a horizontal pair, or per side. The fastest way to type four different values is to Cmd-click (Mac) or Ctrl-click (Windows) a padding field and enter CSS-style shorthand: 16,24,16,24 for top, right, bottom and left.

A frame can never be smaller than its own padding. If you set 24px on the left and right, the frame is at least 48px wide, even with nothing in it.

1. Gap: set the gap field to 0. If it's on Auto, switch back to a number first, because Between and Evenly spread items across any free space.
2. Padding: set the padding fields to 0, or check each side if you used per-side values.
3. Fixed size: a frame set to Fixed keeps its size even when the content is smaller, which leaves empty space. Switch its width or height to Hug contents.
4. A child set to Fill: it stretches into the free space. Change it to Fixed or Hug if it shouldn't.

Each layer has a width mode and a height mode. Fixed keeps a typed size. Hug contents makes an auto layout frame wrap its children. Fill container makes a child take the space its parent has left. Fill only exists on children of auto layout frames, and Hug only on auto layout frames themselves. If one of them is missing, Fill container vs Hug contents explains why.

• Fill container isn't offered: the parent doesn't have auto layout, or the layer is a top-level frame.
• Wrap isn't offered: the frame isn't set to Horizontal. See auto layout wrap not working.
• You can't drag a child where you want it: auto layout positions children. Use Ignore auto layout to place one freely; see absolute position.
• Constraints disappeared: children of auto layout frames don't have constraints.
• Text doesn't line up: press B to toggle text baseline alignment.

Suggest auto layout looks at a selection of loose layers and works out which ones belong in auto layout frames. It can create several nested frames at once, and Figma recommends running it in batches on complex designs. More keys are in the auto layout shortcut guide.