12 Auto Layout Rules for Cleaner Figma Files

Auto layout is the single most important feature in Figma. Used well, it turns static drawings into flexible layouts that resize, reflow, and behave the way real interfaces do. Used badly, it creates a maze of nested frames that nobody — including you, three weeks later — can untangle.

These are the twelve rules I follow on every file. None of them are complicated. Together, they make files faster to edit, easier to hand off, and much closer to how developers will actually build the interface.

1. Use auto layout on almost everything#

If a frame contains more than one element, it should probably use auto layout. Buttons, cards, list items, navigation bars, form fields, entire page sections. The only real exceptions are illustrations, decorative compositions, and things that genuinely need free positioning.

The payoff is huge: change a label and the button grows; add a list item and the list extends; delete a field and the form closes the gap. No manual nudging.

2. Think in CSS flexbox#

Auto layout is essentially flexbox. Direction is flex-direction, gap is gap, padding is padding, alignment is align-items and justify-content. When you design with this mental model, your layouts translate almost directly into code, and developers don't have to reverse-engineer your intentions.

If you can't describe a layout in flexbox terms, that's often a sign it'll be hard to build.

3. Spacing comes from gap and padding, never from spacers#

Avoid invisible rectangles used as spacers. They clutter the layer panel, break when content changes, and have no equivalent in code. Use the frame's gap for space between children and padding for space inside the frame.

When one element needs different spacing from its siblings, wrap the group in its own nested auto layout frame instead of faking it with a spacer.

4. Use your spacing scale for every value#

Every gap and padding should come from a defined scale — typically multiples of 4 or 8. If you see a gap of 13 or padding of 22, something has gone wrong. Better still, bind spacing values to Figma variables so they're consistent across the whole file and update in one place.

5. Get resizing right: hug, fill, fixed#

Each layer in an auto layout frame has a resizing behavior, and choosing the right one is most of the skill:

• Hug contents — the element is as big as its content. Use it for buttons, tags, and text that shouldn't stretch.
• Fill container — the element stretches to fill the available space. Use it for inputs, cards in a grid, and text blocks that should wrap at the container width.
• Fixed — a specific size. Use it sparingly: icons, avatars, and elements with a genuine fixed dimension.

A common mistake is leaving text layers on fixed width, which makes them overflow or leave awkward gaps as the container changes. Text in a flexible container should almost always be fill width with auto height.

6. Set min and max widths#

Real layouts have limits. A button shouldn't shrink below a certain width; a text column shouldn't grow wider than a comfortable reading length. Use min and max width to encode those limits directly in the design. Developers can then match them exactly, and your designs behave correctly when you test them at different sizes.

7. Nest intentionally, not endlessly#

Nesting auto layout frames is how you build complex layouts — but every level should have a reason. A good rule of thumb: each frame should represent something meaningful, like a component, a section, or a group that shares spacing. If a frame only exists to hold one child with no padding, it probably doesn't need to exist.

Shallow, purposeful nesting makes files faster and much easier to edit.

8. Name your frames#

"Frame 4827" tells nobody anything. Name frames after what they are: "Card / Header," "Form / Fields," "Nav / Actions." Clear names make the layer panel navigable, help developers understand the structure in Dev Mode, and make it obvious when something is in the wrong place.

9. Use space between for split layouts#

For layouts where items should push to opposite edges — a title on the left and an action on the right — set the gap to auto (space between) instead of adding a spacer or manually positioning elements. The layout will stay correct at any width.

10. Use absolute position only for overlays#

Sometimes an element needs to break out of the flow: a notification badge on an avatar, a close button in a corner, a floating label. Auto layout supports absolute positioning for these cases. Use it only for genuine overlays, and set constraints so the element stays anchored correctly when the parent resizes.

11. Use wrap for chips and tag lists#

Wrap lets items flow onto multiple lines, like tags, filter chips, or a grid of cards. Combine it with consistent horizontal and vertical gaps for clean, responsive collections that behave like their coded equivalents.

12. Stress-test every layout#

Before you call a layout finished, try to break it:

• Make the frame much wider and much narrower.
• Replace labels with very long text and very short text.
• Add and remove items from lists.
• Swap in content with missing images or empty fields.

If the layout survives, it's ready. If it breaks, the stress test just saved a developer from discovering the problem in code.

Why this matters#

Auto layout isn't about making Figma files tidy for their own sake. It's about designing with the same constraints the real product will have. Layouts built this way are faster to iterate on, easier to turn into components, and far more likely to be implemented exactly as intended.

Follow these twelve rules consistently and you'll notice something: you stop drawing screens and start building systems — which is exactly what modern product design needs.