Auto Layout: Direction, Gap and Padding

In the last lesson you built a habit row by placing an icon, a name, a streak and a check button by hand. Now change “Read” to “Read 20 pages before bed”. The name runs into the check button. Add a second line and the streak overlaps the next row. Every content change means nudging layers, and in a real app content changes every day.

Auto layout is Figma’s answer: you tell a frame how to arrange its children, and it positions them for you, every time anything changes.

The three settings that matter most

Select the habit row’s layers and press Shift+A, or click Add auto layout in the right sidebar. Figma wraps them in an auto layout frame and makes a first guess at the settings. Three of them do most of the work.

Flow is the direction children are placed in. At the time of writing, Figma offers Vertical, Horizontal and Grid. Vertical stacks children top to bottom, like the habit list. Horizontal lines them up side by side, like the inside of one row. Grid places children in rows and columns, which suits a two-dimensional layout such as the icon picker in the New habit sheet.

Gap is the space between children. It is one number for the whole frame, so every child is the same distance from the next. You can also choose automatic spacing, which at the time of writing offers Between, Around and Evenly, to distribute leftover space instead of fixing it. Use a fixed number almost always; automatic spacing is for cases like a tab bar where items spread across the width.

Padding is the space between the children and the frame’s own edges. You can set it on all sides at once, horizontal and vertical separately, or per side.

Building the habit row

Here is the row as nested auto layout frames. Each frame has one job.

Habit row        Horizontal · gap 12 · padding 12 top/bottom, 16 left/right · align center
├─ Icon          32 × 32
├─ Text stack    Vertical · gap 4
│  ├─ Habit name   Headline 17/24
│  └─ Streak       Caption 13/16
└─ Check button  32 × 32 circle

The text stack is its own vertical frame because the name and streak are a group (Lesson 1.2: small gap inside, bigger gap outside). The row is horizontal because icon, text and button sit side by side. The 4 px inside the text stack is smaller than the 12 px between row elements, which is smaller than the space between rows. Proximity is now built into the structure, not maintained by hand.

Now stack rows. Select all the rows and press Shift+A again: Figma wraps them in a vertical frame, the Habit list, with an 8 px gap. Wrap the progress block and list in a vertical frame with a 24 px gap, then wrap the header and that frame in one more vertical frame with 20 px horizontal padding and a 32 px gap. Two levels of gap give you the stepped spacing from Lesson 1.2, and the whole Today screen is now structured by auto layout. Change any name, add a sixth habit or delete one, and everything below moves to make room.

Alignment

Each auto layout frame also controls how its children line up across the flow. In a horizontal row, you choose whether children sit at the top, center or bottom of the row; in a vertical stack, whether they hug the left, center or right. The habit row uses center alignment so the icon and check button line up with the middle of the text, whether the name is one line or two.

For rows of text with different sizes, horizontal frames also offer baseline alignment at the time of writing, which lines up the bottoms of the letters instead of the boxes. It is ideal for a label and a value side by side, such as “Streak” and “12 days”.

You have the habit row stacking correctly. What it does not do yet is stretch to fill the screen width or let long names wrap at the right place. That is resizing, the subject of the next lesson.