Auto layout is just a list of boxes

Every auto layout frame is a row or a column. That's it. Once you see a screen as rows inside columns inside rows, nesting stops being scary.

Try this on any screen

Squint at a card. Is it a column? Then the title, the text and the button row are its children. Is the button row a row? Then the two buttons are its children. You just described the whole card in auto layout.

Hug, fill, fixed

• Hug means the box is as big as its content.

• Fill means it takes the space its parent gives it.

• Fixed means you decided the size and it won't move.

Most layout bugs are a child set to fill inside a parent set to hug. Nobody knows who decides the size, so Figma picks for you.