Hug, Fill and min/max sizes

Every layer’s width and height has a mode. It can keep the size you typed, fit what is inside it, or take the space its parent leaves. Mixing these is how a button grows with its label, a card fills a column, and a text block never gets wider than is comfortable to read.

Choose a mode

Select a layer and open the menu at the end of the W or H field in the Layout section:

• Fixed: the layer stays the size you set. The field shows just the number.
• Hug contents: the layer fits what is inside it. The field reads Hug.
• Fill container: the layer takes the space left in its parent. The field reads Fill.

Width and height are set separately, so a card can fill its column’s width and hug its height.

Which layers can do what

• Hug is offered for text, buttons and auto layout frames: layers whose size can come from their content.
• Fill needs a parent. On a layer at the top of the page, it shows in the menu as unavailable.
• Inside an auto layout frame, Fill shares the space left in the row or column with any other layers that fill.
• In a frame without auto layout, Fill pins the layer to both sides of its parent. It is the same as the Left and right (or Top and bottom) constraint; see Constraints.
• A plain frame with nothing in it, or a shape outside auto layout, has a plain W and H with no menu.

Typing a number in W or H makes that side Fixed.

Resize to fill or fit in one go

The … button at the end of the align row (Distribute and resize) has two shortcuts for one layer:

• Resize to fill sets both width and height to Fill.
• Resize to fit sets both to Hug.

Min and max sizes

A layer that fills or hugs can be given limits, so it never gets too narrow or too wide.

1. Select an auto layout frame, or a layer inside one.
2. Open the W or H menu and choose Add min width… or Add max width… (or the height versions).
3. A Min W or Max W field appears under the size fields. It starts at the layer’s current size: type the limit you want.

To remove one, press the minus beside it, or choose Remove min width in the same menu.

If you type a minimum above the maximum, the maximum moves up to match, and a message tells you so. The same goes the other way.

Min and max fields accept number variables: type = in the field to pick one. See Variables and modes.

Several layers at once

Select several layers and the sizing menu shows the modes all of them allow. Where they differ, the field reads Mixed. A width typed into several layers sets each of them, each kept where it is.

Lock the aspect ratio

Press Lock aspect ratio next to W and H, and changing one changes the other in proportion. Both sides become Fixed. Text has no lock: its height comes from its words.

What it becomes on your site

When you publish or export, Hug is written as fit-content, Fill as a flexible size that shares the space, and min and max as min-width, max-width and so on. In Settings, set Names in the panels to Developer to see the CSS words in the panel.

Catches

• Min and max are for one layer at a time, and only on an auto layout frame or a layer inside one.
• Fill on a layer that ignores auto layout becomes Fixed. It is out of the flow, so there is no space to share.
• A wrapping row keeps each filling layer’s width as its starting size, so cards wrap to the next line on a narrow screen instead of squeezing. See Wrap in Auto layout.
• A locked ratio sets both sides to Fixed, even if one of them was hugging or filling.

Hug, Fill and min/max sizes are on every plan.