Direction, gap and padding

Every auto layout frame has a small set of properties in the right sidebar. Understanding each one precisely saves you from fighting the tool later.

Direction

Auto layout can arrange children:

• Vertically, top to bottom, for lists, forms and stacked content.
• Horizontally, left to right, for buttons with icons, toolbars and rows.
• Wrap, which places items in a row and moves them to a new line when they run out of space. Useful for tags and chips.
• Grid, which arranges children in rows and columns. We cover wrap and grid in section 2.

You can change direction at any time with the arrow buttons in the auto layout section, or use Shift + A on a selection of objects and Figma guesses the direction from their positions.

Gap

The gap is the space between children. Type a number, or set it to Auto, which spreads children so the first and last touch the edges and the space between is distributed evenly. Auto gap is perfect for a top bar with a title on the left and actions on the right.

Gap can be negative too, which lets items overlap. A common use is a stack of avatar circles where each overlaps the previous one.

Padding

Padding is the space between the frame's edge and its children. You can set it uniformly, horizontally and vertically, or per side by clicking the individual padding control. Use values from a consistent scale, such as 4, 8, 12, 16, 24 and 32. Later we will turn those into number variables.

Alignment

The alignment grid in the auto layout panel sets where children sit inside the frame, for example top left or centre. In a horizontal frame, choose centre vertical alignment for buttons so an icon and its label line up. You can also turn on text baseline alignment, which aligns text by its baseline rather than its box, helpful when labels of different sizes sit side by side.

Spacing and stroke

One detail catches people out: by default strokes are not included in layout calculations. If a bordered card looks one pixel off, check the strokes included in layout option in the advanced settings.

Build a stat card now: a vertical auto layout frame with padding 20, gap 8, containing a small label, a large number and a trend line of text.