Add auto layout
You can add auto layout to a frame or a selection of objects. This includes:
- New or empty frames
- Frames with existing content
- Components and component sets
- Groups or other selections of layers and/or objects
Note: Auto layout is only supported on frames. If you select objects that are not in a frame, Figma will create an auto layout frame around them.
You can add auto layout to a selected frame, component, or component set from a few places:
- Use the keyboard shortcut Shift A.
- In the right sidebar, click next to Auto layout with a frame selected.
- Right-click on a frame or object and select Add Auto layout.
Tip! You can add auto layout to components. You will need to add auto layout to each component individually. Learn how to use auto layout in components ↓
Add, edit, and remove objects
Add objects to an auto layout frame
You can add any layer or object to an auto layout frame.
- Click and drag an object over an auto layout frame.
- Use the blue indicator to choose where to place the object.
Note: The object's size determines if it can be added to the auto layout frame. If any of the object's dimensions are larger than the parent frame, you won't see the option to add it to the auto layout.
Use the modifier key to bypass Figma's default behavior and add larger objects to an auto layout. Or, to add objects to a nested auto layout:
Nest auto layout frames
You can nest an auto layout frame within another auto layout frame. This allows you to combine horizontal and vertical layouts to create complex interfaces.
When you nest an auto layout frame, the nested frame will have both parent and child properties.
In our example below, there are four levels of auto layout:
- Button: Each button is a horizontal auto layout. This allows the button to grow and shrink as we change the label text.
- Button Row: We then add both buttons to another horizontal auto layout. This allows objects to respond when we make any changes to a sibling's contents.
- Post: We then add our buttons to a vertical auto layout with the other objects in the post. This includes a description, an image and the user's profile.
- Timeline: We've added three to a vertical auto layout to create our timeline. The auto layout frame is the top-level frame which sits on the canvas.
You can nest auto layout frames in a couple of ways:
- Drag an auto layout frame into an existing Auto layout frame
- Create a new auto layout frame around a selection of Auto layout frames (and other objects).
- Select the auto layout frame, and the other layers you'd like to include.
- Use the keyboard shortcut Shift + A to add auto layout.
- Figma will create a frame around your selection, and add auto layout.
Tip! You can bypass Figma's default parenting behavior. Hold down the modifier key to keep an object within the current frame, or prevent Figma from nesting it.
- Mac: ⌘ Command
- Windows: Ctrl
You can duplicate existing objects to add them to the Auto layout. Figma will add the duplicate to the right (horizontal) or below (vertical) the original object.
- Select a child object in an Auto layout frame.
- Duplicate it by using the keyboard shortcut:
- Mac: ⌘ Command - D
- Windows: Ctrl + D
Arrange or reorder objects
Note: You can't reorder objects in an instance. You will need to change the object's order in the main component, or detach the instance to reorder objects. Auto layout in components ↓
You can change the order that objects appear in an auto layout frame. This is only supported on main components, or auto layout frames outside of a component.
- Select the child object. If the layer is nested, you'll need to use the modifier key to deep select:
- Mac: ⌘ Command
- Windows: Ctrl
- There are a few ways to reorder objects:
- Use the arrow keys on your keyboard the object to a new position.
- Click-and-drag the object to a new position.
To remove an object from a main component or auto layout frame:
- Drag the object outside of the auto layout frame.
- Click the to toggle the layer visibility.
- Select the object and press the
You can't delete a layer or object from an instance. If you try, Figma will only toggle the layer's visibility instead of removing it.
Tip! Toggling a layer or object's visibility will hide it from an auto layout frame. If you want to create a gap in where the object should be, you can adjust the opacity of the object instead. In the right sidebar, update the Layer settings to
Remove auto layout
When you remove auto layout, you will have access to a frame's regular properties.
There are a couple of ways to remove auto layout:
- Right-click on the frame and select Remove auto layout
- In the right sidebar, click the next to Auto layout
Note: You can't use the Add auto layout keyboard shortcut to remove the auto layout property. Using this shortcut will create a new auto layout frame around your current selection.
Prototypes with auto layout
There are a few things to be mindful of when creating prototypes with auto layout.
Smart Animate transitions do not take into account the background of a frame. If you want to use a Slide in or Move in transition with smart animate, you will need to add a background. You can create a rectangle within a regular frame and place your auto layout frame within it. Slide in and move in transitions →
To apply scrolling overflow to a frame, you need to have content to extend beyond the frame's bounds.
As an auto layout parent's dimensions are content-driven, it will resize to fit the objects. To replicate scrolling overflow you will need to put the auto layout inside a regular frame.
Note: Presentation view supports scrolling of long frames by default. You will only need to use this workaround when you want to clip content.
Components and instances
As components are frames, you can add auto layout to them. You will need to add auto layout to each component individually.There isn't currently a way to add auto layout in bulk.
|Adjust vertical and horizontal padding||✓||✓|
|Adjust spacing between||✓||✓|
|Add new layers||✓||✕|
|Delete or remove layers||✓||(Hides layer only)|
Want to add icons to instances? We recommend adding a placeholder icon, with 0% opacity, to the main component. You can then swap out the icon for another component in your library.