I have opened design files where moving one headline shifted eleven other things on the page, and files where changing the copy was a five-second job. The gap between them is almost never about talent. It is Auto Layout, and whether the person who built the file used it.
Below is the path from zero to the patterns we use on real interface work: the frame, the direction, the spacing, the resizing rules, and the handful of mistakes that make people give up and go back to dragging rectangles around.
What the frame is doing
Auto Layout turns a frame into a container with instructions. Its children line up in one direction. The space between them is a number instead of something you eyeball. The frame gets padding, like a CSS box. And every child has a resizing behaviour that decides who wins when the content changes size.
Put another way: you stop designing positions and start designing rules. Add a longer label and the frame grows with it. Delete a nav item and the rest close the gap.
If you have written flexbox before, you already know this model. Gap is gap, padding is padding, Fill behaves like flex: 1, Hug behaves like width: fit-content. Handoff stops being a translation exercise, which is the reason to learn it properly rather than approximately.
The five-minute version
Select the pieces you want grouped, press Shift + A, and Figma wraps them for you. It also guesses the direction, and it guesses wrong often enough that you should check the panel before touching anything else.
Then work in this order: direction, gap, padding, resizing. Resizing last is the usual mistake. Do it early and the file behaves predictably while you fiddle with spacing.
Name it on the same pass. Button/Primary instead of Frame 4271. A month from now the file has ninety frames and you are hunting for one.
Horizontal, vertical, and the cases where both
Horizontal for anything that reads as a row: buttons, nav bars, toolbars, tag lists, card headers. Vertical for anything that reads as a list: form fields, card bodies, sidebar sections, whole page sections.
Choose by reading order, not by whatever looks right at this moment. When you genuinely need both, you nest a horizontal frame inside a vertical one. Trying to make a single frame do two jobs is where files start fighting back.
Horizontal frames also wrap. For a tag cloud or a responsive card grid, wrap is exactly what you want. For a toolbar where you planned to scroll horizontally, wrap is a bug that shows up two weeks later in a 900px window.
Gap and padding are not the same thing
They sit next to each other in the panel and they do completely different work. Gap is the distance between children. Padding is the space inside the frame, between the frame edge and its contents. A button with 14px padding and no gap is not badly configured – it just has one child, so there is nothing to space out.
The other half of this is the alignment grid. Nine dots decide how children sit across the axis, and space-between is the one that solves a “title on the left, icon on the right” header without two extra frames.
Keep the numbers boring. Four, eight, twelve, sixteen, twenty-four, thirty-two. A file padded with 13, 17 and 21 reads as slightly wrong to everyone, and nobody can tell you why.
Fixed, Hug, Fill, and the bug each one causes
Fixed keeps the size you set – icons, avatars, anything with a hard constraint. Hug wraps the content – buttons, chips, badges. Fill takes whatever is left in the parent – an input next to a button, or a text column beside an avatar.
Three failures turn up in almost every file we are asked to clean up. A label left on Fixed inside a button, so the text clips and the button looks broken. A Hug row inside a Fixed card, so one long string pushes past the edge instead of wrapping. Three cards in a row set to Hug, so whichever has the longest title becomes the widest and the row looks hand-placed. All three are one click from being right.
Nesting without losing track of it
Nearly every component is three layers deep: an outer container with padding and a background, a row or column that holds the arrangement, and the atoms inside it. A list item is a good test – outer frame with 16px padding, a horizontal row with 12px gap and centred alignment, then a 24px icon, a text column set to Fill, and a chevron.
Change the text and nothing breaks. Add a second line and the row grows evenly. That is the entire promise of the feature, and it only holds when the resizing modes agree at every level.
One habit that saves time: build the component with the longest realistic content, not the shortest. If a name is “Ana”, test with “Aleksandra”. Empty space is easy to design around; overflow is not.
Where absolute position is the right answer
A notification dot on an avatar. A badge overlapping a card corner. A close button pinned over a scrim. Absolute position inside an Auto Layout frame is not cheating – it is a tool for ornaments. What it should never be is structure, because an absolutely positioned child has stopped listening to the layout entirely.
Not everything wants constraints
Illustration, collage, poster layouts, anything where overlap is the point: leave those free. Page-level structure usually belongs on a layout grid rather than a stack of rows, with Auto Layout doing the work inside each card. Grid for the page, Auto Layout for the components, and the two stop competing.
Questions we get from juniors
Why did my frame shrink when I added Auto Layout?
Figma converts groups to Hug by default. If it was a fixed button, set the width back to Fixed – or Fill, if it lives inside another Auto Layout parent.
Is this the same as flexbox?
Close enough to share one mental model, with a few edge cases: no order property, and simpler wrapping than CSS. Designers who know Auto Layout can read flexbox documentation without help.
How do I remove it without wrecking the file?
Right-click, Remove Auto Layout, or the minus icon in the panel. The children stay where they are visually; they just stop following rules.
Does any of this work in FigJam?
No. It is a design-file feature. FigJam is for thinking, not for building interface structure.
More free design resources
If you are building components, these will save you an afternoon: