I have been using auto-layout for almost a year now and I can’t imagine there was a time I used to design on Figma without it🥲 However let me be honest, before I successfully learned how to use it, I gave up several times because the learning curve is quite something, whew. A couple of months and trials later, it stuck and here I am sharing my knowledge so far with you so that you don’t have to struggle as much as I did.
What exactly is auto-layout?
I asked ChatGPT how they would explain auto layout to a 10 year old and this is what I got.
Auto layout in Figma is like having a magic tool that helps you to arrange things on your screen without having to do it manually every time. It’s like a really smart robot that knows exactly how things should be positioned based on their size and shape. For example, if you want to make a list of items, you can use auto layout to make sure that each item is the same size and spaced out evenly. If you add or remove items from the list, auto layout will automatically adjust everything, so it still looks nice and organized. It’s like having your own personal assistant that helps you keep your designs looking great!
A more concrete explanation would be : Auto layout in Figma is a feature that automatically arranges and organizes elements within a frame based on set rules and constraints that you control. It saves you time and effort by ensuring that the elements are positioned, sized and spaced consistently and automatically.
What do we use it for?
We can use auto layout for many UI elements to ensure that they adjust their size, spacing and layout based on their content or number of items and space available or screen size.
For example, we can use auto-layout for a navigation bar so that it automatically adjusts its spacing based on the space available on different screen sizes.
Some other UI elements where you can apply auto-layout include:
- Buttons
- Cards
- Forms
- Lists
- Accordions
- Modals
Where do you begin?
To really see auto layout at work we need two or more elements inside a frame. So select two or more elements (like two frames, or text and a frame) and press SHIFT + A or click on auto-layout on the style panel to the right.
This will frame your elements and activate the auto layout properties within this frame. You can also click on an existing frame with the elements already inside it to auto-layout it. You will see that some new options will appear below “Auto layout” on the panel.
These properties are what you will use to manipulate the elements within your frame. Now let’s jump into my 5 need to knows about auto-layout.
1. Spacing Modes
Auto-layout has two types of spacing modes, packed and space between. With packed, which is normally the default, the elements within your frame will maintain a set distance from each other.
You can specify this distance here.
So even if you expand or shrink the frame, the elements will maintain the distance you set between them.
With space between, the elements are distributed evenly within the frame.
So if you expand the frame, the distance between the elements will be adjusted to ensure they remain equally distributed within the frame.
3. Resizing
Please note that these options are not under the auto layout menu on the style panel, but appear under the frame menu once you add auto layout to a frame. We have hug, fixed and fill container resizing options.
For this let’s use a button as an example. The most efficient way to make a button is to frame a text using auto-layout. I say it’s efficient because our button will most likely be a component that we will be reusing. And with every instance the text width, height or both inside the button frame will change. Auto-layout helps keep all our button instances consistent in appearance according to the properties we have set.
Hug
When it comes to resizing behavior for our auto-layout button (or any frame), by default it is set to hug, for both horizontal and vertical resizing. This means that as you edit the text inside, the button maintains its padding all around. So the size of the text is what dictates the size of the button.
Fixed
Another option is fixed. This means that the width and height of the button will stay fixed even when you edit the text inside the button. Btw, please note that if you manually increase the height or width of the button while in hug, the resizing will automatically change to fixed, but you can also change from hug to fixed in the panel to the right.
Example Scenario : I want the buttons for my onboarding screens to remain a fixed width no matter the text inside for a consistent layout. (eg “next” “skip” “get started”)
Fill Container
Lastly, we have fill container which is a resizing behavior applied to the elements inside an auto layout frame. Note: Not to the frame around the elements. When applied, the child elements will stretch vertically and horizontally in response to expanding and shrinking the parent frame, while maintaining the frame’s padding and the space between the elements.
4. Absolute Positioning
Sometimes you need to add an element to an auto layout frame and you don’t want it to interfere with the other elements within the frame, or you want to place in inside the frame in a way that the auto layout structure won’t allow you to. In such cases, use absolute positioning to free this item from the bounds of auto layout and place it anywhere you want within the frame.
You do this by first placing the element inside the frame, even though it spoils the auto layout order, let it. Then while still having it selected, click on the absolute position button on the right panel under frame.
And there you have it. It is still within the frame but now you can drag it anywhere within the frame without obeying the auto-layout rules.
5. CTRL + D
Probably my favorite thing about auto-layout is that when your frame is in hug resize mode (refer to number 3: resizing), you can add a new element to the series very fast while maintaining the spacing between the elements and the frame padding. You do this by clicking on one of the elements and pressing CTRL + D. It’s such a time saver because you’d otherwise have to manually adjust your new element and existing frame to ensure consistency.
There’s a lot more to auto-layout, but I hope I have explained these 5 tips in a simple way to help you get started with auto-layout or learn more about auto-layout.
Read the full article here
