Auto Layout in Figma helps you create dynamic frames that resize and rearrange their contents automatically as you add or remove items. This makes building responsive UIs and components much easier.
To start using Auto Layout, you first need to add it to your desired layer(s).
Adding Auto Layout
The primary way to add Auto Layout to elements is by selecting the layers you want to group and then using the convenient keyboard shortcut:
- Select one or more layers (e.g., buttons, icons, text blocks).
- Use the keyboard shortcut ⇧ Shift A to add auto layout.
When you use this shortcut, Figma performs two key actions:
- It automatically creates a frame around your selected layers.
- It adds the Auto Layout properties to this new frame.
Alternatively, you can select layer(s) and click the + button next to "Auto layout" in the Design panel on the right sidebar.
Understanding Auto Layout Properties
Once Auto Layout is applied to a frame, you gain access to several powerful properties in the Design panel that control how the items within that frame behave:
- Direction: Determines the flow of items – horizontally (left-to-right or right-to-left) or vertically (top-to-bottom or bottom-to-top).
- Spacing between items: Sets the distance between the children within the Auto Layout frame. You can set a fixed value or use "Auto" spacing.
- Padding: Controls the space between the Auto Layout frame's boundary and its contents. You can set padding individually for top, right, bottom, and left sides, or set all sides uniformly.
- Alignment: Defines how items are aligned within the Auto Layout frame, affecting both their position within their allocated space and how they behave when the frame resizes. Options include top-left, top-center, top-right, middle-left, center, middle-right, bottom-left, bottom-center, and bottom-right.
- Resizing: Child items within an Auto Layout frame can be set to "Hug contents" (frame resizes to fit children), "Fixed width/height" (item maintains its size), or "Fill container" (item expands to fill the available space in the Auto Layout direction). The Auto Layout frame itself can also be set to "Hug contents", "Fixed width/height", or "Fill container" relative to its parent.
Practical Usage
Using Auto Layout simplifies common design tasks:
- Creating Buttons: Combine an icon and text into an Auto Layout frame. Adjust padding and spacing. Now, if you change the text, the button resizes automatically.
- Building Navigation Bars: Arrange menu items horizontally with consistent spacing. As you add or remove items, the bar adjusts.
- Designing Cards or Lists: Stack elements vertically (image, title, description, button). Use Auto Layout to maintain spacing and alignment.
By mastering these basic properties, you can build flexible and maintainable designs that adapt easily to changes.
