How do I… · Figma

How do I use auto layout in Figma?

Auto layout makes a frame arrange its children in a row or a column and resize itself around them. It is the difference between a picture of a UI and a UI that survives longer text.

Steps

  1. Select the layers you want grouped and press Shift+A. Figma wraps them in a frame with auto layout on.
  2. In the right panel, choose the direction — horizontal or vertical — and set the gap between items and the padding around them.
  3. Set alignment with the nine-point control: it decides where children sit inside the frame when there is spare room.
  4. Set each child’s resizing: Hug contents means the frame shrinks to fit, Fill container means it stretches, Fixed means it stays put. Most layout problems are one of these three set wrong.
  5. Nest them. A button is a horizontal auto layout inside a card that is a vertical one — that is the normal shape, not an advanced technique.

Worth knowing

If a text layer refuses to wrap, it is set to Hug rather than Fill. If a frame will not shrink, something inside it is Fixed. Absolute position (the icon at the top of the auto layout section) lifts one child out of the flow so you can place a badge on a corner without breaking the row.

Related

Stuck on the next one?

This page is written by the people who make Open Portal: press Ctrl+Shift+O, box any part of your screen, and ask about it. Figma included — it works in every app, because it reads pixels rather than plugging into anything.

Try it here, no install Download free

Faster than searching: box the part of your screen you cannot work out and ask about it directly — in Figma or anywhere else. Answers arrive where you drew the box.

Try it on a screenshot Download free