Explore auto layout properties
This article is available for both the previous Figma UI and the new Figma UI. Use the toggle at the bottom left of the page to select your current UI. Get to know UI3: Figma’s redesign →
Before you start
Who can use this feature
Available on all plans
Users with can edit
access to a file can add Auto layout to frames and objects
Already familiar with auto layout properties? Learn how use 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 break down how different aspects of auto layout works.
Frames with auto layout have different properties to regular frames. When you apply auto layout, you'll see some changes in the right panel.
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, unless the object has ignore auto layout enabled
- 🚫 Use smart selection on any objects within the frame
Layout flow
Direction
Direction describes the way the auto layout frame will flow.
- Vertical: Add, remove, and reorder objects along the y-axis. For example: objects within a list, or posts within a newsfeed or timeline.
- Horizontal: Add, remove, and reorder objects along the x-axis. For example: a row of buttons, or icons in a mobile navigation menu.
- Wrap: Arrange objects in multiple rows and columns in a frame. Objects will flow horizontally and wrap to the next line. For example: photo galleries or a set of tags.
Canvas stacking order
When multiple layers have negative spacing creating a stack, the last object (either the right-most or bottom-most object) in the stack will be on top by default.
You can change the visual order of the stack as seen on the canvas.
With the auto layout frame selected, click from the right panel to open auto layout settings. Next to canvas stacking, select:
- First on top: the first layer in the stack will be on top
- Last on top: the last layer in the stack will be on top
Note: Note that when the stacking order changes, the order of layers in the layers panel stays the same. Canvas stacking is solely a visual change that happens on the canvas.
Ignore auto layout
Note: Ignore auto layout was formerly known as absolute position. The feature has a new name, but it still works the same.
An object with Ignore auto layout enabled is excluded from an auto layout flow while keeping it in the auto layout frame. The object and its surrounding siblings ignore each other, even as they resize and move.
Much like absolute position in CSS, an object that ignores auto layout can be placed precisely where you want relative to its parent container.
Objects with ignore auto layout enabled are treated as objects in a regular frame. This means you can apply constraints to determine how they respond when its parent auto layout frame resizes. Other auto layout settings, such as resizing and layout options, aren’t available to these objects.
You can have an object ignore the auto layout flow by doing one of the following:
- Select a child of an auto layout frame, and click in the right panel
- Drag an object into an auto layout frame while pressing ⌃ Control .
Spacing
Gap between items
Use gap between items to set the distance, or distribution, between objects in an auto layout frame.
Gap between items has two different settings:
-
Auto: Set the gap between objects to be the largest distance possible. Type
Auto
in the field or select it from the dropdown menu. - A specified gap: Specify how far apart you want objects to be. Enter a value into the field, nudge the values using your arrow keys, or scrub the field using your cursor.
To quickly toggle between these two settings, click the alignment box and press X.
If the auto layout frame's direction is set to vertical or horizontal, you'll be able to set gap between items vertically or horizontally, respectively. If you have the frame's direction set to wrap, then you'll be able to set both horizontal and vertical gap between items.
Tip! Hold ⇧ Shift while dragging handles to increase and decrease using your big nudge values.
Padding
Padding controls the empty or white space between the boundary of an auto layout frame and the frame’s child objects. You can set padding uniformly, vertically and horizontally, or have different values for top, right, bottom, and left padding.
Adjust the padding using canvas controls or spacing fields in the right panel.
To access canvas controls, select an auto layout frame and hover over it. Pink handles will appear, similar to those in smart selection.
- Click handles to open input fields and enter a numeric value
- Or, click and drag the handle to change the spacing
Tip: Check out our keyboard shortcut guide ↓ for shortcuts on setting padding on opposite sides, all sides, and more!
Padding controls in the right panel are separated into vertical (top and bottom) and horizontal (left and right) padding by default.
- To set individual padding, click to use top, right, bottom, and left padding fields.
- To set uniform padding or to use CSS shorthand, hold ⌘ Command or Control and click into any padding field. You can also type CSS shorthand. For example, entering
1,2,3,4
sets the top, right, bottom, and left to 1, 2, 3, and 4 respectively. Entering1,2
sets the values to top/bottom: 1 and left/right: 2.
Tip! Press the tab key to move between input fields.
Strokes in layout
By default, strokes aren’t accounted for when calculating the size of objects, and thus don’t affect their parent frame or surrounding siblings.
This may not be ideal during developer handoff, as it doesn’t accurately represent how CSS renders borders.
Choose whether strokes will take up space in an auto layout frame by going to the auto layout settings, and using the dropdown next to stroke to select included in layout or excluded from layout.
Alignment
Set alignment on child objects
Choose how to align child objects within an auto layout frame. Both the direction of the auto layout frame and the distribution, or gap between items, 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 alignment box in the right panel to select from nine layout options for the children in a frame.
- Select the box and use arrow keys to switch between the different alignment settings.
- Select the box and press W/A/S/D to set alignment to the edge of the frame.
If gap between items is set to Auto, you have three options for each direction:
- Vertical auto layout: Left, Center, Right
- Horizontal auto layout: Top, Center, Bottom
If gap between items is set to a specific number, you have the same nine options for each direction:
- Top left
- Top center
- Top right
- Left
- Center
- 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.
Text baseline alignment
A baseline is the invisible line in which text or a layer sits. In typography, descenders will extend beneath this line.
In some cases, aligning the baselines of layers can create more balance—such as when aligning baselines of text layers with varying font sizes, or when aligning an icon with a text layer.
To align layers by their baselines, select the layers you want to align, and click from the right panel to open auto layout settings. Next to text baseline alignment, click to enable baseline alignment.
Tip! Click the alignment box in the right panel, and press B to toggle text baseline alignment on and off.
Resizing
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 in the right panel.
When you hover over a resizing option from the dropdown, lines appear on the canvas to indicate how the bounding box of the design will resize and change.
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.
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.
Minimum and maximum dimensions
You can set minimum or maximum width and height to any auto layout frame and its children.
- Open the Width dropdown to find Add min width and Add max width
- Open the Height dropdown to find Add min height and Add max height
Select an option from the Width or Height dropdown menu. From the new field that appears, enter a value or use the dropdown to apply a number variable.
If an object contains a min or max setting, its respective width or height icon will gain two lines, one on each side. You can hover over these icons to preview the dimension limits on canvas.
When you deselect and reselect an object, its min and max dimension fields will be hidden from the right panel. To access them again, click on the width or height icon.
To remove a min or max setting, open the Width or Height dropdown and choose Remove min and max.
Note: Layers cannot have both a max height and a set number of max lines. Adding a max height will set max lines to Auto. Setting max lines to a number will remove the layer’s max height setting. Learn more about max lines →
Hug content
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.
Tip! Double-click the vertical or horizontal edge of an auto layout object's bounding box to set it to Hug contents.
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.
Fill container
Objects in an auto layout frame set to Fill container stretch to the width and/or height of their parent frame.
Child objects of an auto layout frame will also be set to Fill container if they are manually resized to the full width of the parent frame.
Tip! Hold ⌥ Option or Alt and double-click the vertical or horizontal edge of an auto layout object's bounding box to set it to Fill container.
A note on constraints
You can't apply constraints to child objects in an auto layout frame, unless the object ignores the auto layout flow. Instead, you can use the resizing property to define how objects respond as the frame, or the objects in the frame, resize.
You can still apply constraints to the auto layout frame itself if it's nested within a regular frame. The Constraints section and resizing options will appear, allowing 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 set of tags 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.
Learn more about constraints →
Keyboard shortcut guide
Basic shortcuts
Action |
Mac |
Windows |
---|---|---|
Add auto layout |
⇧ Shift A |
⇧ Shift A |
Suggest auto layout |
Ctrl ⇧ Shift A |
Ctrl Alt ⇧ Shift A |
Remove auto layout |
⌥ Option ⇧ Shift A |
Alt ⇧ Shift A |
Edit padding on all sides (from right panel) |
⌘ Command + Click padding input field |
Ctrl + Click padding input field |
From the alignment box
Click the alignment box in the right panel and press the following keys to:
Action |
Mac and Windows |
---|---|
Set alignment |
↓ / → / ← / ↑ |
Set alignment to edge |
W / A / S / D |
Toggle baseline alignment |
B |
Toggle gap between |
X |
From the canvas
Use these keyboard shortcuts while dragging on-canvas handles to:
Action |
Mac |
Windows |
---|---|---|
Set padding on opposite sides |
⌥ Option |
Alt |
Set padding on all sides |
⌥ Option⇧ Shift |
Alt⇧ Shift |
Set padding or spacing with big nudge |
⇧ Shift |
⇧ Shift |
Use these keyboard shortcuts and click specific areas in an auto layout frame to:
Action |
Mac |
Windows |
---|---|---|
Input padding value on opposite sides |
⌥ Option + Click padding area |
Alt + Click padding area |
Input padding value on all sides |
⌥ Option⇧ Shift + Click padding area |
Alt⇧ Shift + Click padding area |
Set hug contents |
Double-click vertical or horizontal edge |
Double-click vertical or horizontal edge |
Set fill container |
⌥ Option + Double-click vertical or horizontal edge |
Alt + Double-click vertical or horizontal edge |
Before you start
Who can use this feature
Available on all plans
Users with can edit
access to a file can add Auto layout to frames and objects.
Already familiar with auto layout properties? Learn how use 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 break down how different aspects of auto layout works.
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, unless the object has absolute position enabled
- 🚫 Use Smart selection on any objects within the frame
Layout flow
Direction
Direction describes the way the auto layout frame will flow.
- Vertical: Add, remove, and reorder objects along the y-axis. For example: objects within a list, or posts within a newsfeed or timeline.
- Horizontal: Add, remove, and reorder objects along the x-axis. For example: a row of buttons, or icons in a mobile navigation menu.
- Wrap: Arrange objects in multiple rows and columns in a frame. Objects will flow horizontally and wrap to the next line. For example: photo galleries or a set of tags.
Canvas stacking order
When multiple layers have negative spacing creating a stack, the last object (either the right-most or bottom-most object) in the stack will be on top by default.
You can change the visual order of the stack as seen on the canvas.
With the auto layout frame selected, click from the right sidebar to open advanced auto layout settings. Next to canvas stacking, select:
- First on top: the first layer in the stack will be on top
- Last on top: the last layer in the stack will be on top
Note: Note that when the stacking order changes, the order of layers in the layers panel stays the same. Canvas stacking is solely a visual change that happens on the canvas.
Ignore auto layout
Note: Ignore auto layout was formerly known as absolute position. The feature has a new name, but it still works the same.
An object with Ignore auto layout enabled is excluded from an auto layout flow while keeping it in the auto layout frame. The object and its surrounding siblings ignore each other, even as they resize and move.
Much like absolute position in CSS, an object that ignores auto layout can be placed precisely where you want relative to its parent container.
Objects with ignore auto layout enabled are treated as objects in a regular frame. This means you can apply constraints to determine how they respond when its parent auto layout frame resizes. Other auto layout properties and settings aren’t available to object that ignore auto layout.
You can have an object ignore the auto layout flow by doing one of the following:
- Select a child of an auto layout frame, and click in the right sidebar.
- Drag an object into an auto layout frame while pressing ⌃ Control .
Spacing
Gap between items
Use gap between items to set the distance, or distribution, between objects in an auto layout frame.
Gap between items has two different settings:
-
Auto: Set the gap between objects to be the largest distance possible. Type
Auto
in the field or select it from the dropdown menu. - A specified gap: Specify how far apart you want objects to be. Enter a value into the field, nudge the values using your arrow keys, or scrub the field using your cursor.
To quickly toggle between these two settings, click the alignment box and press X.
If the auto layout frame's direction is set to vertical or horizontal, you'll be able to set gap between items vertically or horizontally, respectively. If you have the frame's direction set to wrap, then you'll be able to set both horizontal and vertical gap between items.
Tip! Hold ⇧ Shift while dragging handles to increase and decrease using your big nudge values.
Padding
Padding controls the empty or white space between the boundary of an auto layout frame and the frame’s child objects. You can set padding uniformly, vertically and horizontally, or have different values for top, right, bottom, and left padding.
Adjust the padding using canvas controls or spacing fields in the right sidebar.
To access canvas controls, select an auto layout frame and hover over it. Pink handles will appear, similar to those in smart selection.
- Click handles to open input fields and enter a numeric value
- Or, click and drag the handle to change the spacing
Tip: Check out our keyboard shortcut guide ↓ for shortcuts on setting padding on opposite sides, all sides, and more!
Padding controls in the right sidebar are separated into vertical (top and bottom) and horizontal (left and right) padding by default.
- To set individual padding, click to use top, right, bottom, and left padding fields.
- To set uniform padding or to use CSS shorthand, hold ⌘ Command or Control and click into any padding field. You can also type CSS shorthand. For example, entering
1,2,3,4
sets the top, right, bottom, and left to 1, 2, 3, and 4 respectively. Entering1,2
sets the values to top/bottom: 1 and left/right: 2.
Tip! Press the tab key to move between input fields.
Strokes in layout
By default, strokes aren’t accounted for when calculating the size of objects, and thus don’t affect their parent frame or surrounding siblings.
This may not be ideal during developer handoff, as it doesn’t accurately represent how CSS renders borders.
Choose whether strokes will take up space in an auto layout frame by going to the advanced auto layout settings, and using the dropdown next to stroke to select included in layout or excluded from layout.
Alignment
Set alignment on child objects
Choose how to align child objects within an auto layout frame. Both the direction of the auto layout frame and the distribution, or gap between items, 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 alignment box in the right sidebar to select from nine layout options for the children in a frame.
- Select the box and use arrow keys to switch between the different alignment settings.
- Select the box and press W/A/S/D to set alignment to the edge of the frame.
If gap between items is set to Auto, you have three options for each direction:
- Vertical auto layout: Left, Center, Right
- Horizontal auto layout: Top, Center, Bottom
If gap between items is set to a specific number, you have the same nine options for each direction:
- Top left
- Top center
- Top right
- Left
- Center
- 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.
Text baseline alignment
A baseline is the invisible line in which text or a layer sits. In typography, descenders will extend beneath this line.
In some cases, aligning the baselines of layers can create more balance—such as when aligning baselines of text layers with varying font sizes, or when aligning an icon with a text layer.
To align layers by their baselines, select the layers you want to align, and click from the right sidebar to open advanced auto layout settings. Next to text baseline alignment, click to enable baseline alignment.
Tip! Click the alignment box in the right sidebar, and press B to toggle text baseline alignment on and off.
Resizing
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 in the right sidebar.
When you hover over a resizing option from the dropdown, lines appear on the canvas to indicate how the bounding box of the design will resize and change.
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.
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.
Minimum and maximum dimensions
You can set minimum or maximum width and height to any auto layout frame and its children.
- Open the Width dropdown to find Add min width and Add max width
- Open the Height dropdown to find Add min height and Add max height
Select an option from the Width or Height dropdown menu. From the new field that appears, enter a value or use the dropdown to apply a number variable.
If an object contains a min or max setting, its respective width or height icon will gain two lines, one on each side. You can hover over these icons to preview the dimension limits on canvas.
When you deselect and reselect an object, its min and max dimension fields will be hidden from the right sidebar. To access them again, click on the width or height icon.
To remove a min or max setting, open the Width or Height dropdown and choose Remove min and max.
Note: Layers cannot have both a max height and a set number of max lines. Adding a max height will set max lines to Auto. Setting max lines to a number will remove the layer’s max height setting. Learn more about max lines →
Hug content
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.
Tip! Double-click the vertical or horizontal edge of an auto layout object's bounding box to set it to Hug contents.
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.
Fill container
Objects in an auto layout frame set to Fill container stretch to the width and/or height of their parent frame.
Child objects of an auto layout frame will also be set to Fill container if they are manually resized to the full width of the parent frame.
Tip! Hold ⌥ Option or Alt and double-click the vertical or horizontal edge of an auto layout object's bounding box to set it to Fill container.
A note on constraints
You can't apply constraints to child objects in an auto layout frame, unless the object ignores the auto layout flow. Instead, you can use the resizing property to define how objects respond as the frame, or the objects in the frame, resize.
You can still apply constraints to the auto layout frame itself if it's nested within a regular frame. The Constraints section and resizing options will appear, allowing 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 set of tags 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.
Learn more about constraints →
Keyboard shortcut guide
Basic shortcuts
Action |
Mac |
Windows |
---|---|---|
Add auto layout |
⇧ Shift A |
⇧ Shift A |
Suggest auto layout |
Ctrl ⇧ Shift A |
Ctrl Alt ⇧ Shift A |
Remove auto layout |
⌥ Option ⇧ Shift A |
Alt ⇧ Shift A |
Edit padding on all sides (from right sidebar) |
⌘ Command + Click padding input field |
Ctrl + Click padding input field |
From the alignment box
Click the alignment box in the right sidebar and press the following keys to:
Action |
Mac and Windows |
---|---|
Set alignment |
↓ / → / ← / ↑ |
Set alignment to edge |
W / A / S / D |
Toggle baseline alignment |
B |
Toggle gap between |
X |
From the canvas
Use these keyboard shortcuts while dragging on-canvas handles to:
Action |
Mac |
Windows |
---|---|---|
Set padding on opposite sides |
⌥ Option |
Alt |
Set padding on all sides |
⌥ Option⇧ Shift |
Alt⇧ Shift |
Set padding or spacing with big nudge |
⇧ Shift |
⇧ Shift |
Use these keyboard shortcuts and click specific areas in an auto layout frame to:
Action |
Mac |
Windows |
---|---|---|
Input padding value on opposite sides |
⌥ Option + Click padding area |
Alt + Click padding area |
Input padding value on all sides |
⌥ Option⇧ Shift + Click padding area |
Alt⇧ Shift + Click padding area |
Set hug contents |
Double-click vertical or horizontal edge |
Double-click vertical or horizontal edge |
Set fill container |
⌥ Option + Double-click vertical or horizontal edge |
Alt + Double-click vertical or horizontal edge |