Auto layout is a shelf, not a spreadsheet

Auto layout confuses people because they treat it like a grid of cells. It works much better if you picture a shelf: things sit on it in a row or a stack, with a fixed gap between them, and the shelf grows or shrinks to fit.

Three questions for every frame

Before you touch a setting, ask three things. Which direction do the children go? How much space sits between them? Does the frame hug its contents or fill its parent? Answer those and most of the panel sets itself.

Hug inside, fill outside

A good default: small things hug, big things fill. A button hugs its label. A card fills the column it sits in. When a layout falls apart on resize, it’s almost always a frame that should hug but was set to fixed.

Why developers love it

Auto layout maps closely to flexbox. Direction, gap, padding and alignment all have a direct CSS equivalent. When your frames are built this way, the developer reading your file sees the structure instead of guessing it from pixel positions.

We spend a whole lesson on this in Figma for product designers, with a file you can pull apart yourself.