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.

New to auto layout? Learn how auto layout works by exploring its properties, including resizing, direction, absolute position, and more.

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

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.

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⇧ ShiftA 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 the 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 sidebar, 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)