Auto Layout is Just Tetris with Anxiety

We need to talk about your fear of Shift + A.

I know why you avoid Auto Layout. It feels like coding. It feels rigid. You press the shortcut, and suddenly your beautiful, free-floating design collapses into a weird vertical stack, and your icon flies off to the left. It feels like the tool is fighting you.

But designing without Auto Layout is like playing Jenga with greased fingers. Every time you move one block, the whole tower threatens to fall.

Auto Layout isn't code. It’s just teaching your rectangles how to hug each other so you don't have to babysit them.

Here is the rulebook for winning the game.

1. The Suitcase

Imagine you are packing for a trip.

Without Auto Layout: You are just throwing clothes into a pile on the floor. If you want to add a pair of shoes to the bottom of the pile, you have to manually pick up every single shirt and move it up by exactly 12 inches. It is exhausting.

With Auto Layout: You are packing a suitcase. If you add a pair of socks, the pants next to them automatically scoot over to make room. If you take out a jacket, the gap closes instantly.

Stop treating your design like a pile of laundry. Put it in a suitcase. The moment you realize that a Frame is just a container that respects physics, your life gets easier.

2. The Direction Decision

Auto Layout only knows two directions: Down and Right.

When you press Shift + A, Figma asks: "Are we making a sandwich (Vertical) or a train (Horizontal)?"

• Vertical: A list, a form, a card with a title and image.

• Horizontal: A row of buttons, a navigation bar, a tag list.

If your layout looks weird, you probably tried to put a train car inside a sandwich. You just need to switch the arrow.

3. Hug vs. Fill

This is the part that breaks everyone’s brain. "Fixed," "Hug," and "Fill."

Forget the technical terms. Think of it as States of Matter.

• Fill Container (Water): Water expands to fill whatever glass you pour it into. If you make the button wider, the text inside expands to fill the space. Use this when you want things to be fluid.

• Hug Contents (Ice): Ice keeps its own shape. It wraps tightly around its molecules. If you set a button to "Hug," the frame shrinks until it is wrapping the text as tightly as possible.

If your layout looks broken, it’s usually because you are trying to pour Water into a container made of Nothing.

4. The Turducken

This is the advanced move. Sometimes you need a sandwich inside a train.

Let’s say you have a Card. The Card is Vertical (Image on top of Text). But inside that card, you have a "Like" button and a "Share" button sitting next to each other.

You can't just throw them in. You have to wrap the two buttons in their own Horizontal frame, and then put that frame inside the Vertical card.

It’s frame-ception. It’s boxes all the way down. Once you get comfortable putting boxes inside boxes, you become a wizard.

5. The Client Change Defence

Here is the only reason you actually need to learn this.

You spend three hours perfectly spacing a headline that says "Hello." It looks perfect. The pixel distance is divine.

Then the client emails you: "Can we change the headline to 'Welcome to the Future of Enterprise Fintech Solutions for Millennials'?"

Without Auto Layout: You have to manually move the subhead down. Then move the body copy down. Then move the button down. Then resize the background card. You spend 20 minutes doing manual labor.

With Auto Layout: You paste the text. The card expands. The button moves down automatically. You are done in 3 seconds.

Auto Layout feels restrictive at first because it stops you from being sloppy. You can't just nudge things by eye anymore. You have to follow the rules.

But once you set up the rules, the design builds itself. Stop playing Tetris on Hard Mode. Let the computer move the blocks.