Learn Figma Now Get the book IT
Lesson 3 of 5 · 6 min

Hug, fill, fixed and constraints

Auto layout makes a frame react to its content. Resizing and constraints add the other direction: elements that react to the frame around them. Together they are what makes a layout responsive.

Three answers to one question

In the Resizing section of the right panel, every layer inside Auto layout answers the same question for its width and for its height: who decides how big you are?

  • Hug contentsthe children decide: the frame wraps them, padding included
  • Fixedyou decide: the size stays the number you set
  • Fill containerthe parent decides: the layer stretches to take the space left

Width and height are independent, so a container can hug its content vertically and keep a fixed width. And you don’t always choose Fixed on purpose: as soon as you drag an edge or type a size, Figma switches that axis to Fixed for you. When a frame stops growing, that is usually the reason.

Fill container only exists for layers that sit inside an Auto layout frame, because it needs a parent to fill. Combining them is where the fun is: one element hugs its content while the one next to it fills the rest of the row.

The parent frame gets narrower and wider. Fixed keeps its 120, Hug stays as wide as its label, Fill container follows the parent.

Constraints: the other direction

Auto layout lets a parent react to its children. Constraints do the opposite: they tell a child how to react when the parent changes size. Select a layer inside a frame and the Constraints section shows the edges you can anchor it to.

Anchor a layer to Left and right and it keeps the same distance from both sides, so it stretches with the screen. Anchor it to right and bottom and it stays in that corner. If you turn off all the edges, the layer switches to Scale and grows proportionally with the frame.

Try it: a button group that fits any screen

  1. Select the Button Group from lesson 2, make it as wide as the 393 px Login frame, and set its horizontal padding to 16 so it lines up with the layout grid.
  2. Set the alignment of the Button Group to centre.
  3. Select both buttons and set their horizontal resizing to Fill container. They stretch to the full width of the group.
  4. Select the secondary button and press ⇧ Shift + X to swap fill and stroke: now it reads as the lighter action.
  5. Select the Login frame and drag its right edge to make it wider. The button group stays where it was: not what you want.
  6. Undo with ⌘ Cmd + Z, select the Button Group and set its horizontal constraint to Left and right. Stretch the frame again: now the buttons follow.

Remember

  • Hug: the children decide. Fixed: you decide. Fill: the parent decides.
  • Resizing a frame by hand switches that axis to Fixed.
  • Fill container only works inside an Auto layout frame.
  • Constraints make children react to the parent: Left and right stretches with the screen.