Figma Auto Layout for Beginners Without the Frustration

You build a button in Figma. Rectangle, text on top, nicely centred. Then the label changes from "Buy" to "Add to basket" and the text spills straight over the edge. You resize the rectangle, nudge the text, and do it again for the twelve other buttons in the file. Twenty minutes gone on something a computer should handle.

Figma auto layout is the feature that handles it. It turns a frame into a container that measures its contents and arranges them with fixed spacing, so the button grows when the label grows. Beginners often find it maddening for the first week because frames suddenly refuse to move where they are dragged. Once the three or four core settings make sense, it becomes the tool you reach for in almost every interface design.

What Figma Auto Layout Actually Changes

Without auto layout, every layer sits at fixed coordinates. Move one thing and nothing else reacts. With auto layout, the frame becomes a stack: items line up in a row or a column, with a set gap between them and set padding around the edges.

Select any frame or group of layers and press Shift and A. Figma wraps them in an auto layout frame and guesses a direction from how they were arranged. That guess is right most of the time, and you can switch it in the right hand panel.

The mental shift is this: you stop placing things and start describing rules. "Items in a column, 16 pixels apart, 24 pixels from the edge." Figma then does the placing.

The Four Settings That Matter First

The auto layout panel looks busy, but four controls do nearly all the work.

Direction. Vertical, horizontal, or wrap. Wrap lets items flow onto a new line when the row runs out of room, which suits tag lists and card grids.
Gap. The space between items. Use values from a spacing scale such as 4, 8, 12, 16, 24 and 32 rather than whatever looks right in the moment.
Padding. The space between the items and the frame edge. You can set it for all sides at once or each side separately.
Alignment. The small nine dot grid decides where items sit inside the frame: top left, centre, bottom right and so on.

The gap value also has a "space between" option. It pushes the first and last items to the edges and spreads the rest evenly, which is exactly what a navigation bar with a logo on the left and links on the right needs.

Hug, Fill and Fixed Explained Without Jargon

This is where most beginners get stuck. Every layer inside auto layout, and the frame itself, has a width and height behaviour.

Setting	What it means	Typical use
Hug contents	Shrink or grow to fit what is inside	Buttons, tags, badges
Fill container	Stretch to take the space the parent offers	Text in a card, inputs in a form
Fixed	Stay at an exact size no matter what	Icons, avatars, a card set to 320 pixels wide

A good card usually combines all three: the card is fixed at 320 wide, its text layers fill the width so long titles wrap, and the button at the bottom hugs its label. If text refuses to wrap and runs off in a single line, it is almost always set to hug width. Switch it to fill.

Build Small Pieces, Then Nest Them

Auto layout gets powerful when frames sit inside other frames. A real example, a simple product card, breaks down like this:

An image at fixed size.
A text block: a vertical stack holding the title and price, gap 4.
A button: a horizontal stack holding an icon and a label, gap 8, padding 12 by 20.
The card itself: a vertical stack holding the three pieces above, gap 16, padding 16.

Build from the inside out. Make the button first and get it right, then the text block, then wrap everything in the card. Each level has one job, which makes it far easier to fix later. This is the same idea as the visual grouping covered in the principles that make any layout work: related items close together, separate groups further apart, and now the spacing is enforced instead of eyeballed.

Why "Put Auto Layout on Everything" Is Bad Advice

Once people discover auto layout, tutorials often push them to apply it to every single frame. For interface components this is sensible. For other work it gets in the way.

Posters, hero illustrations, social graphics and anything with overlapping elements usually need free placement. Forcing a layered composition into stacks means fighting the tool with absolute positioning tricks and negative gaps until the file is harder to edit than if you had placed things by hand.

A practical rule: if the design would need to adapt to different content or screen sizes, use auto layout. If it is a one off composition where every element has a deliberate spot, place it freely. Many good files mix both.

The escape hatch for single items

When one item, like a notification badge on an icon, must ignore the stack, select it and turn on absolute position in the panel. It stays inside the frame but stops pushing its siblings around.

Mistakes That Make Auto Layout Feel Broken

Most "auto layout is broken" moments come from the same handful of causes:

Dragging an item to reorder it and dropping it outside the frame. Hold the item over the stack until the blue line appears, then release.
Setting a child to fill container while the parent hugs contents. Neither knows how big to be. Make the parent fixed or fill.
Adding spacer rectangles to create gaps. Delete them and use the gap and padding values instead.
Mixing odd values like 13 and 17. Stick to your spacing scale so every component lines up.

Frequently Asked Questions

Is Figma auto layout the same as CSS flexbox?

It is closely modelled on it. Direction, gap, padding, alignment and the hug and fill behaviours all map to flexbox ideas, which is why developers find auto layout designs easy to build in code.

Does auto layout work in the free Figma plan?

Yes. Auto layout is part of the core editor and is available on the free plan, so you can learn it fully before paying for anything.

How long does it take to get comfortable with auto layout?

Most beginners feel at ease after building five to ten components with it. Start with a button, a form field, a card and a navigation bar, and the settings stop feeling strange.

Start With One Button Today

Open a blank file, type a label, press Shift and A, and add padding of 12 by 20. Change the label three times and watch the button follow. Then build the card above. If you are still picking software, read about choosing design tools as a beginner, or browse the tools section.