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.

Practice

1. What is the main benefit of using Nested Auto Layout in Figma?

easy

A. It allows combining multiple automatic layouts inside each other for flexible designs.

B. It disables resizing of frames to keep fixed sizes.

C. It automatically exports designs to code.

D. It locks layers to prevent editing.

Solution

1. Step 1: Understand Nested Auto Layout purpose

   Nested Auto Layout lets you put auto layout frames inside other auto layout frames.

2. Step 2: Identify the benefit

   This nesting creates flexible, organized designs that adjust to content and screen size.

3. Final Answer:

   It allows combining multiple automatic layouts inside each other for flexible designs. -> Option A

4. Quick Check:

   Nested Auto Layout = Flexible combined layouts [OK]

Hint: Remember: Nested means putting layouts inside layouts [OK]

Common Mistakes:

• Thinking it locks frame sizes
• Confusing with export features
• Assuming it prevents editing

2. Which of the following is the correct way to create a vertical nested auto layout inside a horizontal auto layout in Figma?

easy

A. Use only one Auto Layout frame with mixed directions.

B. Create a frame with vertical Auto Layout, then add a child frame with horizontal Auto Layout inside it.

C. Create two separate frames without Auto Layout and group them.

D. Create a frame with horizontal Auto Layout, then add a child frame with vertical Auto Layout inside it.

Solution

1. Step 1: Identify parent layout direction

   The parent frame should have horizontal Auto Layout to arrange children side by side.

2. Step 2: Add child frame with vertical Auto Layout

   Inside the horizontal frame, add a child frame set to vertical Auto Layout to stack items vertically.

3. Final Answer:

   Create a frame with horizontal Auto Layout, then add a child frame with vertical Auto Layout inside it. -> Option D

4. Quick Check:

   Parent horizontal + child vertical = Create a frame with horizontal Auto Layout, then add a child frame with vertical Auto Layout inside it. [OK]

Hint: Parent layout sets main direction; child can differ [OK]

Common Mistakes:

• Mixing up parent and child layout directions
• Grouping frames without Auto Layout
• Trying to mix directions in one frame

3. Given a horizontal auto layout frame containing two child frames: the first child is a vertical auto layout with 3 text layers, the second child is a fixed-size rectangle. What happens if you add a fourth text layer to the first child frame?

medium

A. The new text layer overlaps the second child frame.

B. The second child frame resizes to fit the new text layer.

C. The first child frame grows vertically, pushing the second child frame to the right.

D. The entire parent frame resizes vertically automatically.

Solution

1. Step 1: Understand vertical child frame behavior

   Adding a text layer to the vertical auto layout child increases its height.

2. Step 2: Understand horizontal parent frame behavior

   The parent frame arranges children horizontally. When the first child's height increases, the first child frame grows vertically, pushing the second child frame to the right horizontally.

3. Final Answer:

   The first child frame grows vertically, pushing the second child frame to the right. -> Option C

4. Quick Check:

   Horizontal parent layout shifts children horizontally when width changes [OK]

Hint: Vertical child growth affects horizontal layout in parent [OK]

Common Mistakes:

• Assuming fixed-size child resizes
• Confusing vertical growth with vertical resizing of parent
• Expecting overlap instead of shift

4. You created a nested auto layout but the inner frame does not resize when you add content. What is the most likely cause?

medium

A. The inner frame's Auto Layout is set to fixed size instead of hug contents.

B. The outer frame is set to vertical direction.

C. The inner frame has no children.

D. The outer frame has padding set to zero.

Solution

1. Step 1: Check inner frame resizing settings

   If the inner frame is fixed size, it won't grow with content.

2. Step 2: Understand Auto Layout resizing modes

   To resize with content, the frame must use 'hug contents' or 'fill container' resizing.

3. Final Answer:

   The inner frame's Auto Layout is set to fixed size instead of hug contents. -> Option A

4. Quick Check:

   Fixed size inner frame blocks resizing [OK]

Hint: Check inner frame resizing mode first [OK]

Common Mistakes:

• Blaming outer frame direction
• Ignoring inner frame children
• Assuming padding affects resizing

5. You want to design a dashboard panel in Figma with a horizontal auto layout containing two vertical auto layout sections: one for filters and one for results. The filters section should have fixed width but flexible height, and the results section should fill remaining horizontal space and adjust height to content. How should you set the resizing properties of these nested frames?

hard

A. Set filters frame width hug contents, height fixed; set results frame width fixed, height fill container.

B. Set filters frame width fixed, height hug contents; set results frame width fill container, height hug contents.

C. Set both frames width fixed and height fixed.

D. Set filters frame width fill container, height fixed; set results frame width hug contents, height fixed.

Solution

1. Step 1: Configure filters section resizing

   Filters need fixed width to stay constant and height that grows with content, so width fixed and height hug contents.

2. Step 2: Configure results section resizing

   Results should fill remaining horizontal space and adjust height, so width fill container and height hug contents.

3. Final Answer:

   Set filters frame width fixed, height hug contents; set results frame width fill container, height hug contents. -> Option B

4. Quick Check:

   Fixed width filters + fill width results = Set filters frame width fixed, height hug contents; set results frame width fill container, height hug contents. [OK]

Hint: Fixed width for filters, fill container for results [OK]

Common Mistakes:

• Setting filters width to hug contents
• Fixing height instead of hugging contents
• Making results width fixed