Menu
Auto Layout is Figma's feature for creating components and frames that adapt their size to the content inside them (as opposed to constraints, which adapt to changes in their environment).
Auto Layout is the placement of elements next to each other within a frame. They can be aligned vertically or horizontally. Figma only supports one direction at a time, vertical or horizontal. If you want to create components that use both directions, you need to merge or nest multiple auto-layout frames.
Auto layout is a property of the frame, so it needs to be applied to the frame.
- You can insert the desired elements on the art board and then make a frame out of it with the auto-layout property by holding down the Shift+A key. The auto-layout property automatically appears in the layers panel, which is indicated by the grid icon instead of the usual frame icon.
- Or you can first wrap the elements in a frame through the combination Ctrl + Alt + G, then press the plus sign in the right panel of the auto layout.
- To remove auto layout from a frame, select the frame and click in the right sidebar or press Shift + Option/Alt + A.
Adjust auto layout spacing
Hover on the space between items and use the handle to adjust the space between. Click to open the spacing field and type a specific value.
Adjust auto layout padding
Hover on the padding at the edge of the frame and use the handle to adjust the padding on that side. Click to open the padding field and type a specific value. Press and hold Option (Alt) to edit opposing sides. Press and hold Option (Alt) + Shift to edit all padding values at once.
Auto layout children
1. Select and reorder layers within an auto layout frame. Nested child items are selectable by double-clicking into the frames.
2. Press the up (1) and down (4) arrow keys to change the order of items in the auto layout frame.
3. Select an item and press Command/Ctrl + D to duplicate it. Figma will add a copy to the existing auto layout.
Auto layout settings and controls
The auto layout properties in the design panel provides direction, spacing, padding, and alignment controls as well as advanced layout settings.
Auto layout frames indicate their layout direction with icons in the layers panel.
The absolute position toggle is available to nested items inside of auto layout frames.
Resizing behaviors for auto layout objects and their children are available in the frame properties in the design panel.
Auto layout direction, padding, alignment, and advanced properties are available in the auto layout section of the design panel.
Flexible resizing
Resizing dictates how auto layout frames respond to their contents and change in size. Adjust these settings independently for vertical and horizontal values.
Frame resizing behaviors are found below frame size properties.
Hug contents will fit to the size of the frame's nested objects.
Fixed will set the size of an object to be a specific value, and not responsive to its contents.
Fill container can be set on nested objects within an auto layout frame and will resize them to respond to the auto layout frame's size.
Buttons
One of the most commonly used components. The button should adapt its size to the width of the text label. It should also stretch if an icon appears inside it.
The icon usually has resizing options set to "fixed", but the text label is set to "hug content".
Let's try to make such a button with you.
1. You can add auto layout to any frame. Let's add it to this button to see how it works. Select the button on the canvas and click the + in the auto layout section of the right sidebar. You can also right click on the item and select Add auto layout or use the Shift + A keyboard shortcut.
2. Press T, hover over the text, then click to add your own copy. As you edit the text, the width of the auto layout frame will expand.
3. Add your icon and place it into the frame in the layers panel by dragging the icon layer into the frame layer.
Menus
While menu items usually use Constraints, their container should benefit from Auto Layout. Elements are stacked vertically from the top and packed. Space between is optional in this case. Now we can copy these elements and paste them and the list will expand vertically as we add new elements.
Tags & Badges
Such elements should expand and collapse depending on the text content inside.
Modals
Popups and modals are also good examples of components that use Auto Layout. They should adapt to the amount of text content inside.
Pricing
In this example, the pricing of the component should expand or decrease as the list of features changes. Although elements should fill the container horizontally, they must span the content in vertical space, which is why we used a vertical autolayout here.
Here are some tips on Auto-Layouts:
1. You don't need to use Auto Layout everywhere. Some components or screens may not need this.
2. The auto layout property works for frames, not groups. Groups do not have the ability to control size like frames. Luckily, if you want to turn a group into a frame to use auto layout, all you have to do is select it and click the Auto Layout Plus button in the panel on the right. The group will become an auto-position frame.
3. Auto-layouts will help you simplify the process of app creation. You can also preview your app screens after importing them to Sizze and check it in your device by downloading Expo app.
