Nested Auto Layout in Figma - Step-by-Step Guide

Introduction

Nested Auto Layout lets you combine multiple Auto Layout frames inside each other. This helps you build complex, flexible designs that adjust automatically when you change content or size. It solves the problem of making neat, responsive dashboards or reports without manual resizing.

When you want a dashboard panel with a header, body, and footer that resize independently

When you need a list of cards where each card has a title and buttons aligned differently

When your report has sections with different layouts but should stay aligned overall

When you want to create a responsive navigation bar with grouped items

When you want to stack charts vertically but have controls arranged horizontally inside each chart

Steps

Step 1: Select the first frame or group you want to arrange

- Layers panel or canvas

The frame is highlighted and ready for layout

💡 Use Shift+Click to select multiple frames if needed

Step 2: Click the Auto Layout button

- Right sidebar under the 'Auto Layout' section

The selected frame becomes an Auto Layout frame with default vertical stacking

💡 You can also press Shift+A as a shortcut

Step 3: Select or create another frame inside the first Auto Layout frame

- Canvas or Layers panel

The inner frame is ready to be nested

💡 Drag frames inside each other in the Layers panel to nest

Step 4: Apply Auto Layout to the inner frame

- Right sidebar under 'Auto Layout'

The inner frame also becomes an Auto Layout frame nested inside the outer one

💡 Adjust direction and spacing for each nested frame separately

Step 5: Adjust spacing, padding, and alignment for each Auto Layout frame

- Right sidebar under 'Auto Layout' settings

The nested frames arrange content neatly and respond to size changes

💡 Use 'Space Between' to distribute items evenly

Step 6: Resize or edit content inside nested frames

- Canvas

The layout adjusts automatically without manual repositioning

💡 Test resizing text or images to see the responsiveness

Before vs After

Before

A group of frames stacked manually with overlapping or uneven spacing

After

Frames arranged in nested Auto Layouts that resize and space evenly when content changes

Settings Reference

Direction

📍 Right sidebar > Auto Layout section

Controls whether items stack top-to-bottom or left-to-right

Default: Vertical

Spacing between items

📍 Right sidebar > Auto Layout section

Sets the gap between items inside the Auto Layout frame

Default: 10 px

Padding around items

📍 Right sidebar > Auto Layout section

Adds space inside the frame edges around the content

Default: 0 px

Alignment

📍 Right sidebar > Auto Layout section

Controls how items align inside the frame

Default: Start

Common Mistakes

Applying Auto Layout only to the outer frame and not nesting inner frames

Inner content does not adjust independently, causing layout issues

Apply Auto Layout to each frame that needs independent control inside the outer frame

Forgetting to set padding or spacing, causing items to stick together

Layout looks cramped and hard to read

Set appropriate padding and spacing values for clarity and neatness

Nesting too many Auto Layout frames unnecessarily

Can make the design complex and harder to manage

Use nesting only when needed for different layout directions or spacing

Summary

Nested Auto Layout lets you build flexible, responsive designs by stacking Auto Layout frames inside each other.

Each nested frame can have its own direction, spacing, and alignment settings.

Remember to apply Auto Layout to all frames that need independent layout control and set padding for clear spacing.