Your habit row now stacks itself, but test it the way Sofia does: drag the Today frame wider. The rows stay at their old width, leaving a strip of empty screen on the right. Drag it narrower and the check buttons fall off the edge. Stacking is solved; sizing is not.
\nIn auto layout every layer has two sizing behaviours, one for width and one for height. Get those right and the same row works on any phone, in any language, with any habit name.
\nYou set sizing in the width and height controls of the right sidebar. There are three options.
\nHug contents makes a frame exactly as big as its children plus padding. A chip that hugs grows when its label changes from “Daily” to “Weekends”. Only frames and text can hug, because only they have contents.
\nFill container makes a child take all the available space in its auto layout parent along that axis. If two siblings both fill, they share the space equally.
\nFixed sets an exact size that never changes. Icons and the check button are fixed at 32 × 32 because a check target should not grow or shrink with the text next to it.
\nFor Steady’s habit row the settings are:
\n| Layer | \nWidth | \nHeight | \n
|---|---|---|
| Habit row | \nFill container | \nHug contents | \n
| Icon, Check button | \nFixed 32 | \nFixed 32 | \n
| Text stack | \nFill container | \nHug contents | \n
| Habit name, Streak | \nFill container | \nHug contents | \n
Read it from the outside in. The row fills the list’s width. Inside it, the text stack fills whatever the icon and button leave, which pushes the button to the right edge. The habit name fills the stack’s width and hugs its height, so a long name wraps onto a second line and the row grows taller to fit. That is exactly the behaviour you want on a 375 px phone.
\nFigma enforces one rule for you: a parent cannot hug a child that fills it on the same axis. Each would be waiting to measure the other. If you set a child to Fill container, Figma switches the parent from Hug to Fixed on that axis.
\n\nFill and Hug can produce silly sizes at the extremes. A full-width button looks fine on a phone and ridiculous at 1,000 px wide on a tablet. A chip that hugs a one-letter label can become narrower than a fingertip.
\nMin and max width and height (found in the width and height dropdowns) set the limits. Steady uses:
\nThe frequency chips in the New habit sheet sit in a horizontal row. “Daily, Weekdays, Weekends, Custom” fits at 393 px but not at 320 px or in German. Turn on wrap for the row and chips that do not fit flow onto a new line instead of overflowing. At the time of writing, a wrapping frame lets you set the space between lines separately from the gap between items; use the same 8 px so the chips form an even grid.
\nWrap is for collections of similar items such as chips, tags or avatars. Do not wrap a habit row: on a narrow screen its check button would drop onto its own line.
\nSometimes one child should not take part in the flow at all: a small flame badge on the corner of a habit icon, or a dot that marks an unread reminder. Select it and turn on Ignore auto layout (it was called absolute position until recently, so older tutorials use that name). The layer stays inside the frame but stops affecting its siblings, and you place it with constraints, here Right and Top, so it sticks to the corner when the icon resizes.
\n\nYour rows now adapt to width and content. Next you give all those gaps and paddings a system, so 12, 16 and 24 are decisions instead of guesses.
\n","toc":[{"id":"sec-1","text":"Hug, Fill and Fixed","level":2},{"id":"sec-2","text":"Min and max","level":2},{"id":"sec-3","text":"Wrap","level":2},{"id":"sec-4","text":"Pulling a layer out of the flow","level":2}],"takeaways":["Every layer in auto layout has a width and a height behaviour; Hug contents follows the children, Fill container takes the parent’s available space, Fixed never changes.","A parent cannot hug a child that fills it on the same axis, so Figma switches that parent to Fixed.","Min and max width stop components from becoming absurdly narrow or wide on unusual screens.","Wrap lets horizontal content such as chips flow onto a new line instead of overflowing.","Ignore auto layout takes one child out of the flow so you can position it with constraints, which suits badges and floating dots."],"further":[{"title":"Guide to auto layout (resizing, wrap, min and max)","url":"https://help.figma.com/hc/en-us/articles/360040451373-Guide-to-auto-layout"},{"title":"Create a responsive card with auto layout and constraints","url":"https://help.figma.com/hc/en-us/articles/18894664907287-Create-a-responsive-card-with-auto-layout-and-constraints"}],"quiz":[{"q":"The primary “Save habit” button should stretch across the sheet on any phone, but stay its natural height. Which settings fit?
","options":[{"text":"Width Hug contents, height Fill container.","why":"Hug width makes the button only as wide as its label, and Fill height would stretch it down the sheet."},{"text":"Width Fixed 353, height Fixed 48.","why":"A fixed width breaks on any phone that is not exactly the width you designed for."},{"text":"Width Fill container, height Hug contents.","why":"Correct. Fill takes the sheet’s width; Hug keeps the height equal to the label plus padding."},{"text":"Width Fill container, height Fill container.","why":"Fill height in a vertical sheet would make the button grow into all leftover vertical space."}],"answer":2},{"q":"Inside the habit row, the text stack is set to Hug contents. On a wide phone the check button sits right next to a short name instead of at the right edge. What fixes it?
","options":[{"text":"Set the text stack’s width to Fill container so it takes the remaining space and pushes the button to the edge.","why":"Correct. Fill container makes the stack absorb the leftover width, so the button lands at the right padding."},{"text":"Set the check button’s width to Fill container.","why":"The button would stretch into a wide pill instead of staying a 32 px circle."},{"text":"Add a flexible spacer rectangle between text and button.","why":"Spacers hide intent. The stack itself should take the space."},{"text":"Set the row’s gap to auto spacing.","why":"Auto spacing could push the button right, but the text would then not wrap at a predictable width. Fill on the stack is clearer."}],"answer":0},{"q":"You set a card’s width to Hug contents, then set a child inside it to Fill container on the same axis. What does Figma do?
","options":[{"text":"It keeps both and the card grows forever.","why":"Figma prevents this loop. The parent cannot measure its children while a child measures the parent."},{"text":"It switches the card’s width to Fixed.","why":"Correct. A child that fills its parent needs a parent with a definite size, so Figma changes Hug to Fixed on that axis."},{"text":"It ignores the child’s Fill setting.","why":"Figma resolves the conflict on the parent’s side, not the child’s."},{"text":"It turns on wrap for the card.","why":"Wrap is unrelated. It only changes how children flow onto new lines."}],"answer":1},{"q":"Steady shows a small flame badge overlapping the top-right corner of a habit’s icon. How do you build it inside the auto layout icon frame?
","options":[{"text":"Add the badge as a normal child and set a negative gap.","why":"Negative gap overlaps all siblings in the flow, not just one badge at one corner."},{"text":"Put the badge in a separate frame above the whole row.","why":"It would not move with the icon when the row reflows, so it would drift on other screens."},{"text":"Draw it on top using a group and nudge it into place.","why":"Groups inside auto layout still join the flow; nudging is lost on the next re-layout."},{"text":"Add the badge as a child, turn on Ignore auto layout, and pin it with Right and Top constraints.","why":"Correct. Ignore auto layout takes it out of the flow, and constraints keep it at the corner as the icon resizes."}],"answer":3}],"exercise":{"kind":"choice","multiple":true,"options":["wrap-chips","max-button","fill-label","hug-sheet","fill-chips","ignore-toggle"],"correct":["wrap-chips","max-button","fill-label"],"title":"Make the New habit sheet survive any screen","prompt":"QA filed three bugs against the New habit sheet: on a 320 px phone the chips run off the edge (below), the Reminder toggle hugs its label instead of sitting at the right edge, and on an iPad the Save habit button stretches to 900 px wide.
\n:::figure The New habit sheet on a 320 px phone\n
\nThe sheet is a vertical auto layout frame set to Fill container width. Select every change that fixes one of these bugs properly.
\n","hints":["Match each bug to one sizing tool: wrap, min/max, or Fill container.","For the toggle, the leftover space has to go somewhere. Which child should absorb it?","Wrap the chips row, cap the button with a max width, and make the label fill."],"explanation":"Turning on wrap for the chips row lets “Custom” flow onto a second line instead of overflowing. A max width on the Save habit button (Steady uses 480) keeps Fill container from producing a 900 px bar on tablets. Setting the Reminder label to Fill container makes it absorb the leftover width, which pushes the toggle to the row’s right padding on every screen. Making the sheet hug its contents would shrink it to its widest child instead of filling the screen; filling every chip stretches them into uneven pills; and nudging the toggle out of the flow with Ignore auto layout fixes one width and breaks the rest.
\n","checkLabels":{},"optionText":{"wrap-chips":{"text":"Turn on wrap for the frequency chips row.","why":"Correct. Chips that do not fit flow onto a new line, which is exactly what wrap is for."},"max-button":{"text":"Give the Save habit button a max width, such as 480.","why":"Correct. The button keeps Fill container on phones but stops growing on large screens."},"fill-label":{"text":"Set the Reminder label’s width to Fill container.","why":"Correct. The label takes the spare width, so the toggle lands at the right edge at every size."},"hug-sheet":{"text":"Set the sheet’s width to Hug contents.","why":"A hugging sheet sizes to its widest child, so it would no longer span the screen and the bugs would move rather than disappear."},"fill-chips":{"text":"Set every chip to Fill container.","why":"The chips would stretch to share the row width equally and still not fit on a 320 px screen. Chips should hug their labels."},"ignore-toggle":{"text":"Turn on Ignore auto layout for the toggle and drag it to the right edge.","why":"You could pin it with constraints, but taking it out of the flow means the label can now run under it. Fill on the label is simpler and robust."}}},"words":801,"readMinutes":4}