Figma Auto Layout cheat sheet

Every layer in an auto layout frame resizes one of three ways on each axis. Most layout problems are the wrong one of these.

Hug

As small as its content. Buttons, tags, labels: anything whose size should follow its text.

Fill

Take the space available. Inputs in a form, the main column beside a sidebar, items that should share a row equally.

Fixed

Stay this size. Icons, avatars, sidebars with a set width.

Senior designer note“Type a much longer label into the component. If it breaks, the sizing is wrong.”

An auto layout frame arranges its children horizontally, vertically or in a grid, and can wrap them when they run out of room.

Horizontal

Along the x-axis. Toolbars, button groups, a label beside its icon.

Vertical

Along the y-axis. Forms, lists, page sections.

Wrap

Onto a new row or column. Tags, card galleries, anything that should reflow.

Grid

Columns and rows. Galleries and dashboard layouts.

Padding is the space inside the frame's edge. Gap is the space between children. Min and max stop a frame growing or shrinking past a sensible size.

Senior designer note“Bind padding and gap to spacing variables and off-scale values stop appearing.”