Here's a quick test for any Figma file. Pick a card, double-click its title, and paste in a sentence three times longer than the original. If the text spills out of the box, the button slides under the image, or the card stays the same height while everything inside overlaps, that card was drawn, not built.

Auto layout is the difference. It's the feature that makes frames rearrange themselves when their content changes, and almost everything else in Figma leans on it: components, variants, responsive screens, and the handoff to developers. If auto layout doesn't click, the rest of the tool feels like a fight.

So here's the one rule I'd put above all the others: if you're nudging things into place with the arrow keys, something is set up wrong.

It's Flexbox with a friendlier face

Auto layout follows the same model as CSS Flexbox. That's not a loose comparison. Figma has a help article literally titled "Use auto layout with CSS Flexbox in mind" that maps one onto the other.

That equivalence is also why a developer can open your file and understand what you meant. A frame with auto layout describes a layout the way code does, instead of being a picture of one.

You don't need to write CSS to use it. But knowing the parallel helps, so I'll point it out along the way.

Three sizing behaviors, per axis

Every layer inside an auto layout frame answers one question on each axis (width and height): how big should I be? There are only three answers.

• Hug contents: What it does: The frame shrinks or grows to fit what's inside it; Rough CSS equivalent: width: fit-content
• Fill container: What it does: The child stretches to take whatever space the parent gives it; Rough CSS equivalent: flex: 1
• Fixed width / height: What it does: A set number that doesn't change; Rough CSS equivalent: width: 320px

Most layout bugs come down to one of these being wrong. Usually it's a Fixed where you needed Fill, or a Hug where you needed Fixed. A button label inside a fixed-width frame gets cut off when the text changes. A card set to Hug looks lost in a wide column, because it only knows how big its content is, not how big the space around it is.

The "three times longer" text test from the opening is the fastest diagnosis there is. Whatever breaks first is where the wrong setting lives.

The controls that matter

Once sizing makes sense, the rest of the panel is short:

• Flow (direction). Vertical, horizontal, or grid.
• Gap. The space between children. Set it to Auto and Figma spreads the leftover space evenly between items, the same idea as justify-content: space-between.
• Padding. Breathing room inside the frame. It can be different on each side.
• Alignment. The nine-point grid that decides where children sit inside the frame.
• Wrap. Available in the horizontal flow. When children don't fit on one line, they drop to the next.
• Minimum and maximum width / height. Limits you can set without giving up Fill.

Min and max are the quiet heroes of responsive layout. A text column set to Fill with a maximum width of 640 px stretches on a small screen and stops growing on a big one. Without that cap, a 1920 px wide screen gives you lines of 200 characters, and nobody reads those comfortably. A readable line sits somewhere around 45 to 75 characters.

Grid, for when wrap isn't enough

Besides vertical and horizontal, auto layout now has a grid flow, which Figma introduced in 2025. It gives you real rows and columns, and children can span more than one cell. It's the right tool for galleries, dashboards and boards, where wrap gets messy because every row has to line up with the one above it.

If you've used CSS Grid, it's the same family of idea. If you haven't, start with a gallery of six cards and try making one of them span two columns.

Getting out of the flow (sparingly)

Sometimes a layer has to sit on top of the layout instead of inside it. In Figma's current interface this is called Ignore auto layout (older tutorials call it "absolute position"). The layer stays inside the frame but stops taking part in the flow, and you pin it in place with constraints instead.

It's legitimate. It's also the exception.

Good uses:

• a notification badge on the corner of an avatar
• a floating action button
• the close "×" in the corner of a modal
• a sticky header inside a scrolling area

Bad uses:

• positioning an entire card by hand
• "it just looked right this way"
• avoiding learning Fill

A rule of thumb: if a frame has more than two children ignoring auto layout, the layout was planned wrong and it's time to rebuild it.

Real layouts are nested

A real screen isn't one auto layout frame. It's three to five of them inside each other, each doing one job. Here's a typical product card:

card vertical · hug · padding 16 · gap 12

├── image fill width · fixed height 160

├── text vertical · fill · gap 4

│ ├── title fill · auto height

│ └── description fill · auto height

└── actions horizontal · fill · gap 8

├── secondary button hug

└── primary button fill

Read it from the outside in. The card hugs its content vertically, so it grows when the title gets longer. The image and the text block fill the card's width, so they follow it when the card gets wider. The text layers use Auto height, so they wrap and push everything below them down instead of overflowing. The primary button fills the leftover space in the actions row, while the secondary button stays only as wide as its label.

That structure survives a one-line title and a four-line title without you touching anything.

Two more recipes

A navigation bar:

nav horizontal · fill · padding 16 24 · gap Auto · align center

├── logo hug

├── links horizontal · hug · gap 24

└── actions horizontal · hug · gap 8

The Auto gap is what pushes the logo to the left edge and the actions to the right, however wide the bar gets.

A list with an empty state:

list vertical · fill · gap 0

├── item × n fill width · hug height

└── empty state fill · fill (centered), visible only when there are no items

Designing the empty state inside the same frame means you don't forget it, and it takes up exactly the space the list would have used.

A quick troubleshooting table

• Text spills out of its box: The box is Fixed when it should Hug, or the text isn't set to Auto height
• Everything shrinks when you add content: The parent is set to Hug when it should Fill
• Odd gaps appear when you stretch the frame: No child is set to Fill to absorb the extra space
• Lines of text run 200 characters long: There's no maximum width
• One layer stays put while everything else moves: It's set to Ignore auto layout

Try to break it

Here's the exercise worth doing before anything else in Figma. Build a product card, then try to break it with:

• a title of 4 words and a title of 40
• a price with 3 digits and one with 8
• an image, and no image
• a container 280 px wide and one 900 px wide

Better still, hand it to someone else and let them do the breaking. You'll go easy on your own card without meaning to. They won't. Whatever breaks first tells you exactly which of the three sizing settings to go fix.

Further reading

• Figma Help Center, "Guide to auto layout"
• Figma Help Center, "Use auto layout with CSS Flexbox in mind"
• Figma Help Center, "Use the grid auto layout flow"
• Figma Help Center, "Create a responsive card with auto layout and constraints"