How to Nest Auto Layout in Figma: Step-by-Step Guide

To nest Auto Layout in Figma, place one auto layout frame inside another by selecting a frame with auto layout enabled and dragging it into another auto layout frame. This lets you combine multiple layout directions and control spacing and alignment at different levels.

Syntax

In Figma, Auto Layout is applied to frames. Nesting means placing one auto layout frame inside another. The outer frame controls the overall layout direction and spacing, while the inner frame manages its own layout independently.

Key parts:

• Outer Auto Layout Frame: The parent container with auto layout enabled.
• Inner Auto Layout Frame: A child frame inside the parent, also with auto layout enabled.
• Direction: Can be vertical or horizontal for each frame.
• Spacing: Controls space between items inside each frame.

figma

<!-- No code language for Figma UI, but showing structure -->
Outer Auto Layout Frame (Direction: Vertical)
  ├─ Inner Auto Layout Frame (Direction: Horizontal)
  │    ├─ Item 1
  │    └─ Item 2
  └─ Item 3

Example

This example shows how to create a vertical auto layout frame that contains a horizontal auto layout frame and a single item below it. This nesting allows different layout directions combined.

figma

<!-- Steps to create nested auto layout in Figma -->
1. Create a frame and enable Auto Layout (vertical direction).
2. Inside this frame, create another frame and enable Auto Layout (horizontal direction).
3. Add two items inside the inner horizontal frame.
4. Add a third item directly inside the outer vertical frame, below the inner frame.

Result:
- The inner frame arranges its two items horizontally.
- The outer frame stacks the inner frame and the third item vertically.

Output

You will see a vertical stack with a horizontal row of two items on top and a single item below.

Common Pitfalls

Common mistakes when nesting auto layout frames in Figma include:

• Forgetting to enable auto layout on the inner frame, so it doesn't layout its children properly.
• Mixing conflicting directions without clear spacing, causing overlapping or unexpected spacing.
• Not adjusting padding or spacing on nested frames, leading to cramped or uneven layouts.
• Trying to nest too many layers without clear hierarchy, which can make editing difficult.

Always check each frame’s auto layout settings and preview the result to avoid these issues.

figma

/* Wrong way: Inner frame without auto layout */
Outer Frame (Auto Layout: Vertical)
  ├─ Inner Frame (No Auto Layout)
  │    ├─ Item 1
  │    └─ Item 2
  └─ Item 3

/* Right way: Inner frame with auto layout enabled */
Outer Frame (Auto Layout: Vertical)
  ├─ Inner Frame (Auto Layout: Horizontal)
  │    ├─ Item 1
  │    └─ Item 2
  └─ Item 3

Quick Reference

Action	Description	Tip
Enable Auto Layout	Select frame and click 'Auto Layout' in right panel	Choose direction (vertical/horizontal)
Nest Frames	Drag one auto layout frame inside another	Maintain clear hierarchy
Set Spacing	Adjust spacing between items in each frame	Use consistent values for neatness
Adjust Padding	Set padding inside frames for breathing room	Avoid cramped layouts
Preview Layout	Use Figma preview to check nested layouts	Fix spacing or direction issues early

Key Takeaways

Nesting auto layout frames means placing one auto layout frame inside another to combine layout directions.

Always enable auto layout on both outer and inner frames to control spacing and alignment properly.

Use vertical and horizontal directions strategically to create flexible, responsive designs.

Adjust spacing and padding on each frame to avoid cramped or uneven layouts.

Preview your nested layouts often to catch and fix common mistakes early.