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.
\nAuto layout is Figma’s answer: you tell a frame how to arrange its children, and it positions them for you, every time anything changes.
\nSelect 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.
\nGap 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.
\nPadding 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.
\nHere is the row as nested auto layout frames. Each frame has one job.
\nHabit row Horizontal · gap 12 · padding 12 top/bottom, 16 left/right · align center\n├─ Icon 32 × 32\n├─ Text stack Vertical · gap 4\n│ ├─ Habit name Headline 17/24\n│ └─ Streak Caption 13/16\n└─ Check button 32 × 32 circleThe 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.
\nNow 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.
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.
\nFor 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”.
\n\n\nYou 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.
\n","toc":[{"id":"sec-1","text":"The three settings that matter most","level":2},{"id":"sec-2","text":"Building the habit row","level":2},{"id":"sec-3","text":"Alignment","level":2}],"takeaways":["Auto layout makes a frame arrange its children for you, so changing content never means nudging layers by hand again.","Flow sets the direction (vertical, horizontal or grid), gap sets the space between children, and padding sets the space between the children and the frame’s edges.","Spacing belongs to the parent frame, never to spacer rectangles or offsets on the children.","Real components are nested auto layout frames, such as a horizontal row that contains a vertical text stack.","Most auto layout bugs come from settings on the wrong level of nesting, so check the parent before you blame the child."],"further":[{"title":"Guide to auto layout","url":"https://help.figma.com/hc/en-us/articles/360040451373-Guide-to-auto-layout"},{"title":"Use the horizontal and vertical flows in auto layout","url":"https://help.figma.com/hc/en-us/articles/31289464393751-Use-the-horizontal-and-vertical-flows-in-auto-layout"}],"quiz":[{"q":"You change a habit name from “Run” to “Run 5 km before work” inside an auto layout habit row. What happens to the check button on the right?
","options":[{"text":"It overlaps the longer name until you move it.","why":"That is what happens in a frame without auto layout. Auto layout recalculates positions as content changes."},{"text":"It stays exactly where it was, because buttons are fixed.","why":"Children in auto layout have no fixed x and y. Their position comes from the flow, gap and their siblings."},{"text":"It is pushed along the flow, or the name wraps, depending on how the row and text are set to resize.","why":"Correct. The row re-flows and the button keeps its gap from the text. Whether the name wraps or the row grows is a resizing choice (next lesson)."},{"text":"Figma shows a warning that the content no longer fits.","why":"Figma has no such warning. Auto layout adapts the layout instead."}],"answer":2},{"q":"The text stack inside a habit row has 4 px gap, and the row has 16 px left padding. A designer adds a 16 px empty rectangle before the icon to push it right. What is wrong?
","options":[{"text":"Nothing, because the result looks the same.","why":"It looks the same until someone changes the padding or swaps the icon. Hidden spacers make the spacing impossible to reason about or hand off."},{"text":"Spacing should come from the parent’s padding and gap, not from invisible layers.","why":"Correct. If the icon needs more room, change the row’s padding. Spacer layers show up as mystery boxes in Dev Mode."},{"text":"Rectangles cannot be children of auto layout frames.","why":"They can. The problem is using one as a spacer, not whether it is allowed."},{"text":"The rectangle should be 8 px so the total stays on the 8-point grid.","why":"Changing the size keeps the hidden-spacer problem. Spacing values belong in padding and gap."}],"answer":1},{"q":"Which structure best describes Steady’s habit row?
","options":[{"text":"A vertical auto layout frame containing icon, name, streak and check button.","why":"A single vertical stack would put the check button below the streak instead of beside the text."},{"text":"A group containing four layers placed by hand.","why":"Groups cannot use auto layout, so every content change means repositioning by hand."},{"text":"A grid auto layout with one column per element.","why":"Grid suits two-dimensional layouts like the icon picker, not a single row with a nested text stack."},{"text":"A horizontal auto layout frame containing the icon, a vertical text stack and the check button.","why":"Correct. The row flows horizontally, and the name and streak stack vertically inside their own frame."}],"answer":3},{"q":"Inside a horizontal habit row, the icon sits at the top while the text and check button are centered. Where do you fix it?
","options":[{"text":"On the row frame, by setting its alignment so children are centered vertically.","why":"Correct. Alignment of children is a property of the parent auto layout frame."},{"text":"On the icon, by nudging it down 6 px.","why":"You cannot position a child by hand in auto layout without taking it out of the flow. Alignment lives on the parent."},{"text":"On the page, by adding a layout guide.","why":"Layout guides help you align frames, but they do not change auto layout alignment."}],"answer":0}],"exercise":{"kind":"fill","language":"text","template":"Chip (auto layout)\n Flow: {{0}}\n Gap between items: {{1}}\n Padding left/right: {{2}}\n Padding top/bottom: {{3}}\n Align children: {{4}}\n\nFrequency chips (auto layout)\n Flow: {{5}}\n Gap between items: {{6}}","blanks":[{"answers":["Horizontal"]},{"answers":["4","4px","4 px"]},{"answers":["12","12px","12 px"]},{"answers":["6","6px","6 px"]},{"answers":["Center","Centre","Middle","Center vertically","Centered","Centred","Vertical center","Left center","Center left"]},{"answers":["Horizontal"]},{"answers":["8","8px","8 px"]}],"title":"Set up the frequency chips","prompt":"The New habit sheet has a row of frequency chips: Daily, Weekdays, Weekends, Custom. Each chip is a 16 × 16 icon followed by its label. From the developer’s redline:
\nFill in the auto layout settings for one chip and for the row that holds all four. Use the names Figma shows (Vertical, Horizontal or Grid for flow; Top, Center or Bottom for alignment) and numbers in px.
\n","hints":["Two frames are involved: each chip, and the row that contains the chips. Which one owns the 8 px?","Space between children is gap; space between the children and the frame edge is padding.","Chip: Horizontal, gap 4, padding 12 and 6, centered. Row: Horizontal, gap 8."],"explanation":"Each chip is a Horizontal auto layout frame because the icon and label sit side by side. The 4 px between them is the chip’s gap; the 12 px and 6 px around them are its padding (6 is off the spacing scale on purpose: with a 20 px label line it gives the chip an even 32 px height, the kind of written reason Lesson 2.3 asks for); and centering is the chip’s alignment, set on the parent, not by nudging the icon. The 8 px between chips belongs to the parent row, another Horizontal frame with an 8 px gap. Putting each value on the frame that owns it means a developer can read it straight from Dev Mode, and a longer label like “Weekends” grows its chip without breaking the row.
\n","checkLabels":{}},"words":785,"readMinutes":4}