Before you start
Who can use this feature
Available on all plans
Anyone with can edit access can use auto layout
This article covers just one aspect of working auto layout. Check out these other articles to learn more about working with auto layout in Figma Design.
- Guide to auto layout: An overview of auto layout, how it works, key properties, and browse a collection of auto layout resources.
- Toggle auto layout on a design: Learn how to add auto layout to frames and layers so that you can start making your designs responsive.
- Use the horizontal or vertical flows in auto layout: Learn about the properties available to the horizontal and vertical flows in auto layout.
- Use the grid auto layout flow: Learn how to work with columns, rows, and cells with the grid layout flow.
The true power of auto layout's responsiveness emerges when combining resizing behaviors across nested auto layout frame.
Nesting an auto layout frame within another auto layout frame allows you to combine horizontal, vertical, and grid auto layout flows to create intricate components and interfaces. The nested frames will have both parent and child properties, meaning each frame will have its own separate padding and gap between values, which allow for for multi-dimensional layouts with elements that flow in different directions and arrangements.
Tip: Nesting refers to the act of placing a layer inside of another layer, such as placing a button inside a component, or a shape inside of a frame.
Learn more about nesting and parent, child, and sibling relationships.
In this article, we’ll go through a couple of examples of nesting auto layout frames, but you can mix and match combinations of auto layout flows to achieve your desired effect.
Nest vertical and horizontal flows
In this social media newsfeed example, there are four levels of auto layout. Let’s break them down one by one, starting with the inner-most level:
Author and date
The author and date are two individual text layers that live together inside an auto layout frame. Because they flow from top to bottom their auto layout frame is set to a vertical flow.
Try it out
Step 1: Create the text layers.
- Select the text tool from the toolbar, or press T, then click on the canvas to type a placeholder name.
- Duplicate the text layer, moving it below the name layer, then update the text to a placeholder date.
Step 2: Add auto layout.
- Select both text layers, then add an auto layout frame around them by pressing ⇧ Shift A or clicking Use auto layout from the Layout section of the right sidebar.
- Set the auto layout flow to Vertical.
Profile
The Profile contains an avatar and the author and date frame we just created. Because they flow left-to-right, these elements live in an auto layout frame using the horizontal flow.
Try it out
Step 1: Create the avatar.
- Select the Ellipse tool from the toolbar or press O.
- Click and drag your cursor to create an ellipse. Do this while holding ⇧ Shift to lock the ellipse to a 1:1 ratio as you create.
Step 2: Add auto layout for the profile element.
- Select both the avatar ellipse and author and date frame.
- Add an auto layout frame around them by pressing ⇧ Shift A or clicking Use auto layout from the right sidebar.
- Set the auto layout flow to Horizontal.
Step 3: Update auto layout properties.
To make sure that our elements will reflow properly in our final product, select the name layer and date layer and set their width resizing property to Fill container. Then set their parent frame to Fill container as well.
Social media posts
Each social media Post lives inside it’s own frame, each containing various elements—including the user’s profile, an image, and a description. We want elements in each post to flow from top to bottom, so they are set to a vertical auto layout flow.
Try it out
Step 1: Create the image.
- Select the Rectangle tool from the toolbar, or press R. Click and drag to draw a rectangle.
- Click the color swatch from the Fill section of the right sidebar to open the color picker.
- Select Image. You can leave this as a checkerboard placeholder, or insert an image of your own.
Step 2: Create the description.
- Select the text tool, then and click and drag to create a text box.
- Add some placeholder text.
Step 3: Add an auto layout frame.
- Select the profile element, image, and text description. Then add auto layout.
- Set the flow to Vertical.
Step 4: Update auto layout properties.
To make sure our content reflows the way we want them to in our final product, let’s update the resizing properties on a few elements.
- Profile element and post description
- Set their width resizing to Fill container so that it will always fill the width of the container, even if the parent resizes.
- Set their height resizing to Hug contents so that it will grow and shrink to accommodate the layers inside the frame.
- Image
- Set the width resizing to Fill container.
- Toggle on Aspect ratio to maintain the current ratio of the image whenever it resizes.
- Update other auto layout properties as you see fit. Padding and gap between are great places to start.
Tip: Add a background color or stroke to the social media post frame so that you can see the bounds of the frame resizing more easily.
Newsfeed
The Newsfeed lives in a top-level frame and uses a vertical auto layout flow so that the social media posts will flow from top to bottom.
Try it out
Step 1: Add the newsfeed auto layout frame.
- Select the social media post and press ⇧ Shift A to add another level of auto layout to it. This will be the newsfeed frame.
- On the new frame, set the auto layout flow to Vertical.
- Make sure the height resizing property is set to Hug contents.
Step 2: Update auto layout properties.
-
Select the social media post, and set its width resizing to Fill container. Keep the height resizing to Hug contents.
-
Update the padding and gap between properties as desired for the newsfeed frame.
Step 3: Duplicate the social media post element.
Select the social media post again and duplicate it. Notice how the top-level frame resizes to accommodate.
Finishing up
Now when you resize the frame or choose a different frame preset, the contents should resize and reflow accordingly.
Learn more about the vertical and horizontal flows in auto layout.
Nest grid flows
🚧 The grid flow for auto layout is currently in open beta. Some functions and settings may not yet be available to grid. The feature may change and you may experience bugs or performance issues during the beta period.
In this mobile home screen example, there are three levels of auto layout that all use the grid auto layout flow. This time, let’s start with the outer-most level:
Apps on the home screen
The apps on the home screen live in a top-level auto layout frame that uses the grid option with three columns and six rows (3x6).
Try it out
Step 1: Create a frame.
- Select the Frame tool or press F.
- Choose a mobile frame preset from the right sidebar.
Step 2: Use grid auto layout flow.
- With the frame selected, click the Grid option in the Layout section of the right sidebar.
- Click the grid selector, and set the Number of columns to
3and Number of rows to6.
Step 3: Add mock app icons.
- Select the frame tool again, and click into one of the cells to place a frame.
- Update any desired properties of the frame (e.g. fill color, stroke, corner radius, and so on).
- With the frame still selected, press ⌘ Command / ⌃ Control D to duplicate it. The new frames will fill the subsequent cells.
Bonus: Update the mobile frame’s padding and gap between properties to customize the spacing around the apps.
Folders
The folders are auto layout frames that use the grid option. Each frame spans across four grid cells.
Try it out
Step 1: Delete any apps you won’t need
Our folders will occupy multiple cells, so let’s delete the app frames that will be in our way.
Step 2: Span the folder frames.
Select one of the folder frames and click and drag it to span multiple cells. Change the fill color and any other properties of the folder frame as desired.
Apps in folders
Within the folder frames, one uses a 3x3 auto layout grid, and the other uses a 2x2 auto layout grid.
Try it out
Add grid to the folder frames
- Select one of the folder frames and add auto layout to it. Choose grid as the flow option.
- Click the grid selector and set the Number of columns to 3 and Number of rows to 3.
- Copy one of the app frames and paste it multiple times into this folder frame.
- Update the frame’s padding and gap between values as desired.
- Repeat the steps above for the 2x2 folder frame.