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.
Auto Layout allows you to create dynamic frames that respond to their contents.
There are lots of ways you can use Auto Layout:
- Create buttons that grow or shrink as you edit the text label
- Quickly build lists that adapt to new items
- Combine Auto Layout frames to build complete interfaces
- Add Auto Layout to existing Components
Auto Layout is a powerful feature with many moving parts. If we were to write a traditional step-by-step process, we'd end up in a Choose Your Own Adventure game!
Instead, we'll show you how to access Auto Layout, what are the properties involved, and give you some tips. You can explore all features of Auto Layout in our Auto Layout Playground file.
Follow along with our video tutorial, as we create some elements of our theater app.
Note: We use the terms parent and child to refer to frames and objects within an Auto Layout frame. Learn more about Parent, child, and sibling relationships.
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
- Groups or other collection of layers and/or objects
Note: We only support Auto Layout on frames. If you select objects outside a frame, Figma will create a frame around them and add Auto Layout.
You can add Auto Layout in a few places:
- Right Sidebar: Click the next to Auto Layout
- Right-click on the frame and select Add Auto Layout
- Use the keyboard shortcut: Shift A
Adjust the fill, stroke, effects and corner radius properties of frames! Learn more in our frames in Figma article.
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 (properties panel).
When you add Auto Layout to a frame you won't be able to:
There are properties for both Auto Layout parents (frames) and an Auto Layout children (objects). We've grouped Auto Layout properties based on which object you have selected:
Note: As it's possible to nest Auto Layout(s), a frame may take on the role of both an Auto Layout parent and Auto Layout child. This means both sets of properties will be available to you.
Auto Layout parent
The following properties are in the Auto Layout section of the properties panel.
Direction allows you to choose which way the Auto Layout frame will flow. You can choose between Vertical and Horizontal.
- Vertical allows you to add, remove and reorder objects along the y axis. For example: objects within a list, or posts within a newsfeed or timeline.
- Horizontal allows you 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 (e.g. horizontal or vertical). To build designs with both directions, combine or nest Auto Layout frames.
Note: Figma will set the Direction based on how you arranged the objects on the canvas. You can change the Direction in the Auto Layout section of the properties panel.
Padding controls the whitespace or "breathing room" around objects in your Auto Layout.
You can set Horizontal and Vertical padding independently. It's not possible to control padding for each side on its own, or set a negative value.
You can copy and paste properties between Auto Layout frames
Tip! Figma will use your Big nudge value as the default padding value. You can adjust your nudge settings in the preferences menu.
3. Spacing Between
You can control the Spacing between objects in an Auto Layout. This works like the spacing between objects in a Smart Selection.
In a Horizontal Auto Layout this will refer to the Horizontal space between objects. In a Vertical Auto Layout, the Vertical space between objects.
Unlike Smart Selection, there isn't a way to adjust the spacing on the Canvas. Instead, you can use the spacing field in the Auto Layout section of the properties panel:
- Enter a number in the field
- Focus on the field and use your arrow keys to adjust
- Click and drag to scrub the field and increase or decrease the value
Tip! You can copy and paste properties between Auto Layout frames.
Mac: ⌥ Option ⌘ Command C and ⌥ Option ⌘ Command V
Windows: Ctrl + Alt + C and Ctrl + Alt + V
The Resizing property controls whether you can adjust the size of the frame itself. You can only control resizing along one axis, the axis opposing the direction.
- Horizontal Auto Layout: Choose between Auto Height or Fixed Height.
- Vertical Auto Layout: Choose between Auto Width or Fixed Width.
When resizing is Auto, Figma will determine the dimensions of an Auto Layout frame based on its contents. The frame will grow and shrink as you adjust the frame's contents.
With Auto resizing, it's not possible to adjust the width or height of the frame itself. To make this clear, we gray out the Width and Height fields in the Properties Panel.
If resizing is Fixed, then the frame's dimensions on that specific axis won't respond to any changes. This allows you to resize the frame, as well as allow objects to extend beyond the frame's bounds.
With Fixed resizing, you can set the width (Vertical Auto Layout) or height (Horizontal Auto Layout) of the frame. This allows you to adjust that dimension using the Width and Height fields in the properties panel.
Switch between Auto and Fixed resizing in the properties panel:
Adjust an Auto Layout frame's dimensions in the canvas. If you resize an Auto Layout frame, we will change the resizing setting to Fixed. If you want to switch back to Auto, change the resizing setting in the properties panel.
Auto Layout child
When you select an object within an Auto Layout frame, you'll see some changes in the properties panel. These are mainly related to the alignment and positioning controls.
In an Auto Layout, the X and Y co-ordinates of any child objects are set to Auto. You won't be able to change or override these.
You will be able to change the order of objects within an Auto Layout.
Use the arrow buttons at the top of the properties panel - or the keyboard shortcuts below - to move an item.
In a Vertical Auto Layout
- Move Up ↑
- Move Down ↓
In a Horizontal Auto Layout
- Move Left ←
- Move Right →
Changing the object's order in the Auto Layout will also update the order in the Layers Panel. Unlike regular frames, layers will appear in reverse order.
Tip! Use the keyboard shortcuts to Bring Forward ⌘ Command [ or Send Back ⌘ Command ] an object.
Within an Auto Layout, you have have limited alignment options. You can only align objects along one axis.
In a Horizontal Auto Layout:
- Align Top
- Align Vertical Center
- Stretch Top & Bottom
In a Vertical Auto Layout:
- Align Left
- Align Horizontal Center
- Align Right
- Stretch Left & Right
Note: There is no way to replicate the following Alignment or Constraint options in an Auto Layout.
🚫 Tidy Up a selection of objects
🚫 Use Smart Selection
🚫Distribute Vertical Spacing
🚫Distribute Horizontal Spacing
Add and remove objects
Add objects to an Auto Layout frame
You can add any layer or object to an Auto Layout frame.
When you drag an object over an Auto Layout frame, Figma will show you a blue line anywhere you can add the object.
Figma will allow you to place an object into any Auto Layout frame. It will use the object's size to determine which locations are suitable.
You can use the modifier key to override the default behavior and add an object anywhere you like:
macOS: ⌘ Command Windows: Ctrl
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 frames and objects
- Use the keyboard shortcut Shift + A
- Figma will create a frame around the frames and objects
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
Learn more about Parent, child, and sibling relationships.
Duplicate objects in an Auto Layout
You can duplicate existing objects to add them to the Auto Layout. Figma will add the duplicate to the right (horizontal) or underneath the original (vertical).
- Select a child object in an Auto Layout frame.
- Duplicate it by using the keyboard shortcut:
- MacOS: ⌘ Command D
- Windows: Ctrl + D
Remove objects from an Auto Layout
You can remove any object from an Auto Layout:
- Drag the object outside of the Auto Layout frame.
- Select the object and press the Delete or Backspace key
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 properties panel, click the minus icon next to Auto Layout
Note: You can't use the Add Auto Layout keyboard shortcut to remove Auto Layout. If you do, you will create a new Auto Layout frame around your current selection instead - hey!
Tips for Auto Layout
If you've made it this far, thanks for hanging in there! Auto Layout establishes some new rules and behaviors that work differently than other functions in Figma.
We've put together some tips and tricks to help you navigate those rules and behaviors.
You can add Stroke, Effect and Corner Radius properties to a frame. This includes frames that have Auto Layout added.
Before, you could add or change the properties of child objects when selecting the frame. Now, this will apply those properties to the frame.
This means you can create buttons from a text layer, without having to draw a background. This may need a change in behavior.
Have Components or objects with rectangles for backgrounds? Figma will apply the rectangle's properties to the Auto Layout frame. Neat!
Prototyping 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.
Learn more about this in the Slide in and Move in Transitions section of our Smart Animate article.
- 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.
Toggling a layer or object's visibility will remove it from an Auto Layout. This may create an unwanted effect when creating layouts or prototypes.
If you want to create a gap in the Layout where an object should be, you can adjust the Opacity of the object instead.
In the properties panel, update the Layer settings to
00 to set to 0%.
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 Master Component. You can then swap out the icon for another Component in your Library.
Text objects can also have their own resizing properties. Within an Auto Layout, this may produce some interesting results.
Adjust the text resizing property in the Text section of the properties panel. There are three text resizing options:
- Auto Width: If you enter a longer word in the text field, the text won't wrap to a new line. Instead, the width of the Auto Layout parent frame will accommodate the longer text.
- Auto Height: If you enter text that extends beyond the text object's width, text will wrap to a new line.
- Fixed size: If you enter text that extends beyond the layer's bounds, the text box will not resize. Instead, text will overflow outside of the text layer's bounds.
Note: We recommend against using fixed size text boxes with Auto Layout. Fixed size will prevent the text layer from resizing to accommodate your text. This may cause overlap between the text and other objects in the Auto Layout frame.
Fixed Size to Auto Width or Auto Height. Which ever best fits the context.
Note: Within an Auto Layout, you can create child objects that adapt as you resize the parent frame. Instead of using Constraints, you can use the Stretch Left & Right or Stretch Top & Bottom options in the Alignment section at the top of the properties panel.
We mentioned above that it's not possible to apply Constraints to an object in an Auto Layout frame.
You can still apply constraints to the Auto Layout frame itself, as long as you nest it within a regular frame.
As an Auto Layout frame's dimensions are set by its content, you can't use any Constraints that stretch or change the frame's dimensions. This includes:
✅ Left or Right
✅ Top or Bottom
🚫 Left and Right
🚫 Top and Bottom