Before you start
Who can use this feature
Users on any team or plan.
Users with can edit access to a file can add Auto layout to frames and objects.
About auto layout
Auto layout is a property you can add to frames and components. It lets you create designs that grow to fill or shrink to fit, and reflow as their contents change. This is great when you need to add new layers, accommodate longer text strings, or maintain alignment as your designs evolve.
There are lots of ways to use auto layout:
- Create buttons that grow or shrink as you edit the text label.
- Build lists that adapt as items are added, removed, or hidden.
- Combine auto layout frames to build complete interfaces.
Auto layout is a powerful feature with many moving parts and uses. In this article we'll show you how to add auto layout to a frame, and how each of its properties work.
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 the next to Auto layout with a frame selected.
- Right-click on the 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 ↓
Auto layout properties
Frames with auto layout have different properties to regular frames. When you apply auto layout, you'll see some changes in the right sidebar.
You can't do the following to auto layout frames:
- 🚫 Add Layout grids to that frame
- 🚫 Apply Constraints to any objects within an auto layout frame
- 🚫 Use Smart selection on any objects within the frame
Direction describes the way the auto layout frame will flow.
- Choose vertical to add, remove, and reorder objects along the y axis. For example: objects within a list, or posts within a newsfeed or timeline.
- Choose horizontal to add, remove, and reorder objects along the x axis. For example: a row of buttons, or icons in a mobile navigation menu.
Figma currently supports only one direction at a time, horizontal or vertical. To build designs that use both directions, you will need to combine or nest auto layout frames.
In the example below, we've nested a horizontal auto layout frame within a vertical auto layout frame to create a card with a title, description, and showtimes.
Spacing between items
You can control the spacing between items in an auto layout frame.
Unlike smart selection, there isn't a way to adjust the spacing on the canvas. Instead, use the spacing fields in the Auto layout section of the right sidebar:
- Horizontal space between
- Vertical space between
Enter a number in the field, nudge the values using your arrow keys, or scrub the field using your cursor.
Padding controls the empty or white space between the child objects and boundary of an auto layout frame. You can set padding uniformly, or have different values for top, right, bottom, and left padding.
- Enter a single value in the field to set equal padding on all sides, or use CSS shorthand to set individual values. For example, entering
1,2,3,4sets the values to top: 1, right: 2, bottom: 3, and left: 4 respectively. Or entering
1,2sets the values to top/bottom: 1 and left/right: 2.
- To manually set unique padding for each side, click to open the alignment and distribution settings and adjust each value individually.
Note: Negative padding values are not supported.
Tip! Press the
tab key to navigate between the top, right, bottom, and left input fields.
Choose how to align child objects within an auto layout frame. Both the direction of the auto layout frame and the distribution will determine what alignment options you have available.
Unlike objects in a regular frame, you can't control the alignment of the objects individually. For that reason, you set the alignment of the child objects on the parent auto layout frame.
Use the interactive grid to select from nine layout options for the children in a frame.
If your distribution is set to Space between, you have three options for each direction:
- vertical Auto layout: Left, Center, Right
- horizontal Auto layout: Top, Center, Bottom
If your distribution is set to Packed, you have the same nine options for each direction:
- Top left
- Top center
- Top right
- Bottom left
- Bottom center
- Bottom right
Note: When one or more resizing properties are set to hug contents, some selections won't result in visually different layouts on the canvas. This is because hug contents removes any extra space around the child objects.
Once you've set alignment rules for child objects in a frame, choose how those objects will be distributed within that frame.
In the alignment panel, click the arrow to select between:
- Packed: Objects in a frame will be grouped together. Use this option to keep objects in a frame as close as possible and aligned together.
- Space between: Objects in a frame have the space between them equally distributed along the direction and alignment set for the frame. Use this option to stretch objects across a frame.
One of the most powerful functions of auto layout is its ability to control the dimensions of the objects in an Auto layout frame.
Set resizing behavior for parent auto layout frames to adapt to any changes made to their children objects. Resizing settings can be applied for objects on both the X and Y axes individually using the dropdown menus and the resizing panel.
Note: Text layers also have their own resizing properties. Within an auto layout frame, this may produce some useful results.
If you want your auto layout frames to be completely fluid, we advise against using fixed size text boxes. Fixed size text layers won't resize to accommodate your text, which may cause overlap between layers in an auto layout frame.Learn more about text resizing →
Fixed width or height
When an auto layout frame is set to Fixed width or height, the values of the frame's dimensions remain the same regardless of the content within them. The size of the frame doesn't respond to changes in the objects within them, like a string of text that changes in length.
Set an auto layout frame to Hug content to resize itself according to its child objects. The frame will keep the smallest possible dimensions to surround the objects within it, while respecting the padding value.
Note: If any child objects within an auto layout frame are set to Fill container, the parent frame will no longer hug contents and become Fixed for the axis.
Objects in an auto layout frame set to Fill container stretch to the width and/or height of their parent frame.
Constraints and resizing
You can't apply constraints to child objects within an auto layout frame. Instead, you can use the resizing property to define how objects respond as the frame, or the objects in the frame, are resized.
You can still apply constraints to an auto layout frame if it's nested within a regular frame. You will see a Constraints and resizing section, which allows you to set both the constraints for the Auto layout frame and the resizing behavior for any objects within it.
For example: if you created a navigation bar using auto layout, you may want it to adjust to different screen sizes. You can use constraints to make sure the navigation bar responds correctly when its parent frame is resized, and resizing to control how the objects within the navigation bar respond to those changes.
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.
⌘ Command Windows:
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.
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.
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.
Use auto layout with components
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 objects
✅ Reorder objects within a component
✅ Add new objects
✅ Adjust vertical and horizontal Padding
✅ Adjust Spacing between objects
🚫 Reorder objects within a component
🚫 Add new objects
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.
Updates to auto layout
Note: The following updates were released November, 2020.
Update alignment for older auto layout frames
In previous versions of auto layout, alignment was controlled at the child object level. This meant you could have different alignments for different child objects in an auto layout frame.
We found the behavior uncommon among users, so in November 2020 we moved alignment controls to the parent frame to simplify how auto layout works. With the latest update, all child objects have to be aligned the same way.
If you already have auto layout frames with children of different alignments that were created before November 2020, you may see the following:
In order to make adjustments to your auto layout values, you first need to update the frame in order to remove the individual child alignment. After updating your frame:
- Figma will try to maintain your original design visually. In many cases, Figma will add intermediate frames to allow for differing alignments. These frames will be named Auto-added frame.
- You can immediately undo this change, however, if you click away from the window or refresh the page, you will not be able to undo the update in the future.
- If you’ve updated a main component, confirm its instances updated correctly.
To create a design with child items with different alignment:
- Select the item you want to align differently.
- Add Auto layout to the item using the keyboard shortcut Shift A.
- Set the newly created frame to Fill container in the axis you want the alignment to be in.
- Set the alignment as needed.