Add auto layout to a design

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

Use auto layout to create responsive designs that grow to fill, shrink to fit, and reflow contents. For example:

• 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

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 absolute position enabled
• 🚫 Use smart selection on any objects within the frame

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

There are a few ways to add auto layout to a selection:

• Use the keyboard shortcut ⇧ Shift A
• In the right panel, click next to Auto layout
• Right-click on a frame or object and select Add auto layout

Once you use auto layout, nested objects will be set to auto space between, fill container, and center aligned. Learn about the different properties of auto layout →

Suggest auto layout

Suggest auto layout lets you turn a design responsive with just a click of a button.

When you use Suggest auto layout, Figma will try to determine which objects in a frame or component should be placed in an auto layout frame, then adds as many auto layout frames as needed to make the full design responsive. These auto layout frames are created all at once, while attempting to preserve the placement of your designs.

This saves you time so that you don’t have to do the tedious work of adding auto layout frame-by-frame.

You can access this option from a few places:

• Use the keyboard shortcut:
  • Mac: ⌃ Control ⇧ Shift A
  • Windows ⌃ Control Alt ⇧ Shift A
• Right-click the frame or object and go to More layout options > Suggest auto layout
• Select Suggest auto layout from the Actions menu

After you use this action, any nested auto layout frames that were created are indicated with a blue dot in the layers section in the left panel.

Add, edit, and remove objects

Add objects to an auto layout frame

You can add any layer or object to an auto layout frame.

1. Click and drag an object over an auto layout frame.
2. Use the blue indicator to choose where to place the object.

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:

1. Button: Each button is a horizontal auto layout. This allows the button to grow and shrink as we change the label text.
2. 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.
3. 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.
4. 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).

1. Select the auto layout frame, and the other layers you'd like to include.
2. Use the keyboard shortcut ⇧ Shift A to add auto layout.
3. Figma will create a frame around your selection, and add auto layout.

Duplicate objects

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.

1. Select a child object in an Auto layout frame.
2. Duplicate it by using the keyboard shortcut:
   • Mac: ⌘ Command D
   • Windows: Ctrl D

Arrange or 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.

1. Select the child object. If the layer is nested, you'll need to use the modifier key to deep select:
   • Mac: ⌘ Command
   • Windows: Ctrl
2. 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.

Remove objects

To remove an object from a main component or auto layout frame:

• Drag the object outside of the auto layout frame
• Click to next to Appearance in the right panel, or next to the layer in the left panel to toggle the layer visibility
• Select the object and press the Delete or Backspace key

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.

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 panel, click the next to Auto layout
• Use keyboard shortcuts:
  • Mac: ⌥ Option⇧ ShiftA
  • Windows: Alt⇧ ShiftA

Other considerations

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.

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.

Action	Main component	Instance
Adjust vertical and horizontal padding	✓	✓
Adjust spacing between	✓	✓
Reorder layers	✓	✕
Add new layers	✓	✕
Delete or remove layers	✓	(Hides layer only)