Supportive, Professional, Client-Focused Service
Ultimate Figma Auto Layout Tutorial for Beginners
Are you tired of manually adjusting every single element in your UI designs whenever a text box expands or a new component is added? If your current design files look like a messy, unorganized closet, you are in the right place. Specifically, understanding how to automatically organize your designs is a dream come true feature for all perfectionists. Whether you are a UI, UX, product, or growth designer, mastering this tool is essential. Therefore, in this comprehensive Figma Auto Layout tutorial, you will learn exactly how to harness the power of smart frames.
In this guide, we will walk through everything you need to know about Figma Auto Layout. Moreover, we will cover the basics of alignment, explore horizontal and vertical arrangements, and dive into the brand new grid features. Consequently, by the end of this post, you will understand how to use every single button in the Auto Layout panel. Let us transform your messy designs into perfectly structured, responsive components!
Step-by-Step Guide to Using Auto Layout
Auto Layout is a property you can add to frames and components in Figma. It lets you create designs that grow to fill or shrink to fit, and reflow as their contents change. This is incredibly useful for buttons that need to adjust when the text changes, or lists that need to adapt when items are added or removed.
Creating Your First Smart Frame
To show you the magic of Auto Layout, we will start with a simple example using five circles. Right now, their alignment might be completely messy. Let’s fix that.
First, select all the elements you want to align. You will find the Auto Layout button on the right sidebar, right next to the “Layout” section. Alternatively, you can use the keyboard shortcut, which is Shift-A.
Once you click it, Figma will create a smart frame that adjusts automatically based on your settings. For example, you can easily change the gap between all elements simply by dragging your cursor between any two elements on the canvas. This is awesome because it saves you from calculating pixel distances manually.
Furthermore, the button you just clicked to add Auto Layout can also be clicked again to remove it. Once you remove the Auto Layout property, you can move or adjust the elements individually, and the smart alignment will no longer apply.
Mastering the Freeform Setting
When you apply Auto Layout, you might notice different ways to arrange these elements. The first one is the Freeform setting. Freeform allows you to move each element freely inside the frame, so it feels almost like you are not using Auto Layout at all. Interestingly, when you add Auto Layout and then click the button again to remove it, Figma automatically sets the frame back to Freeform.
If you are on this Freeform setup and the size of your frame doesn’t perfectly fit the elements inside, simply click the button to the left of the Auto Layout panel. This will instantly resize the frame to hug your content perfectly.
Let us start diving deeper into the Freeform settings. You will see “W” and “H” right below the layout buttons. Specifically, “W” stands for Width and “H” stands for Height. You can use these fields to adjust the size of your element. To do this, you can type in a specific number, hover over the letter and drag left or right to change it, or do it the most organic way—hover over the edge of the element on the canvas and drag until you see a number you like. Pro tip: many designers prefer working in multiples of 4 for spacing and sizing.
To the right of these fields, you will see a square icon. If you click it, it locks the aspect ratio of the element. Consequently, the width and height will stay completely proportional. Let’s say you are redesigning a YouTube thumbnail. A YouTube thumbnail has a specific 16:9 aspect ratio, so locking it can prevent you (or anyone else) from accidentally messing it up.
However, there is one very important thing to remember here. Make sure you select the right layer! In a real design project, you will have dozens or even hundreds of layers. If you want to lock the aspect ratio of a specific circle, make sure to select the circle layer, not the entire parent frame. That way, your circle will stay perfectly as a circle—not too fat, and not too short.
Below the width and height, you will find a field to adjust the gap between elements. This only appears in freeform mode when your elements share the exact same gap. At the very bottom of the panel, you will see the “Clip content” checkbox. This is super helpful when your frame is actually smaller than the elements inside. For example, in a carousel design, checking “clip content” will neatly hide the parts of the elements that extend outside the boundaries of the frame.
Vertical and Horizontal Layouts
Moving on from Freeform, the next options are Vertical and Horizontal...