How to Use Figma Auto Layout Without Fighting It

If you want to learn how to use Figma auto layout, start with one button. Not a dashboard. Not a whole page. One button, with one label you keep making longer on purpose. Watch what breaks. Then fix it with rules instead of dragging corners around.

Most people meet auto layout backwards. They build a screen first, then retrofit the rules, then spend an hour wondering why everything jumped. The rules are the design. Set them early and the screen almost builds itself.

What is Figma auto layout, actually?

So what is Figma auto layout once you strip the marketing off? Figma’s own guide describes it plainly: elements inside a frame are arranged by direction, spacing, padding and alignment, and when content changes — or elements are added, removed or resized — the layout adjusts without manual repositioning.

A normal frame holds things at fixed coordinates. Move nothing, nothing moves. An auto layout frame holds things in a flow. The rules live on the frame, not on each layer. You set them once, and every child obeys.

Figma gives you three flows. Vertical stacks top to bottom, the shape of lists and feeds. Horizontal runs left to right, the shape of button rows and navigation bars. Grid, the newest, places objects in rows and columns for galleries and dashboards. Wrap sits on top of the other flows: run out of room and children spill onto a new row instead of crushing together.

How to use Figma auto layout in four moves

Select a layer, or a few, and press Shift+A. Figma wraps the selection in an auto layout frame and guesses a flow from how the layers sit. That guess is often right. Check it anyway.

Move one: pick the flow. Ask one question — should the next item go beside this one, or below it? Beside means horizontal. Below means vertical. If the honest answer is both, you need two nested frames, not one confused one.

Move two: set padding. Padding is the space between the frame edge and its contents, settable per side. UIGuides suggests 12 pixels top and bottom and 16 left and right for buttons, and 24 all round for cards. Good defaults. Steal them.

Move three: set the gap. Gap is the distance between children, only between children — never at the edges. Use a fixed number for packed groups like chips and form fields. Switch the gap to Auto, the space-between setting, when items should spread across the full width, the way a navigation bar pushes a logo to one end and a button to the other.

Move four: rename the frame. “Frame 47” tells the next person nothing, and the next person is usually you, three weeks later, at midnight.

Hug, fill, fixed — pick who controls the size

Resizing behaviour is where beginners stall, because three short labels carry the whole system.

Hug contents means the frame shrinks or grows to fit what is inside, plus its padding. A 40-pixel text layer with 10 pixels of padding each side makes a 60-pixel frame; edit the text to 50 pixels and the frame becomes 70. Buttons and tags should hug. That is their job.

Fill container does the opposite. The child stretches to take whatever space the parent offers, after padding and siblings have taken their share. Content areas fill. Sidebars fill, up to a point.

Fixed means fixed. The size stays where you put it, whatever changes around it. Icon containers earn this one: 24 by 24, always.

Set minimum and maximum widths too. A hugging button with a minimum width of 120 pixels never looks starved on a short label like “OK”. WPDean’s practical guide puts the underlying question well: who gets to control the final size? Answer that per layer and the settings stop feeling arbitrary.

Figma auto layout vs constraints: which one moves?

The figma auto layout vs constraints confusion survives because both promise to help when things resize. They do different jobs.

Auto layout arranges a group. It controls direction, padding, gap and resizing for children together, and it recalculates spacing when the group changes. Constraints pin one layer to its parent’s edges — left, right, centre, stretch, scale — and that is all they do.

Figma is strict here: you cannot apply constraints to a child inside an auto layout frame, unless that child is set to ignore the flow. That exception has a real use. A badge on a card’s corner, a close icon over a panel — set those to Ignore auto layout and let constraints handle them while the flow handles the rest.

Short version: groups that move together get auto layout. One thing glued to a corner gets constraints.

A figma auto layout for beginners practice set

Treat this figma auto layout for beginners set as reps, not homework. Twenty minutes, three builds.

Build the button first. Horizontal flow, hug on both axes, the padding above. Change the label from “Save” to “Save and continue”. Nothing should need your hands.

Build a card next. Vertical flow, image on top, then title, text, button. Fixed card width, text set to fill. Lengthen the title until it wraps. The button should move down, not overlap.

Build the navigation bar last. Horizontal flow, fixed height, gap set to Auto. Logo left, links in their own horizontal frame, one hugging button right. Stretch the bar wider. The ends should hold.

Then break things on purpose. Nest one frame too deep. Set a child to fixed when it should fill. You learn the failure modes by causing them once, cheaply.

I keep coming back to this feature because it rewards a habit that transfers everywhere: state the rule once, clearly, and stop repeating the labour by hand. Rebuilding my own site by hand in Sitely taught me the same lesson from the other side. Manual placement feels faster for exactly one screen. Rules win from the second screen onward.

Sources:

• Figma Help Center — Guide to auto layout in Figma
• WPDean — How to Use Auto Layout in Figma: A Practical Guide
• UIGuides — How to Use Auto Layout in Figma