0
0
Figmabi_tool~5 mins

Adding Auto Layout to frames in Figma - Step-by-Step Guide

Choose your learning style9 modes available
Introduction
Auto Layout helps you arrange items inside a frame automatically. It saves time by keeping spacing and alignment consistent when you add or remove items.
When you want buttons in a row to stay evenly spaced even if you add more buttons
When you need a list of items to grow or shrink without manually moving each item
When you want to create a responsive card that adjusts its size based on content
When you want to keep text and icons aligned inside a button or menu
When you want to quickly change spacing between elements without moving them one by one
Steps
Step 1: Select
- the frame or group of layers you want to arrange
The frame or layers are highlighted and ready for editing
Step 2: Click
- the Auto Layout button in the right sidebar under the 'Auto layout' section
The selected frame changes to an Auto Layout frame with default vertical or horizontal direction
Step 3: Adjust
- the direction option in the Auto Layout panel (horizontal or vertical)
The items inside the frame rearrange in the chosen direction
Step 4: Set
- the spacing between items field in the Auto Layout panel
The space between each item inside the frame changes accordingly
Step 5: Modify
- padding values in the Auto Layout panel
The space around the edges inside the frame updates to the new padding
Step 6: Add or remove
- items inside the Auto Layout frame
The frame automatically adjusts size and spacing without manual repositioning
Before vs After
Before
A frame with 3 buttons placed manually with uneven spacing and alignment
After
The same frame with Auto Layout applied, buttons evenly spaced and aligned automatically, resizing smoothly when buttons are added or removed
Settings Reference
Direction
📍 Auto Layout panel in the right sidebar
Controls whether items are arranged side by side or stacked
Default: Horizontal
Spacing between items
📍 Auto Layout panel
Sets the gap between each item inside the frame
Default: 10 px
Padding
📍 Auto Layout panel
Controls the space inside the frame edges around the items
Default: 0 px
Alignment
📍 Auto Layout panel
Determines how items align inside the frame along the cross axis
Default: Start
Common Mistakes
Applying Auto Layout to a frame that already has nested Auto Layout frames without checking direction
This can cause unexpected stacking or spacing because nested directions may conflict
Check and set consistent directions for nested Auto Layout frames to avoid layout issues
Forgetting to adjust padding after enabling Auto Layout
The frame may look cramped or have too much empty space around items
Always set padding values to control space inside the frame edges for a balanced look
Summary
Auto Layout arranges items inside frames automatically for consistent spacing and alignment.
You can control direction, spacing, padding, and alignment in the Auto Layout panel.
Remember to check nested frames and adjust padding for best results.