Why Figma Auto Layout Feels Confusing (and Why It Doesn’t Have To)

If you have ever tried to use auto layout in Figma and ended up with elements flying in random directions, you are not alone. Auto layout is one of the most powerful features in Figma, but it can feel overwhelming when you first start using it.

The good news? Once you understand the core logic behind it, auto layout becomes second nature. In this Figma auto layout tutorial, we will break down exactly how it works, walk through real examples like buttons, cards, and navigation bars, and show you when (and when not) to use it.

By the end of this guide, you will be building responsive, production-ready components with confidence.

What Is Auto Layout in Figma?

Auto layout is a property you can add to frames in Figma. It tells the frame how to arrange, space, and resize its child elements automatically. Think of it like CSS Flexbox but inside a visual design tool.

When you apply auto layout to a frame, you gain control over:

• Direction – whether children stack horizontally, vertically, or wrap
• Spacing – the gap between each child element
• Padding – the inner space between the frame edge and its children
• Alignment – how children are positioned inside the frame
• Resizing behavior – whether the frame or its children grow, shrink, or stay fixed

The point of auto layout in Figma is simple: it lets your designs respond to content changes automatically. Change a button label from “OK” to “Submit Your Application” and the button resizes itself. No more manual adjustments.

How to Add Auto Layout in Figma

There are several ways to apply auto layout to a frame or selection of objects:

1. Keyboard shortcut: Select a frame or group of layers and press Shift + A
2. Right panel: Select your frame, then click the + icon next to “Auto layout” in the design panel on the right
3. Right-click menu: Right-click on a frame or object and select Add auto layout

If you select multiple objects that are not inside a frame, Figma will automatically wrap them in a new auto layout frame.

Understanding the Auto Layout Panel

Once auto layout is applied, the right panel displays several controls. Let’s break down each one:

Property	What It Does	Common Values
Direction	Sets whether children stack horizontally, vertically, or wrap	Horizontal, Vertical, Wrap
Gap (Spacing)	Controls the space between each child element	8px, 12px, 16px
Padding	Sets the inner spacing between the frame border and its children	16px uniform, or individual per side
Alignment	Positions children within the frame (top-left, center, etc.)	9-point grid selector
Resizing	Determines if the frame hugs its content or fills available space	Hug contents, Fixed, Fill container

The Three Resizing Modes Explained

Resizing is where most people get confused. Here is what each option means:

• Hug contents: The frame shrinks or grows to fit its children exactly. Perfect for buttons that resize based on their text label.
• Fixed: The frame stays at a specific width or height no matter what. Useful when you need a container with a set dimension.
• Fill container: The child expands to fill the available space in its parent auto layout frame. This is how you get elements to stretch across a row or column.

Step-by-Step Example 1: Building a Responsive Button

Let’s start with the most common auto layout use case: a button that resizes with its label.

1. Select the Text tool (T) and type your button label, for example “Get Started”
2. Select the text layer and press Shift + A to add auto layout
3. A frame now wraps your text. Set the padding to 12px top/bottom and 24px left/right
4. Set the fill color of the frame to your brand’s primary color
5. Add a corner radius of 8px
6. Set the frame resizing to Hug contents on both axes

Now try editing the text. Type something longer like “Get Started for Free” and watch the button grow automatically. That is the power of auto layout.

Adding an Icon to the Button

Want to add an icon next to the label? Simply drag an icon into the auto layout frame. Because the direction is set to horizontal, the icon and text will sit side by side. Adjust the gap between them to 8px for clean spacing.

Step-by-Step Example 2: Building a Card Component

Cards are everywhere in modern UI design. Here is how to build one that responds to content changes.

1. Create a rectangle (280px wide, 160px tall) to act as the card image placeholder
2. Below it, add a text layer for the card title (e.g., “Project Name”)
3. Add another text layer for a short description
4. Add a button using the responsive button you built in Example 1
5. Select all four elements and press Shift + A
6. Figma will wrap them in a vertical auto layout frame
7. Set the gap between items to 16px
8. Set padding to 0px on top (the image should go edge to edge) and 16px on left, right, and bottom
9. Add a subtle border or shadow to finish the card look

Making the Card Width Flexible

To make the card stretch to fill different column widths:

• Set the card frame’s horizontal resizing to Fill container
• Set the image placeholder to Fill container horizontally and Fixed vertically
• Set the title and description text layers to Fill container horizontally so they wrap within the card

Now when you place this card inside a larger auto layout frame (like a grid), it will adapt to the available space.

Step-by-Step Example 3: Building a Navigation Bar

Navigation bars are a great use case for auto layout because they need to distribute items horizontally with consistent spacing.

1. Create a logo element (text or icon)
2. Create several text layers for nav links: Home, About, Services, Contact
3. Create a CTA button (use your auto layout button from Example 1)
4. Select the nav link text layers and press Shift + A to group them in a horizontal auto layout frame with a gap of 32px
5. Now select the logo, the nav links frame, and the CTA button
6. Press Shift + A again to wrap everything in a parent horizontal auto layout frame
7. Set the parent frame’s width to Fixed (e.g., 1440px or your desired viewport width)
8. Set padding to 16px top/bottom and 48px left/right

Pushing the CTA Button to the Right

To create space between the nav links and the CTA button so the button sits on the far right:

• Select the nav links frame and set its horizontal resizing to Fill container
• Set the alignment of the nav links frame’s children to left

The nav links frame will now stretch to fill the space between the logo and the button, pushing the CTA to the right side. This is the same principle as using flex-grow in CSS.

When to Use Auto Layout

Auto layout is ideal in the following situations:

• Buttons that need to resize based on text content
• Cards where content length varies (titles, descriptions)
• Lists and menus where items can be added or removed
• Navigation bars with evenly spaced or distributed items
• Form fields with labels, inputs, and error messages stacked vertically
• Responsive layouts where components must adapt to different screen sizes
• Design system components that need to be flexible and reusable
• Any element that will be handed off to developers since auto layout mirrors CSS Flexbox behavior

When NOT to Use Auto Layout

Auto layout is not always the right choice. Avoid it when:

• You need overlapping elements. Auto layout arranges items in a single direction. For overlapping layers, use absolute positioning within the frame or keep elements outside of auto layout.
• You are doing freeform illustration or artistic work. Auto layout enforces structure, which is the opposite of what you want in creative exploration.
• Complex grid layouts with irregular placement. While wrap mode helps, truly asymmetric layouts may be easier to manage without auto layout.
• Quick throwaway mockups. If you are sketching ideas that will not become reusable components, adding auto layout may slow you down.

Auto Layout Tips and Best Practices

Use Consistent Spacing Values

Stick to a spacing scale like multiples of 4 or 8. Many design systems use an 8-point grid, meaning spacing and sizing values are multiples of 8 (8px, 16px, 24px, 32px). This keeps your designs clean and consistent.

Nest Auto Layout Frames

The real power of auto layout shows up when you nest frames. A card is a vertical auto layout frame. Inside it, a row of tags can be a horizontal auto layout frame. Inside the tag, text with padding is another auto layout frame. Think in layers.

Use the “Suggest Auto Layout” Feature

Figma can analyze your design and suggest auto layout configurations. This is helpful if you have already laid out elements manually and want to convert them. Right-click and look for the suggest auto layout option.

Name Your Frames

As you nest auto layout frames, your layers panel can become messy fast. Name every frame clearly: “Card/Header”, “Nav/Links”, “Button/Primary”. Your future self (and your team) will thank you.

Use the Auto Layout Playground

Figma offers an official auto layout playground file in the community. Duplicate it and experiment with different configurations. It is one of the best ways to learn by doing.

Common Auto Layout Mistakes to Avoid

1. Setting everything to Fixed. This defeats the purpose of auto layout. Use Hug and Fill container to let your designs breathe and adapt.
2. Forgetting to set text to Fill container. If your text stays at a fixed width inside a flexible frame, it will not reflow when the parent resizes.
3. Ignoring padding. Padding gives your components room to breathe. A button with 0 padding looks broken even if the spacing between elements is correct.
4. Not nesting enough. Trying to control a complex layout with a single auto layout frame leads to frustration. Break it down into smaller nested frames.
5. Mixing auto layout with absolute positioned children unnecessarily. While Figma supports absolute positioning inside auto layout frames, overusing it can create unpredictable behavior.

Auto Layout Keyboard Shortcuts Quick Reference

Action	Mac	Windows
Add auto layout	Shift + A	Shift + A
Remove auto layout	Option + Shift + A	Alt + Shift + A
Increase spacing by 1	Select gap, press Up arrow	Select gap, press Up arrow
Increase spacing by 10	Shift + Up arrow	Shift + Up arrow

Frequently Asked Questions

How do I do auto layout in Figma?

Select any frame, group, or multiple objects and press Shift + A. Figma will wrap them in an auto layout frame. You can then adjust the direction, spacing, padding, and alignment in the right panel.

What is the point of auto layout in Figma?

Auto layout makes your designs responsive and flexible. Components resize automatically when content changes, spacing stays consistent, and your designs behave more like real code. It saves significant time when building and maintaining design systems.

What is the 8-point rule in Figma?

The 8-point rule (or 8-point grid) is a spacing convention where all spacing, padding, and sizing values use multiples of 8 (8px, 16px, 24px, 32px, etc.). This creates visual consistency and aligns well with most screen resolutions. It pairs perfectly with auto layout spacing and padding values.

When should I NOT use auto layout in Figma?

Avoid auto layout when you need overlapping elements, when doing freeform creative work, or when building quick disposable mockups where structure is not important. For complex layered compositions, absolute positioning or standard frames may be more appropriate.

Can I use auto layout for responsive design in Figma?

Yes. By combining auto layout with Fill container resizing, constraints, and wrap mode, you can create components that adapt to different screen sizes. This is especially powerful when paired with Figma’s variables and breakpoint strategies.

How is auto layout different from CSS Flexbox?

Auto layout is heavily inspired by CSS Flexbox and behaves very similarly. Direction maps to flex-direction, gap maps to the CSS gap property, Fill container works like flex-grow, and Hug contents is similar to fit-content. This means designs built with auto layout translate cleanly to code.

Wrapping Up

Figma’s auto layout feature is not optional if you want to build scalable, professional designs. It may feel confusing at first, but once you understand the relationship between direction, spacing, padding, and resizing, everything clicks into place.

Start with a simple button. Then build a card. Then a navigation bar. Layer by layer, your confidence will grow, and before long you will wonder how you ever designed without it.

If you need help building a design system or responsive UI components for your product, reach out to our team. We work with Figma every day and love helping teams design better, faster.