Using Figma’s auto layout

Figma’s first auto layout version was initially released back in 2019, but it was recently updated during config in May 2022. New features have been added and some updated, and regarding interface visuals, some have moved or changed.

This article will explore the latest version of auto layout. We will deep dive into learning how to use this powerful feature and its major capabilities or functionalities so you can create design systems with it. Let’s start.

What is auto layout?

Auto layout is a feature that will allow you to create frames that respond to content or layout size changes. These dynamic components or frames respond to the size of their child objects, such as a button that grows with the length of its label or a button that now has an icon added and again grows with the length of the component.

For those that are newbies, a frame is like a container made of smaller objects, and all together form a frame. So the frame is the parent object that controls all the child objects that live inside.

Frames have a size that is explicitly set by the designer, whereas groups are just multiple objects combined without any size specification. Sometimes frames are referred to as components as well.

Auto layout can be applied to all of the following already explained :

• A selection of single objects.
• A group
• A frame

You can find frames, groups, or single objects placed across a canvas, the limited backdrop where designers make the magic happen. According to Figma, a canvas has a finite size of -65,000 through +65,000 on each axis.

There are multiple capabilities we will explore in this article like the padding to let your items breathe or the alignment to change their position within the frame.

Auto layout can be applied to almost all of your components of a design system, making them more flexible and cohesive when used by the different team members on each of the projects the team is working on.

Why is auto layout important?

There are two important concepts to understand the importance of this feature: first, we need to know what a layout is; and second, what it means to use a responsive layout.

First, a layout is defined as the arrangement of single or compound items such as images, text, or components on a screen. Layouts use simple or complex components and spacing to encourage consistency across platforms and screen sizes.

Second, a responsive layout allows a frame to change and readapt dynamically based on the screen size, guaranteeing consistency across devices.

---

Over 200k developers and product managers use LogRocket to create better digital experiences

Learn more →

---

Responsive design is crucial to building products for different device sizes from mobile to desktop and tablet in between. Designers have been using layouts and grids to better readapt designs to different screen sizes. If using auto layout, you can place each component in different layouts and they will dynamically adapt to the new content dimension, saving you time readjusting manually each component for each viewport.

How to use Figma’s auto layout

There are three different possibilities to apply auto layout to a frame or a group, always by selecting the entire frame, group, or just the multiple elements you want to convert:

• Click the right button of the mouse or trackpad and select Add auto layout on the menu.
• Next, click the plus button on the auto layout section in the Properties panel you’ll find on the right of the screen.
• Or, use the keyboard shortcut Shift + A (valid for Mac and Windows).

In either case, after applying the auto layout, you will see on the properties panel on the left of the screen that a new frame will appear. You can change its name if you double-click the new frame with your mouse or trackpad; clicking the right-facing arrow will allow you to unfold the child objects living in the parent frame. The child objects are shown in order of appearance on the canvas, from top to bottom or left to right.

Once you have created the auto layout, you will see new options on the auto layout panel or menu on the right. Also, a new feature will appear on the Frame menu.

In the following section, we will walk through the basic options of auto layout first, and then move to the more advanced features that will make your work shine.

The basics of the Frame menu

A new section named horizontal and vertical resizing will show up after creating the auto layout. This section has two possible variables that are worth using, depending on your goal:

• Fixed width and height: This option works nicely when you want your frame to expand vertically or horizontally across the canvas. The children objects will remain aligned in the chosen option inside the frame while it grows. A great option if you want to have frames responsive to the layout. A classic example would be a top navigation bar for a website
• Hug contents: This option nicely works if you want your frame to grow vertically and horizontally depending on the size of its children objects. So basically, the auto layout frame will increase its size depending on the size of its children objects and not follow the rules of the responsive layout. A great option if you want to have frames responsive to the children objects. A classic example would be a button

Tip: Using the Absolute Position option

This option is also new and does help you position children in an absolute positioning inside an auto layout frame. You need to select one of the children and then select the plus button on the top-right corner.

The object will automatically change its properties and will be fixed to the place you have set. You can move it wherever you want, but it will remain fixed while resizing the component.

Navigating the auto layout menu

There are multiple options in this simplified menu on the right panel. Remember to keep the frame selected to have the panel visible, and I will walk you through all the options from top to bottom and left to right:

• Remove auto layout: Click the minus button to remove auto layout or right-click and press Remove auto layout. This will not delete your frame or even its properties, it will just convert the auto layout frame to a regular frame
• Directions: The arrows will help you select a vertical or horizontal direction of the parent-children inside the frame
• Spacing between items: The pixels found between each object or child. Note that the number will always repeat, so you can’t choose different pixels between different children objects. From the last Figma release, you now can set the negative spacing between children objects of an auto layout frame to create stacking, and it works horizontally and vertically
• Alignment: How the children objects are aligned inside the limited space of the frame. There are nine possible alignment options depending on how you cross and mix the following options: top/middle/bottom and left/center/right. It seems more complex than what is in reality, you will see visual clues to set the positioning of the objects
• Padding: The horizontal and vertical space between the children and the frame. We encounter four types of padding — top and bottom padding and right and left padding. Every single padding can be set independently

Tip: On-canvas control for padding and spacing

Now you can control the padding and the spacing between items inside the same frame. You just need to look for the little red handles that appear while hovering the frame and drag them manually to increase or decrease the sizing. If you press one of the handles, a controller will prompt and you can manually change the spacing or padding using your keyboard.

There are a couple of keyboard shortcuts that may be worth it mentioning:

If you hold the Shift key while dragging the handler, the pixels will increase or decrease with the pixel number set previously on the auto layout menu.

If you press Alt while dragging the handler for padding, both sides of the vertical or horizontal realm will increase or decrease equally.

Advanced auto layout menu options

By clicking the three dots of the auto layout menu, an advanced menu will prompt on top. The first thing you’ll notice is a preview section to show the different stages of your selections. Let’s talk about these options:

• Spacing mode: There are two options here and packed is the default
  • Packed: This keeps the spacing between items as set in the previous menu
  • Space between: This option distributes the children objects across the space available on the frame using all the vertical or horizontal space
• Strokes: Now you can choose if the strokes are part of the auto layout frame or not. So the stroke surrounds the whole frame and not the children individually, and even the children can have strokes independently as well. This is handy to keep the component clean
• Canvas stacking: While using negative spacing, you now can achieve the stacking effect on your children’s objects. Use this option to change the order of the layers; you can choose between the first or last on top
• Text baseline alignment: If you have text on your auto layout frame, select if you want to align it in the center or by its baseline. Only applicable to horizontal alignment

Tip: Place objects on top of an auto layout frame

Is not possible to place an object on top of an auto layout frame, unless you add the object to the frame and you place it wherever you want.

Now the tip holds the spacebar while placing the object on top of the frame and the magic is done, the object is now set on top of it.

To sum up

Quite impressive for all the things you can do using Figma’s auto layout feature, the latest release skyrocketed the capabilities to another level of customization. There is still room for improvement, and I am pretty sure Figma will surprise all of us pretty soon with more updates, but still quite good.

I would recommend all users play around with all the options on the simplified menu and then the advanced one to learn more in-depth about all the possibilities available.

Auto layout is a great option to create design systems for teams working and designing for responsive devices. Components created using auto layout are easy to consume in all kinds of viewpoints without the need for much manual work, so overall speeds up the design process and keeps the design clean and cohesive.

Now that you know all the tricks, you have no excuses to have fun playing with auto layout!

LogRocket: Analytics that give you UX insights without the need for interviews

LogRocket lets you replay users' product experiences to visualize struggle, see issues affecting adoption, and combine qualitative and quantitative data so you can create amazing digital experiences.

See how design choices, interactions, and issues affect your users — get a demo of LogRocket today.