Auto Layout

Design tools started out as programs for placing pictures on a coordinate grid. Draw a box and it froze at a width, a height and a position. Whether the text inside grew or shrank, the box stayed exactly the size it was drawn.

So changing a single line of copy always dragged manual cleanup behind it. Rewrite a button label from "Save" to "Save changes" and the text spills past the edge, so you stretch the box, push the Cancel button next to it over by the same amount, and re-fit the height of the card wrapping both. If the same button appeared on ten screens, that was ten rounds of the same work, and one or two of them ended up slightly off.

The cost leaked into conversations too. When Mia asked for one word to be changed, Noa would answer "that's twenty places," and decisions about copy piled up unmade. Fixes got deferred because of how much hand work they cost, not because they were wrong.

Auto layout hands that cleanup to the tool. Instead of pinning elements to coordinates, you place them by order and by rule. Every tool has some version of it now, including browser-based ones like Figma where several people edit the same file at once; only the name for it changes.

You group elements into one frame and set four things on that frame, and the tool recalculates the arrangement from those values every time the content changes.

1. Direction — whether the grouped elements run across in a row or stack downward. Pick a row and they line up from the left; add a new one and it joins the end while everything else shifts over.
2. Gap — how far apart neighbors sit, set once for the whole frame. At 12, three items or nine items all keep 12 between them, and moving it to 16 widens eight gaps at the same time.
3. Padding — the distance between the frame's edge and its contents. Set 8 top and bottom, 16 left and right, and the text can double in length while still keeping 16 on either side. That value is why a button holds the same character no matter how long its label is.
4. Sizing — the frame behaves in one of three ways. Hug grows only as far as its contents, fixed holds the number you typed, and fill stretches to whatever the outer frame offers. A common combination is hug for a button, fixed for a card's width, and fill for the body text inside the card.

Frames can also nest inside frames. Group two buttons into a row, then group a title, body text and that row of buttons into a column, and you have a card. When the body text goes from two lines to four, the column re-measures its own height and the list holding that card shifts down with it. The only value a person touches is still a single gap.

The rules map almost one to one onto the way layout works on the web, so a frame built as a row with a gap of 12 carries over as the same idea in the implementation. That takes work out of design handoff, the step where design is passed to engineering, since spacing values no longer have to be written out one by one.

It appears almost anywhere the same shape repeats with different content inside it.

The smallest unit is a button or a tag, where identical padding keeps the shape intact whether the label is two characters or eight. One level up are lists and cards. To mock up a notification list with three items and then with eleven, a designer without auto layout draws two screens; a designer with it copies the item and pastes.

Switching languages is where the difference shows most. A screen translated from Korean into English usually gains 50 to 100 percent more characters, and if the frames grow with the text you keep the file, while if they don't you redraw twenty screens. The same goes for dragging a frame from 375 wide to 1280 to see whether responsive design, a layout built to change with the screen size, actually holds up.

For anything reusable it is close to a prerequisite. A UI component — a part built once and dropped into many screens — has to carry auto layout on the master for its instances, the copies made from that master, to hold their shape while each one holds different text. Without it, every copy gets its width nudged by hand, and a design system that collects colors and spacing into one agreed set still ends up with files that drift apart.

"This card has no auto layout on it, so everything breaks as soon as the text gets longer."

The mockup was drawn on coordinates, so any content change means fixing it by hand.

"Let the button hug its contents and just lock the horizontal padding at 16."

Don't fix the button's width — let it grow with the label, and hold only the padding steady.

"If it's built with auto layout, engineering can take the values straight across."

The spacing and alignment rules in the mockup translate almost directly into code.

At Pagedeck, every copy change reveals which screens have it. When Mia asks to change a checkout button from "Pay now" to "Pay by card," Noa opens the file and edits the text. The button growing, the neighboring button sliding over, and the height of the area around both being re-measured are all handled by the tool, so an hour of work finishes in five minutes.

Older screens that were drawn on coordinates stand out by contrast. The screen Theo asks about — "is this gap 12 or 14?" — is usually one of those.

The common misreading is that auto layout makes a design responsive by itself. Widen a frame and the elements inside find their own places, so the assumption is reasonable. But the feature only recalculates according to the rules it was given. Elements grouped into a row stay in a row as the width shrinks, so at 375 the items that ought to stack vertically hold their single line and squeeze. A narrow-screen arrangement has to be built separately, and missing that means a mockup checked only at desktop width ships as-is and clips text on mobile.

The other misjudgment is deciding to add it later because today is busy. Drawing on coordinates genuinely is faster in the moment. But adding it afterward costs more than starting with it, because the scattered elements have to be untangled one grouping at a time. Setting it up on the first screen beats going back after twenty.