Figma autolayout was due for a long time now, for someone such as me who uses Figma for almost all my freelance work and job work. It’s honestly the best, especially when you wanted to collaborate with another designer or share the direct link for an approval.

I have used Figma to share approvals, or lock the access (in case of delayed payments, haha). Nonetheless, Figma brings in a lot of value. Today, I want to touch one of my favourite feature released at the end of 2020 - Auto Layout.

What is Figma Auto Layout

Figma Auto Layout helps you to create frames that dynamically respond to content. What I mean by that is that creating a button component with or without an icon has become easy now; while even creating a vertical card layout with image, content and a call-to-action has never been easier. As you read this article, I will show you how to kick-start using this feature.

How is Figma Auto Layout useful?

Figma Auto Layout is useful for designers who like to spend time sharpening the axe, who are brutal about components and design systems - being able to dynamically adjust minor changes without having to haggle with spacing or multiple changes correcting the layout. There are multiple ways of using this -

You can create a button with or without icons
You can create a button or a badge that dynamically responds to the length of the text
Frames that adapt to layouts with multiple components such as Image, Headlines, Paragraph and CTA
Or even creating a complete dynamic interface

Creating a Button or Badge with Auto Layout

I have had situations where I created button where sometimes the call-to-action can overpower the initially defined width. This required manual adjusting of the button width every time. I'll show you exactly how to overcome this issue, here's what we are going to cover.

1. Creating a Frame

2. Enabling Auto Layout for the Frame

3. Styling the Auto Layout Frame

4. Adding Text within Auto Layout Frame

5. Auto Layout Padding

6. Spacing between Items

7. Adding Icons

‍

To start now, here’s what we will do:

Create a Frame: I usually keep the height as 45px, but it’s not necessary for you to define it. Then on the right menu you will see something called Auto Layout, click on ‘+’ so you activate Auto Layout. (You can do now or after Step 2, doesn’t really matter).

Styling: Add a fill, rounded corner and drop shadow if you want to.

Add a text within the Frame, change the fill to suit the need of the CTA. In my case, I used white.

Notes: There are a few settings you need to be aware of - as we are creating a button we will stick to the Horizontal option (use Vertical only when you are creating a component where you probably need an image on top and text at the bottom).

Height: You can used Flexible Height (selected) or Fixed height. I prefer to use Fixed Height because most of my Design Components are multiple of 8px or 12px (in this case I used 45px). Using a Flexible Height is useful when you are creating a notification layout. Such as this

Padding: Horizontal Padding, basically the distance between the Label within the CTA and corner of the frame. I prefer to use 16px for both Horizontal and Vertical padding to give it a good amount of breathing space.

Space between Items: This is the spacing between the Alert Icon and the text. Which you see the the “Mayday” Screenshot.

Icons: We can add an icon within the CTA by simply pasting it within the Frame. Similar to the screenshot below.

Auto Layout Frames (Card Layout Tutorial)

Using the components we created, let’s create a card layout using the same logic. We’ll use the following settings.

Create a frame with 500x500
Click on Auto Layout and Select Vertical Layout option
Select Flexible Layout, because we don’t know the kind of content that will go into this card.
Horizontal and Vertical spacing can be 10px (or anything that you prefer)
Spacing between items can be set to 16px.

Now we have added all the content within the Frame, it should look something like this (sans the styling)

‍

But we have the following issues

Adding 10px of Horizontal and Vertical spacing means that there will be padding around the Hero Image (which we don’t want)
Removing the 10px spacing to 0px means that the card layout will become too tight as you can see below.

In such a case, we will have to group the Text and Images separately, so we will group all the text within one group and adjust the spacing to 24px vertically and horizontally while the spacing between items can be 16px. And viola!

Let’s try to make this a little more interesting, we’ll create another Auto Layout for the Title and Sub-Title. We’ll add a CTA for a user to Learn More to make it a little more actionable.