Auto Layout is a powerful Figma feature that lets you create designs that automatically adjust as their content changes. Instead of manually resizing every element, you set the rules, and Figma handles the rest. Think of it like a smart container for your design elements.

This makes your components flexible and responsive, saving you countless hours of tedious adjustments. It’s the key to building complex interfaces that are easy to maintain.

Getting started is simple. You can apply Auto Layout to a group of selected layers or directly to a single frame or component. The quickest way is to select your elements and use the keyboard shortcut.

Once applied, Figma will wrap your selection in a new frame with Auto Layout properties enabled. You'll see these new controls appear in the right-hand design panel. This new frame now controls the arrangement of the items inside it.

With an Auto Layout frame selected, the design panel gives you full control over how its children are arranged. Here are the core properties you'll use.

Mastering these four properties is the key to building almost any responsive component you can imagine.

Let's build a simple button to see Auto Layout in action. Start with just a text layer, for example, "Submit".

1. Select the text layer and press Shift + A. It's now an Auto Layout frame.
2. In the design panel, add some horizontal and vertical padding. For example, 16px on the sides and 8px on the top and bottom. You'll see the frame expand around the text.
3. Give the frame a fill color to make it look like a button.

That's it. Now, try changing the text from "Submit" to "Create New Account." The button will automatically resize to fit the new text perfectly, keeping the padding consistent.

Cards are another common UI element that benefits greatly from Auto Layout. A typical card might include a title, a short description, and a button. You can build this by nesting Auto Layout frames.

1. First, select the title and description text layers and apply Auto Layout (Shift + A). Set their direction to vertical and adjust the spacing between them.
2. Next, group this new text frame with your button component. Select both and press Shift + A again. Keep the direction vertical and set the spacing you want between the text block and the button.
3. Now you have a fully responsive content block. If the description text gets longer, the button will be pushed down automatically, and the card's height will adjust.

By combining and nesting these simple containers, you can build entire interfaces that reflow intelligently as content or screen sizes change.

With these basics, you're ready to start building more dynamic and maintainable designs.