How to Use Auto Layout in Figma (Without Breaking Things)

Introduction: The Magic (and Madness) of Auto Layout

If you’ve ever spent too long nudging buttons into place or fixing spacing after a text edit, Auto Layout is your new best friend. But let’s be honest—Auto Layout can feel like a puzzle box, especially for beginners. Things shift, break, or vanish altogether.

This guide will help you use Auto Layout in Figma like a pro, without the frustration. We’ll walk through how it works, when to use it, and how to avoid common pitfalls.

What Is Auto Layout?

Auto Layout is a layout engine in Figma that dynamically arranges elements inside a frame or component based on rules you set.

Instead of manually adjusting positions, Auto Layout lets Figma handle:

Spacing between items
Padding around content
Resizing behavior
Alignment (horizontal/vertical)
Distribution of space

It’s essential for responsive design, component systems, and clean handoffs to devs.

When Should You Use Auto Layout?

Use Auto Layout when:

You want to build flexible buttons, forms, cards, or navbars
Your designs need to adapt to different screen sizes
You’re building reusable components
You want to avoid spacing hell

How to Add Auto Layout

Select your frame or group of objects
Press Shift + A or click “+” Auto Layout in the right sidebar

Figma instantly wraps the selection in a new Auto Layout frame. You’ll now see alignment and spacing controls on the right.

Key Auto Layout Properties Explained

📏 Spacing Between Items

Controls the gap between child elements.
E.g., 8px between form fields or 16px between nav links.

📦 Padding

Adds space around the inside edges of the frame.
Useful for buttons or cards.

↔️ ↕️ Direction

Choose horizontal (row) or vertical (column) layout.
E.g., navbars use horizontal, stacked inputs use vertical.

🔄 Alignment

Aligns children to the start, center, end, or space between.

🔁 Item Spacing Mode

Fixed spacing (default): Equal space between items.
Space between: Pushes items to edges with flexible spacing in between (great for nav menus).

Example 1: Auto Layout Button

Let’s build a responsive button:

Type “Click Me” with the Text Tool (T)
Add Auto Layout (Shift + A)
Add horizontal padding: 16px left/right, 8px top/bottom
Set alignment to Center
Add a background color and corner radius
Try changing the label to something longer—notice how the button expands!

✅ That’s a true responsive button.

Example 2: Vertical Form Layout

Let’s build a stacked form with labels and inputs:

Create a frame and add input elements: labels, text fields, and buttons.
Apply vertical Auto Layout to the group (Shift + A)
Set spacing between items to 12px
Set padding to 24px inside the frame
Nest Auto Layout frames for label + input combos for finer control

Now your form scales cleanly and keeps consistent spacing.

Nesting Auto Layout Frames

You can place Auto Layout frames inside other Auto Layout frames to build complex layouts. For example:

A card with vertical layout for title, text, and button
A navbar with horizontal layout for links, and right-aligned login button

Pro Tip:
Name your frames clearly and group logically to stay organized—nested layouts can get chaotic fast.

Common Auto Layout Pitfalls (and How to Fix Them)

❌ “Why did my text disappear?”

Check if the text is inside an Auto Layout frame with fixed height and no padding. Try setting it to hug contents.

❌ “Why is my layout breaking when I duplicate?”

Ensure nested elements are frames or components, not just grouped layers.

❌ “I can’t resize this frame the way I want!”

Use resize behavior: “Hug”, “Fill”, or “Fixed” to control width/height independently.

Hug, Fill, and Fixed Explained

Setting	Description	Best Use Case
Hug	Size wraps to content	Text buttons, dynamic containers
Fill	Expands to parent frame	Columns in grid, nav items
Fixed	Stays fixed size	Cards, images, icons

Bonus: Auto Layout with Components

Auto Layout is especially powerful when building reusable components:

Buttons with icons
Pricing cards
Pop-ups
Tab bars

Changes made to a master component flow to all instances—saving hours of manual tweaks.

Tips to Master Auto Layout

Use keyboard shortcuts (Shift + A) and learn to tweak direction/padding fast
Combine Auto Layout with constraints for full responsive behavior
Nest carefully and name things clearly
Start small: buttons and cards before full-page layouts

Conclusion

Auto Layout can feel intimidating, but once you understand the logic behind it, you’ll never go back to manual positioning. With just a few rules, you unlock a world of flexible, reusable, responsive design patterns that scale beautifully across screens and teams.

In the next article, we’ll explore “Figma for Non-Designers: A Quickstart Tutorial”—perfect for product managers, developers, or anyone collaborating on UI without a design background.