Auto layout is one of Figma's most powerful features, transforming how designers create responsive and adaptable interfaces. Before auto layout, designers manually adjusted spacing, alignment, and sizing for every screen size variation—a tedious, error-prone process. 

Auto layout automates this workflow, allowing components to resize intelligently based on content and container dimensions. Mastering this feature is essential for modern UI design, enabling designers to build scalable design systems and prototypes that behave like real products.

What is Auto Layout?

Auto layout is a Figma property that allows frames to automatically resize and reposition their contents based on defined rules. 

Think of it as a CSS flexbox translated into a visual interface. You define spacing, alignment, and direction, then Figma handles the calculations as content changes.

When you apply auto layout to a frame, it becomes a container with layout rules. Add a new element, and the frame expands. Change text length, and buttons adjust automatically. This behavior mirrors how developers build responsive interfaces with code, making design-to-development handoff smoother. 

Basics of Auto Layout

Understanding Frames and Containers

In Figma, frames are the foundation of auto layout. A standard frame has fixed positioning for its children.

An auto layout frame, however, acts as a smart container where children arrange themselves according to layout rules.

The parent container is the auto layout frame itself, which controls spacing, direction, and alignment. Child elements inside adapt their positions based on the parent's settings. 

You can nest auto layout frames, creating hierarchies where each level has its own layout logic. This nesting enables complex, responsive designs that maintain proper spacing and alignment regardless of content changes.

Layout Options

Figma's auto layout provides several core options that define how content arranges itself within frames. 

Flow determines whether children stack horizontally or vertically. Horizontal layouts create rows, ideal for navigation menus or button groups. Vertical layouts create columns, perfect for lists or form fields. 

Spacing/gap controls the gap between child elements. Set a specific pixel value, and Figma maintains that distance consistently, even as you add or remove items. 

Padding adds space between the frame's edge and its contents, creating breathing room around elements.

Alignment options—top left, top center, top right, left, center, right, bottom left, bottom center, and bottom right—control how children distribute within the parent. 

How to Use Auto Layout in Figma

Starting with Auto Layout

Select a frame and add a rectangle and some text inside it.

Without auto layout, if you add another rectangle, it will overlay the text instead of positioning itself next to it. This is the problem auto layout solves.

To apply auto layout to your frame, select it and press Shift + A.

Now when you add another rectangle, the auto layout automatically adjusts to accommodate it, positioning elements in a row or column instead of overlapping them.

Applying Auto Layout Settings

Once auto layout is applied, you can adjust settings in the right panel to refine how it behaves.

Direction: Change between horizontal and vertical layouts by clicking the direction icons.

• Horizontal arranges items in a row

• Vertical stacks items in a column

Spacing: Control the gap between all child elements by entering pixel values in the spacing field. This spacing applies uniformly between all children.

Padding: Adjust padding separately for each side (top, right, bottom, left) by clicking the padding icon and entering values. Independent padding control enables precise layout control—for example, creating a card with more vertical padding than horizontal.

Alignment: Click the alignment icons to control how children are positioned:

• Left/top alignment
• Center alignment
• Right/bottom alignment
• Space between for even distribution

Nesting Auto Layout Frames

Complex designs often require multiple layers of auto layout frames working together. This lets you create sophisticated layouts where different sections have their own spacing and alignment rules.

For example, a navigation bar might be a horizontal auto layout frame containing vertical auto layout frames for dropdown menus. Each level maintains its own behavior while working together.

To nest auto layouts:

1. Create your inner content and apply auto layout (Shift + A)
2. Select that entire auto layout frame
3. Press Shift + A again—this wraps it in a new parent auto layout frame
4. Now you can add other elements to this outer frame alongside your nested auto layout

Let's see this in action: If you have an auto layout frame and want to add a rectangle outside of it while keeping both organized, select your existing auto layout, press Shift + A to create a parent frame, then drag your rectangle into this outer frame.

This hierarchy allows sophisticated responsive behavior. Each level responds independently to content changes while maintaining the overall structure.

Responsive Design with Auto Layout

Creating Responsive Components

Auto layout enables truly responsive components that adapt across screen sizes without creating multiple versions. Set resizing behavior to "Fill container" for elements that should expand, and "Hug contents" for elements that should size based on content.

Combine these behaviors thoughtfully. A button should hug its text but might fill its container horizontally in mobile layouts. 

A card might hug its content vertically but fill available width. By mixing fixed dimensions, hug, and fill behaviors across nested auto layout frames, you create components that respond intelligently to different contexts without breaking.

Handling Different Frame Sizes

When designing for multiple screen sizes, auto layout frames automatically adjust as parent containers resize. 

A grid of cards set to "Fill container" distributes evenly regardless of screen width. Text blocks with auto layout maintain consistent padding as viewport changes.

Use constraints in combination with auto layout for precise control. Pin certain elements to specific edges while allowing others to resize. 

This combination creates layouts that scale gracefully from mobile to desktop, maintaining visual hierarchy and spacing proportions. Test responsiveness by manually resizing frames and watching how nested auto layouts react—adjust settings until behavior matches your design intent.

Tips and Shortcuts for Efficient Workflow

Master keyboard shortcuts to speed up auto layout work. 

1. Shift + A adds auto layout instantly. Option/Alt + drag duplicates auto layout frames while preserving all settings. 
2. Adjust spacing by selecting the frame and using arrow keys while holding Option/Alt to modify padding or spacing in 1-pixel increments.
3. Create component variants with different auto layout settings for different states or sizes. This maintains consistency while allowing flexibility. 
4. Build a library of common auto layout patterns—buttons, cards, lists—that you can reuse across projects. 
5. Name layers clearly in nested auto layouts so you can quickly identify which level you're adjusting. Use auto layout for even simple two-element combinations like icon-plus-text—the upfront effort pays off when content changes frequently.

Common Challenges and Solutions

Challenge: Text truncation when frames are too small. Solution: Set minimum width constraints or use fill container behavior with appropriate parent sizing.

Challenge: Unexpected wrapping or stacking. Solution: Check direction settings and ensure child elements have appropriate resizing behavior—hug vs. fill.

Challenge: Spacing looks wrong when adding new elements. Solution: Verify that all children share the same resizing behavior and that spacing values are applied correctly.

Challenge: Nested auto layouts conflict with each other. Solution: Clearly define which level controls which dimension. Often, parent controls one axis while children control the other.

Challenge: Elements overlap unintentionally. Solution: Check canvas stacking settings and ensure children aren't set to absolute positioning unless intended.

FAQs

What is the purpose of auto layout in Figma? Auto layout allows designers to create responsive and adaptable designs efficiently by automating spacing, alignment, and sizing based on content. It eliminates manual positioning calculations and ensures consistency across design variations.

How do I add auto layout to a frame? Select the frame or group of elements, then press Shift + A or click the "+" icon next to "Auto layout" in the right panel. Figma converts your selection into an auto layout frame with default settings you can customize.

Can I nest auto layout frames? Yes, nesting auto layout frames is essential for complex layouts. Each nested frame can have independent direction, spacing, and alignment settings, allowing sophisticated responsive behavior across multiple hierarchy levels.

What are the benefits of using auto layout? Auto layout streamlines the design process by maintaining consistent spacing, enabling rapid iteration as content changes, creating responsive components that adapt to different screen sizes, and improving design-to-development handoff with behavior that mirrors code.

How does auto layout help in responsive design? Auto layout automatically adjusts dimensions based on content and container size. Frames can hug contents or fill available space, creating components that scale gracefully across device sizes without requiring separate designs for each breakpoint.