How to Use Auto Layout in Figma: Simple Guide

In Figma, use Auto Layout by selecting a frame or group and clicking the Auto Layout button in the right sidebar. This lets you arrange items vertically or horizontally with consistent spacing and alignment that adjusts automatically when you add or resize elements.

Syntax

Auto Layout in Figma is applied to frames or groups to control how child elements are arranged. You can set the direction, spacing, padding, and alignment.

• Direction: Choose Horizontal or Vertical layout.
• Spacing: Set space between child elements.
• Padding: Add space inside the frame edges around children.
• Alignment: Align children to start, center, end, or stretch.

text

Auto Layout Syntax in Figma:

1. Select a frame or group.
2. Click 'Auto Layout' button in the right sidebar.
3. Set Direction: Horizontal or Vertical.
4. Adjust Spacing between items.
5. Set Padding around items.
6. Choose Alignment for child elements.

Example

This example shows how to create a vertical list of buttons with equal spacing and padding using Auto Layout.

text

1. Create a frame.
2. Add three rectangle shapes inside the frame (these represent buttons).
3. Select the frame.
4. Click 'Auto Layout' in the right sidebar.
5. Set Direction to 'Vertical'.
6. Set Spacing between items to 12 px.
7. Set Padding to 16 px on all sides.
8. Align items to center.

Result: The buttons stack vertically with 12 px space between them and 16 px padding around the frame edges. Adding or resizing buttons adjusts the layout automatically.

Output

Visual output: A vertical stack of three buttons spaced evenly with padding around them inside the frame.

Common Pitfalls

Common mistakes when using Auto Layout include:

• Forgetting to select the frame or group before applying Auto Layout.
• Mixing fixed sizes with Auto Layout without understanding how resizing works.
• Not setting padding or spacing, causing elements to stick together.
• Using nested Auto Layouts without clear direction, which can confuse alignment.

Always check the right sidebar settings after applying Auto Layout to ensure the layout behaves as expected.

text

Wrong way:
- Select individual elements and try to apply Auto Layout (won't work).

Right way:
- Group or frame elements first, then apply Auto Layout to that container.

Quick Reference

Property	Description	Typical Values
Direction	Layout direction of children	Horizontal, Vertical
Spacing	Space between child elements	0 px to any value
Padding	Space inside frame edges	0 px to any value
Alignment	Child alignment inside frame	Start, Center, End, Stretch
Resizing	How children resize	Fixed, Fill Container

Key Takeaways

Apply Auto Layout to frames or groups, not individual elements.

Choose horizontal or vertical direction to control child arrangement.

Use spacing and padding to create clean, consistent gaps.

Align children to control their position inside the container.

Auto Layout adjusts automatically when you add, remove, or resize items.