Summarize this article with:
Manually resizing buttons every time the text changes gets old fast.
Learning how to use auto layout in Figma eliminates that repetitive work and makes your designs respond to content automatically.
Auto layout is a frame property that controls spacing, padding, alignment, and direction for child objects. When content changes, the frame adjusts. No manual tweaking required.
This guide walks through each step: adding auto layout, setting direction, configuring padding and gap, controlling alignment, managing resizing behavior, and nesting frames for complex layouts.
By the end, you’ll build responsive components that adapt to any content you throw at them.
How to Use Auto Layout in Figma
Auto layout in Figma is a frame property that automatically arranges child objects based on direction, spacing, padding, and alignment settings.
Designers use this feature when building responsive buttons, cards, navigation bars, and full interfaces that adjust to content changes.
This guide covers 7 steps requiring 15 to 30 minutes and basic frame knowledge.
What You Need Before Starting
- Figma Design (browser or desktop app, 2024 version or later)
- A file with can edit access
- Basic understanding of frames and layers
- 15 to 30 minutes
- Objects to organize: text, shapes, icons, or images
If you’re new to Figma, learning how to make a frame in Figma first will help.
Auto layout builds on frame concepts, so that foundation matters.
Have you seen the latest Figma statistics?
Discover comprehensive Figma statistics including revenue growth, market share, user demographics, and funding data.
Check them out →Step One: How Do You Add Auto Layout to a Frame?
Select any frame or multiple objects on the canvas, then press Shift + A to apply auto layout instantly.
The right sidebar will display new layout properties including direction, padding, and gap controls.
A blue border appears around the frame, confirming auto layout is active.
Action
- Keyboard shortcut: Select objects → Press Shift + A
- Right sidebar: Auto Layout section appears with direction, padding, gap, and alignment options
- Canvas indicator: Blue border and directional arrows show the layout flow
Alternative Method
Right-click any frame and select “Add auto layout” from the context menu.
You can also click the + icon next to Auto Layout in the right sidebar’s Layout section.
Purpose
Adding auto layout transforms static frames into dynamic containers.
Child objects automatically stack, space themselves, and respond when you add or remove content.
This eliminates manual repositioning every time something changes.
Step Two: How Do You Set the Auto Layout Flow Direction?
Click the direction icon in the right sidebar to switch between horizontal, vertical, or wrap flows.
Horizontal stacking arranges objects left to right. Vertical stacking arranges them top to bottom.
The wrap option lets items flow to a new line when they exceed the frame width.
Action
- Location: Auto Layout section → Direction icons (horizontal arrow, vertical arrow, or wrap icon)
- Switching: Click any direction icon to change the flow instantly
- Visual indicator: Arrow overlay on the frame shows current direction
Direction Options
- Horizontal: Objects line up side by side, frame grows wider with more content
- Vertical: Objects stack top to bottom, frame grows taller
- Wrap: Objects flow horizontally until they hit the frame edge, then wrap to next row
Grid auto layout (currently in beta) adds rows and columns for dashboard layouts and galleries.
Purpose
Direction determines how your components grow and respond.
A horizontal button expands sideways when text gets longer. A vertical card list grows downward when you add items.
Choosing the right direction from the start saves redesign time later.
Step Three: How Do You Adjust Padding in Auto Layout?
Padding creates space between the frame edge and its child objects.
Enter values in the padding fields in the right sidebar, or hold Command (Mac) / Ctrl (Windows) and click to access individual side controls.
All four sides can have different values or match uniformly.
Action
- Uniform padding: Enter a single number in the padding field to apply it to all sides
- Individual sides: Click the padding icon to expand top, right, bottom, left controls
- Visual result: Content shifts inward, creating breathing room from the frame edges
Padding Controls
The compact view shows one value when all sides match.
Mixed padding displays “Mixed” until you expand the controls.
You can type values directly or drag the number fields to adjust visually.
Purpose
Padding gives your designs proper white space without extra layers.
Buttons need internal spacing so text doesn’t touch edges. Cards need margins so content has room to breathe.
Consistent padding values across your design system keep everything looking polished.
Step Four: How Do You Control Gap Between Items?
The gap setting controls spacing between child objects inside the auto layout frame.
Enter a pixel value in the gap field or drag horizontally to adjust visually.
Action
- Location: Auto Layout section → Gap between items field (shows a number between two lines icon)
- Input: Type a value or drag the field left/right to increase or decrease
- Result: All child objects shift to maintain equal spacing between each other
Gap vs Padding
Padding creates space between content and the frame edge. Gap creates space between sibling objects.
A button with 16px padding and 8px gap would have internal margins plus spacing between its icon and text.
Purpose
Consistent gap values maintain visual hierarchy across your designs.
Design systems typically use 4px, 8px, 12px, or 16px increments for predictable spacing.
Step Five: How Do You Set Alignment in Auto Layout?
The alignment grid in the right sidebar controls how child objects position themselves within the frame.
Nine alignment options cover every combination: top-left, top-center, top-right, and so on.
Action
- Location: Auto Layout section → 9-dot alignment grid
- Selection: Click any dot to set alignment position
- Result: Child objects shift to the selected corner, edge, or center
Alignment Options
- Top-left, top-center, top-right: Objects anchor to the top edge
- Center-left, center, center-right: Objects center vertically
- Bottom-left, bottom-center, bottom-right: Objects anchor to the bottom
Purpose
Alignment determines where objects sit when the frame has extra space.
Center alignment works for buttons and modals. Top-left suits content lists and navigation menus.
Step Six: How Do You Configure Resizing Behavior?
Resizing properties control how frames and objects respond to content changes.
Three options exist: hug contents, fill container, and fixed dimensions.
Action
- Location: Right sidebar → Width and Height dropdown menus
- Options: Hug contents, Fill container, or Fixed (with pixel value)
- Result: Frame or object resizes according to the selected behavior
Resizing Options Explained
- Hug contents: Frame shrinks to fit its children exactly, grows when content expands
- Fill container: Object stretches to fill available space in its parent frame
- Fixed: Dimension stays constant regardless of content or parent changes
You can mix these settings, using hug for width and fixed for height on the same frame.
Purpose
Proper resizing behavior makes responsive design automatic.
Buttons that hug their text grow naturally. Cards that fill their container adapt to any screen width.
Step Seven: How Do You Nest Auto Layout Frames?
Nested auto layout combines multiple frames with different directions to create complex responsive structures.
Place an auto layout frame inside another auto layout frame, each with its own settings.
Action
- Create inner frame: Select objects → Shift + A to add auto layout
- Create outer frame: Select the inner frame plus other objects → Shift + A again
- Set different directions: Inner frame horizontal, outer frame vertical (or vice versa)
Common Nesting Patterns
- Card layout: Vertical outer frame containing horizontal button row
- Nav bar: Horizontal frame with nested vertical dropdown menus
- Form: Vertical stack of horizontal label-input pairs
When building full page layouts, you’ll often have 3-4 levels of nested frames.
Purpose
Nesting creates multi-dimensional layouts that respond in multiple directions.
A single-direction frame can only grow one way. Nested frames handle width and height changes simultaneously.
Verification
Test your auto layout by resizing the parent frame and watching child objects reflow.
Edit text content inside a button to verify the frame adjusts width automatically.
Drag child layers to reorder them and confirm they snap into new positions.
Signs Auto Layout Works Correctly
- Blue border appears around the frame
- Direction arrows show on hover
- Objects snap when dragged near siblings
- Frame resizes when content changes (if using hug contents)
Troubleshooting
Objects Overlap Instead of Stacking
Problem: Child objects pile on top of each other.
Solution: Confirm auto layout is applied to the parent frame, not just selected objects. Press Shift + A on the frame itself.
Child Objects Don’t Resize with Parent
Problem: Resizing the frame leaves child objects unchanged.
Solution: Change horizontal or vertical resizing from Fixed to Fill container in the right sidebar.
Unwanted Spacing Appears
Problem: Random gaps between objects.
Solution: Set gap between items to 0. Check padding values for unintended spacing.
Auto Layout Ignores Specific Object
Problem: One object stays put while others reflow.
Solution: Check if “Ignore auto layout” (formerly absolute position) is enabled on that object. Toggle it off in the right sidebar.
Frame Won’t Accept New Objects
Problem: Dragging objects into the frame places them outside.
Solution: Hold Command (Mac) or Ctrl (Windows) while dragging to force placement inside the auto layout frame.
Related Processes
Once you’ve mastered auto layout, explore these connected Figma workflows:
- How to make components in Figma for creating reusable design elements
- How to create variants in Figma for building component states
- How to make a grid in Figma for layout structure
- How to prototype in Figma for interactive designs
- How to create a design system in Figma for scalable component libraries
Auto layout pairs especially well with button components and table layouts where content changes frequently.
FAQ on How To Use Auto Layout In Figma
What is auto layout in Figma?
Auto layout is a frame property that automatically arranges child objects based on direction, spacing, padding, and alignment settings.
It makes frames responsive to content changes without manual repositioning.
What is the shortcut for auto layout in Figma?
Press Shift + A to add auto layout to any selected frame or objects.
This keyboard shortcut works on both Mac and Windows versions of Figma Design.
What is the difference between hug contents and fill container?
Hug contents shrinks the frame to fit its children exactly. Fill container stretches the object to match its parent frame’s available space.
Use hug for buttons, fill for adaptable layouts.
Can you nest auto layout frames inside each other?
Yes. Nested auto layout frames create multi-dimensional responsive structures.
Set different directions for parent and child frames to handle both horizontal and vertical content changes simultaneously.
How do you remove auto layout from a frame?
Select the frame and click the minus icon next to Auto Layout in the right sidebar.
Right-click and choose “Remove auto layout” for the same result.
What is the difference between gap and padding in auto layout?
Padding creates space between the frame edge and its content. Gap controls spacing between sibling objects inside the frame.
Both values work together for complete spacing control.
Why are my objects overlapping instead of stacking?
Auto layout probably isn’t applied to the parent frame.
Select the frame itself (not just the objects) and press Shift + A to add auto layout properly.
How do you change auto layout direction?
Click the direction icons in the Auto Layout section of the right sidebar.
Options include horizontal, vertical, and wrap flows. Grid direction is available in beta.
Can auto layout work with components?
Yes. Auto layout works on both main components and instances.
Instances inherit the parent’s auto layout settings but allow padding, gap, and alignment overrides without breaking the component link.
What does “Ignore auto layout” do?
Ignore auto layout (formerly absolute position) excludes an object from the auto layout flow.
The object stays in place while siblings reflow around it. Useful for badges or overlay elements.
Conclusion
Knowing how to use auto layout in Figma changes your entire design workflow.
Frames that resize themselves. Components that adapt to content. No more manual adjustments every time someone edits a label.
Start with the basics: direction, padding, gap, and alignment. Once those click, move to nested frames and resizing behaviors.
The real power shows up when you combine auto layout with reusable components and design system tokens.
Your buttons stay consistent. Your cards scale properly. Your navigation bars handle any menu length.
Practice on simple elements first. Build a button, then a card, then a full layout.
Each project gets faster once auto layout becomes second nature.
