Understanding Auto Layout will help you build with AI

We’re in this AI era now where people just try to prompt and generate, prompt and generate, prompt and generate, and iterate, and refine.

And it can be tough if you don’t know what to change or what to ask for. Sometimes you’re just prompting into the ether and AI says “you’re absolutely right, let me adjust that.” And it still doesn’t come out right.

If you struggle with Auto Layout, you will likely struggle with front-end development. And you will likely struggle with getting AI to build your front-end interfaces.

Auto Layout is literally based on how code works.

So it’s super helpful to understand the mental model of how it all works together.

Everything in Auto Layout comes down to three options. Every layout Claude generates, every dashboard, every responsive screen. It’s all just these three, nested inside each other.

Fixed Width. It won’t change. Hard edges. Your icon is 24 by 24 and that’s what it’s going to be regardless of screen size.

Hug Contents. Shrinks or grows to wrap whatever is inside it. Like a jacket hugging a body. Great for buttons, pills, tags. Anything that should only be as big as what’s inside it. But it can cause problems when things get too wide.

Fill Container. Stretches to fill whatever parent it lives inside. This is the one that trips everyone up. Fill Container only works inside a nested Auto Layout container. If your frame isn’t inside another Auto Layout frame, Fill Container won’t even show up as an option.

And these three map directly to code. A Figma frame is a <div> in HTML. It’s just a container that you can attach some styles to and it holds stuff.

You don’t need to learn all of CSS. But you need to know enough of how it works to have the conversation.

I put together a long video where I build out pieces of a dashboard from scratch using just these three Auto Layout primitives.
​
Really understanding how these work will help you build future interfaces.

​Watch the full video here.