Why auto layout changes how you design

Without auto layout, a Figma design is a collection of absolutely positioned objects. Change the text in a button and the label spills over the edge. Add an item to a list and you move every item below it by hand. Auto layout fixes this by letting frames arrange their children automatically, much like CSS flexbox does in the browser.

What auto layout gives you

• Content driven sizing: a button grows when its label gets longer.
• Consistent spacing: items in a list keep the same gap no matter how many you add.
• Easy reordering: drag an item in a list and the others move out of the way.
• Responsive behaviour: cards stretch to fill a column when the screen gets wider.

Designs built this way survive real content. That matters because real content is never the tidy three word title you used in the mockup.

A mental model from the web

If you have seen CSS, the mapping is close:

• Auto layout direction is like flex-direction.
• Gap is like gap.
• Padding is like padding.
• Hug contents is roughly width: fit-content, and fill container is like flex: 1.

You do not need to know CSS to use auto layout, but the similarity is one reason developers find auto layout files easier to build from. What you design behaves like what they will code.

The project for this course

We will build components for a small analytics dashboard: stat cards, table rows, filters, a sidebar and a top bar. By the end, the whole dashboard will be built from auto layout frames and components, and it will switch between light and dark themes using variables.

A quick exercise

Create a text layer that says "Export report". Select it and press Shift + A. Figma wraps it in an auto layout frame. Add a fill, set padding to 12 vertically and 20 horizontally, and give it a corner radius of 8. Now change the text to "Export quarterly report as CSV" and watch the button grow.

That small moment is the core idea of this course: design the rules, not just the pixels, and let Figma apply them for you.