Auto layout in Figma falls apart: 7 reasons and what to press

August 28, 2026 · 9 minutes · Tomsa Daria

Seven reasons why auto layout behaves differently from what you expected, and exactly what to press in the Design panel in each case. An article for people who already have Figma open.

Fill container is greyed out: the object is not inside a container with auto layout

The symptom is recognisable: you select a block, open the dropdown next to the W field and do not find Fill container there — the item is either missing or inactive. It feels as if the file has broken. It has not: sizing modes are not always available, and that is a rule, not a bug.

The three modes answer one question — who decides how wide the object is. Fixed — you do, with a number. Hug contents — the content does: the container shrinks to its children. Fill container — the parent does: the object takes up all the free space. Hence the restrictions. Hug appears only on frames with auto layout and on text layers: an ordinary frame has nothing to measure its content with, since it is placed by coordinates. Fill appears only on an object that sits inside a frame with auto layout: you can only stretch relative to a parent that knows about free space.

The practical conclusion: if Fill is not in the list, the question is not about the object but about its parent. Check in order:

• Select the block's parent in the Layers panel — the parent, not the block itself — and press Shift + A. An Auto layout section will appear in its Design panel, and the child will get the Fill mode in its list.
• Check in the layer tree that the object really is inside the frame. Dragging on the canvas does not always put an object inside: visually it lies on top, while in the tree it stands beside. Then Fill will not appear, however much auto layout you switch on for its neighbour.
• If the object is wrapped in a group, the modes belong to the group, not to it. Ungroup it (Cmd/Ctrl + Shift + G) — auto layout works with frames.
• The top screen frame is not nested in anything, so it has nobody to take Fill from. A screen's width is always Fixed — that is normal, not a mistake.

Hug, Fill and Fixed: what each mode actually promises

The mode is set separately for width and for height — those are two independent dropdowns, next to W and next to H. Half the oddities come from changing one and expecting an effect from the other. Here is a working set of pairings that covers almost any interface:

A button — width Hug, height Fixed 48: the button hugs its label, and long text makes a wide button. An input field — width Fill, height Fixed: the field takes the whole width of the form, and the form decides how much that is. A product card in a row — width Fill, height Hug: the cards share the width equally and the height comes from the content. Text inside a card — width Fill, height Hug: only that way will a long title wrap and the card grow to fit it. A photograph — width Fill, height Fixed plus the Fill scaling mode, so the image is cropped rather than squashed.

Now the main breakage of this module, and at the same time the least obvious one to look at: Fill inside Hug. A card with width Fill sits inside a container with width Hug. The parent waits for a size from its children, the children wait for it from the parent, and Figma resolves the argument as best it can: it collapses the block into a narrow strip or stretches it to some strange number. The sign is that the block jumps about and does not react to changes that ought to affect it.

The rule that removes this: in a chain of containers, at least one level must be Fixed or limited by a maximum width. The size has to come from somewhere. Usually the outer content container is fixed — 1200 by the grid, say — and everything inside stretches from it.

The same dropdown of modes is where the limits come from: the Add min width and Add max width items (and the same for height). Fill has an unpleasant property — it stretches without limit, and a line of text 1200 wide is unreadable. For a text block the maximum is set to 640, which is about 70 characters per line. For a product card — a minimum of 240: below that the photograph becomes pointless. Those two numbers make responsiveness almost automatic and remove half of the manual fixes at narrow widths.

A block spills outside the frame: Clip content and when to switch it on

The Clip content checkbox in the Frame section cuts off everything that goes beyond the frame's bounds. The temptation to switch it on the moment something sticks out is strong, but it is worth answering first why the content spilled: Clip content hides the symptom, it does not fix the layout.

First cause: a child has a fixed width larger than the parent's inner width, that is, the parent's width minus the padding left and right. Auto layout does not squeeze Fixed children — it honestly draws them over the border. The cure: width Fill on the child, or a min width instead of a hard number.

Second cause: the parent has a fixed height and the content has grown taller — the title took two lines instead of one, for instance. The cure: height Hug on the parent, so it grows with the content.

Where Clip content is genuinely needed: a media block with a photograph and rounded corners, otherwise the corners of the photo stick out from under the radius; a filter strip with horizontal scrolling. Where it must not be switched on: if the block has a shadow that goes beyond its bounds; if a badge with Absolute position sits on top and deliberately hangs over the edge; if there is a dropdown inside that in the prototype has to open over its neighbours.

Everything shifted into one row: direction and alignment

The elements lined up in a row instead of a column. The direction is the three icons in the Auto layout section: vertical, horizontal and Wrap (moving to a new line when the content does not fit). A horizontal direction on a container you thought was vertical is the most common cause of «everything shifted». Check that first.

The elements moved apart to the edges with a hole in the middle. The Gap field is set to Auto, and that is space between. The technique is useful: that is how a header with the logo on the left and the menu on the right is made, with no empty spacer rectangles. But switched on by accident it looks like a breakage. Type a number in the field and the elements will come back together.

The content is pressed to the wrong side. The square of nine dots is alignment, and it does not stretch but presses: it answers the question «where does the content sit» when the container is bigger than the content. If cards in a row have different heights and you want to make them equal, alignment will not help — the cards themselves need Fill mode for height.

An element will not move with the mouse and the X and Y fields are inactive. That is how it should be: auto layout ignores the coordinates of its children. The order is set by the layer order — in a horizontal container the one lowest in the Layers list goes first on the left. You can rearrange on the canvas too: pick an element up and move it, and Figma will show a blue insertion line and reposition it in the flow. And if an element really has to stand at an arbitrary point — a discount badge in the corner of a card — select it and switch on Absolute position, the icon with a frame and a dot in the Auto layout section. It will drop out of the flow but stay inside the frame.

The spacing lives its own life: the container's padding versus the gap between children

Two different numbers sit next to each other in the panel and are constantly confused. Padding is the container's inner space, the distance from its border to the content; it is set with two fields, horizontal and vertical, and the icon with four squares on the right opens all four sides separately. Gap is the space between children, and it has nothing to do with the container's borders.

The symptom: the distance between two blocks is not the one written in Gap. Look for it like this:

• The neighbour has padding of its own, and the real distance is the gap plus that padding.
• There is a nested container with its own padding between the blocks: it is invisible on the canvas but immediately visible in the Layers panel.
• The Gap field is set to Auto — then the number in it is not used at all.
• One of the neighbours is in Fill mode: it eats all the free space, and what looks like a distance is its empty part. Hover with Alt held down and Figma will show the real numbers.
• The text layer is taller than its letters: the line height sets the height of the line, and there is air left above and below. It reads as extra spacing, but it belongs to the text, not to the container.

The test on «awkward» content: a long title, an empty field, a two-line price

Auto layout falls apart not at the moment of assembly but at the moment real data arrives in it. That is why a component is tested not on the convenient text you invented yourself but on the extremes. Five minutes of stress-testing save an hour of rework.

What to substitute: a one-word title and a three-line title — the card should grow downwards while the row stays even. A price of «890 ₽» and a price of «124 900 ₽» — the price block should not run into the old price or push the button. A badge switched off and an old price switched off — no empty space should remain where they were. Card widths of 240 and 400 — the photo does not distort, the button stretches, the text wraps. And finally a row of four cards with titles of different lengths — all of them should be the same height.

What to fix if the test failed. A long title stretched the card into a strip and broke the row — the text layer has width Hug where it needs Fill and height Hug: only then does the text wrap. That is the second most common case after Fill inside Hug, and it is worth checking first when a row of cards suddenly falls apart.

The description grew to five lines — limit the number of lines with the Max lines parameter in the Text section: two lines are usually enough for a description in a card.

The cards in a row came out at different heights — select the cards inside the row and give them height Fill, and give the row itself top alignment. Then all of them become as tall as the tallest. The button will be pressed to the top; to send it down, give the text block height Fill inside the card — it will eat the spare space and the button will end up at the bottom edge. The free space is given to the block that can grow: that is a standard technique, not a trick.

If after such a run you want to build the card once and properly rather than fixing it again every time — in the «Interfaces in Figma» course auto layout gets a module of its own, 2 h 15 min long, and it ends with the practice «a product card that stretches»: the same card, the same five-point stress test, only with every breakage explained.

Nested auto layouts: why three levels is normal and seven is a mistake

Nesting is thought out before anything is drawn. For a product card it goes like this: an outer vertical container Card, and inside it Media (the photo with a badge on top), Text (title and description), Prices (horizontal: the current one and the old one) and the button. There is one reason for the grouping and it is entirely practical: the distances inside a group and between groups are different — 8 inside the text and 16 between blocks — while one flat container gives you only a single Gap value.

Three or four levels is normal. Seven is a sign that you were wrapping things as you went. Telling them apart is easy: every level must have a reason — direction, distance, background or padding. A level without a reason is a wrapper with one child, zero gap and zero padding; it is undone with Cmd/Ctrl + Shift + G without consequences.

Where the extra levels come from. First: Shift + A pressed on a single object wraps it in a separate wrapper frame. Sometimes that is what you want — a button is a frame with auto layout around a single label — but more often it is not. The sign: an extra level of nesting has appeared in the Layers panel; undo it with Cmd/Ctrl + Z and select all the objects you need at once. Second: trying to fix a breakage with yet another wrapper. It gives the appearance of order for a day, and a week later the file has seven levels and none of them can be touched without breaking a neighbour.

Checklist: what to check before fixing anything by hand

Before you move anything with the mouse, go down the list. In nine cases out of ten the answer is in the first three points.

• The block's parent really does have auto layout switched on — there is an Auto layout section in the Design panel.
• The block sits inside that parent in the Layers tree, not beside it.
• The container's direction is the one you meant, and the Gap field holds a number, not Auto.
• Text layers have width Fill and height Hug.
• There is no Fill inside Hug anywhere without a fixed level higher up the chain.
• Cards and columns have a min width, and text blocks have a max width.
• All the padding and gaps come from one scale: 4, 8, 12, 16, 24, 32. There are no odd values — 13 and 22 are the trace of dragging with the mouse, not a decision.
• Elements lying on top of the rest are marked Absolute position rather than having dropped out of the flow by themselves.
• Clip content is switched on only where it is genuinely needed.
• The stress test on a long title, extreme prices and two widths has been passed.

Why it is worth seeing this through

Auto layout is not a drawing mode but a way to describe rules. Instead of «this text sits 24 pixels lower» you say «the elements run vertically with a gap of 24», and from then on the rule is kept without you. As long as one block placed by coordinates remains in the file, the layout will fall apart in exactly that spot.

There is a second consequence of this that people usually discover later. In dev mode a block built with coordinates shows the distances as measured after the fact: 23, 25, 24. The developer will see three different numbers where you meant one, and will repeat them in the code. Auto layout hands over padding and gap as explicit values — and that is the main practical argument for it. What else is worth checking before handing a file over is covered in the article how to hand a design to a developer.