Auto Layout is a feature in Figma that lets you create designs that automatically adjust as their content changes. Think of it like a smart container. When you add more text or another element, the container grows or shrinks to fit everything perfectly. This means no more tedious manual resizing.

Instead of pushing pixels around every time you change a button's label, you set the rules once, and Auto Layout handles the rest. This makes your designs flexible, consistent, and much faster to build and edit.

Applying Auto Layout is simple. Just select one or more objects on your canvas—like a text layer and a shape to make a button—and use a keyboard shortcut. This action wraps your selection in a special container called an Auto Layout frame.

You can also add it by clicking the + icon next to 'Auto layout' in the right-hand design panel. Once applied, you'll see a new set of properties in the panel, which allow you to control how your layout behaves.

After creating an Auto Layout frame, you have several key properties to adjust. These are the fundamental rules that govern your design's responsiveness.

Direction determines if the items inside the frame are arranged vertically or horizontally. Think of it as stacking blocks top-to-bottom or lining them up side-by-side.

Spacing is the gap between each item within the frame. If you set the spacing to 8, Figma will automatically place an 8-pixel gap between every adjacent element.

Padding is the empty space around the inside of the Auto Layout frame, like a margin inside a container. You can set uniform padding for all sides or specify different values for top, bottom, left, and right.

Alignment controls where the items sit within the frame, especially if the frame is larger than its contents. You can align them to the top-left, center, bottom-right, or any of the nine alignment points.

Let's see this in action. To create a responsive button, you'd type out the text, like "Submit," and add Auto Layout to it. Then, you can add a fill color to the frame and adjust the padding to create space around the text. Now, if you change the text to "Submit Application," the button resizes automatically. The padding you set is always respected.

The same principle applies to lists. Create a few items for your list, select them all, and apply Auto Layout with a vertical direction. Now you can set the spacing between list items. If you add, remove, or reorder an item, the entire list reflows perfectly without any manual adjustments.

These simple building blocks—responsive buttons and dynamic lists—are the foundation for creating complex, adaptable interfaces.

Mastering these fundamentals is the first step toward building faster and more efficiently in Figma.