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.

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 show you how how each of its properties work.

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

Direction

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

Adjust the spacing between items using canvas controls or spacing fields in the right sidebar.

Canvas controls

To use canvas controls, select and hover over the auto layout frame. Pink handles will appear, similar to those in smart selection.

• Click the handle to open an input field and enter a numeric value
• Or, click and drag the handle to change the spacing.
  • Hold

Right sidebar

To 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

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.

Canvas controls

To use canvas controls, select the auto layout frame and hover over it on the canvas. Pink handles will appear, similar to those in smart selection.

• Click the handle to open an input field and enter a numeric value
  • Hold ⌥ Option or Alt then click the padding area to input padding value for opposite sides
  • Hold ⌥ Option⇧ Shift or Alt⇧ Shift then click the padding area to change padding uniformly, on all sides.
• Or, click and drag the handle to change the spacing
  • Hold ⇧ Shift while dragging handles to increase and decrease using big nudge values
  • Hold ⌥ Option or Alt while dragging handles to change padding for opposite sides
  • Hold ⌥ Option⇧ Shift or Alt⇧ Shift while dragging handles to change padding uniformly, on all sides

Right sidebar

In the right sidebar, the padding controls are separated into vertical and horizontal padding by default, where vertical includes the top and bottom padding and horizontal includes left and right. You can still set uniform padding or independent padding.

• Click in the right sidebar. Four fields will appear for top, right, bottom, and left padding
• Hold ⌘ Command for Mac, or Control for Windows, and click into any padding box. A single padding field will appear. Enter a single value to set uniform padding on all sides. Or, use CSS shorthand to set individual values.
  For example, entering 1,2,3,4 sets the values to top: 1, right: 2, bottom: 3, and left: 4 respectively. Or entering 1,2 sets the values to top/bottom: 1 and left/right: 2.

Alignment

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 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 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
• Left
• Center
• Right
• Bottom left
• Bottom center
• Bottom right

Distribution

Once you've set alignment rules for child objects in a frame, choose how those objects will be distributed within that frame.

Click to open advanced layout settings. Next to Spacing mode, use the dropdown to choose:

• 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.

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.

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.

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.

Fill container

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 in an auto layout frame, unless the object has absolute position ↓ enabled. 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 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.

Learn more about constraints →

Absolute position

Absolute position excludes an object 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 with absolute position enabled can be placed precisely where you want relative to its parent container.

Objects with absolute position 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 advanced layout options, aren’t available to these objects.

To enable absolute position, select a child of an auto layout frame, and click in the right sidebar.

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 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

Text baseline alignment

When layers of varying heights are vertically centered when placed in a horizontal auto layout. However, in cases with text layers of different sizes or text with an object like a button with an icon, you may need to align their baselines instead.

To align layers by their baselines, select the layers you want to align, and click from the right sidebar to open advanced layout settings. Next to text baseline alignment, click to enable baseline alignment.

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 layout settings, and using the dropdown next to stroke to select included in layout or excluded from layout.

Keyboard shortcut guide

Basic shortcuts

Action	Mac	Windows
Add auto layout	⇧ Shift A	⇧ 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 space 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