Resizing: Hug, Fill, Fixed and Wrap

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.

In 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.

Hug, Fill and Fixed

You set sizing in the width and height controls of the right sidebar. There are three options.

Hug 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.

Fill 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.

Fixed 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.

For Steady’s habit row the settings are:

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.

Figma 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.

Min and max

Fill 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.

Min and max width and height (found in the width and height dropdowns) set the limits. Steady uses:

• Save habit button: Fill container, max width 480, so it stops growing on tablets.
• Chip: Hug contents, min width 64, so short labels still make a comfortable target.
• Text field: Fill container, min width 200, so it never collapses in a narrow layout.

Wrap

The 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.

Wrap 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.

Pulling a layer out of the flow

Sometimes 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.

Your 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.