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.
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.
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 -
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.
To start now, here’s what we will do:
Using the components we created, let’s create a card layout using the same logic. We’ll use the following settings.
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
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.
Need to understand how this was made? I have attached the link to the Figma Source file below.
UI Kits exist to make our life easier. They do this by straight up giving us the blueprints to the screen structure. So on our end, we took care to curate this list for you!
Some of our most favourite Figma plugins that we found for the month of July