Figma

How to create an Auto-Layout powered Component in Figma

In this tutorial I'll be showing you how to create an Auto-Layout powered Card Component in Figma.

Marc Andrew
Oct 18, 2021
6 min read
Photo by Magnus Andersson / Unsplash

Table of Contents

In this tutorial, I'll be showing you how to create a new Card Component in Figma, so you can see how easy it is to start building your own components as well as how to use powerful but sometimes confusing features such as Auto Layout in Figma.

And like I mentioned in my previous tutorial, it's better to start small and then work your way up to bigger things right?

Also included in the Figma file below is a mini-mini design system for you to play around with, and get a small understanding of how design systems are created in Figma (as well as how Variants are applied to certain Components).

QUICK NOTE: Download the required Figma file here to follow along with this Tutorial.

(ANOTHER) QUICK NOTE: You can also view the video below (which is from the Premium Edition of my Design System for Figma; Cabana) if you prefer to follow along that way...


Let’s start building our Component.

Ok. Let’s do this

Press F to select the Frame tool and draw out a frame around 400 pixels wide and about 440 pixels in height.

You can edit the sizing in the Inspector to get it just right.

Give it a corner-radius of 10.

A shape drawn in Figma with its sizing being adjusted in the Inspector panel

Then from the Fill panel in the Inspector, click on the Style icon and select the White Colour Style.

The Style icon in Figma being selected in the Inspector panel

You’ll have noticed that I used a Frame here instead of drawing out a rectangle and applying a Fill colour to that shape.

Why?

Honestly, apart from small use cases, there’s not much need for using rectangles when a Frame can do a much better job.

Using Frames allows you to use features such as Auto Layout instantly and cut down on the number of layers in the Layers panel. For example, we can apply the White fill colour directly on the Frame instead of an unnecessary shape layer.

Ok. Back to it.


Time to apply some Styles.

Let’s add a drop shadow to our Card also.

From the Effects panel, click the Style icon and choose Shadow / 100%.

A shadow effect style being selected in the Figma Inspector panel

Let’s add a placeholder image to our Card using one of the existing components in the tutorial file.

From the Assets panel, grab the Placeholder component and drop it onto the Frame we just created.

Drag out the resizing handles to increase its width, and height inside the Frame.

A placeholder component in Figma being dragged onto a Frame

No need to align the image just yet. Auto Layout will do all that for us very shortly.

Let’s add in some text styles for both our Title and Content.

For the Title, press T for the Text tool and then choose a suitable text style from the Inspector.

The Headline style at 21px will work great here.

Give it a Fill colour style of Black.

The words 'Blog Post Title' having a text style applied to them in Figma

And then stretch out its bounding box to the same width as the placeholder.

The bounding box of a block of text being stretched horizontally in Figma

For the content, add another text layer and choose the smaller Body text style at 16px.

Let’s give it a Grey colour style to contrast well against the Title.

Again stretch its bounding box out to the width of the Title.

The words 'Some content here' having a text style applied to them in Figma

With both text layers selected, choose Fill Container from the Resizing options to allow the text to expand horizontally if you decided to change the width of the Card component.


Let’s add in a Variant-powered Button.

Ok. Let’s finish up our Card with a button.

From the Assets panel, search for the Button component and drop it onto the Card.

A Button component being dragged onto a Frame in Figma

Then, from the Variants options, set its size to Medium, and give it a Right Icon.

A Button's settings being changed in the Variants panel in Figma

Ok. Looking good!

Just a couple more things.

Firstly. Let’s add Auto Layout to this Card component so that it’ll automatically resize as you add content to it at a later date.

With the Frame selected, click the Plus icon in the Auto Layout panel in the Inspector.

Auto Layout being applied to a Frame in Figma

Nice work!

You’ll see that adding Auto Layout lined everything up and added a more consistent amount of padding around the whole Card.

Padding being added consistently around a Frame in Figma

Let’s make a couple of tweaks to have our Card looking its best.

Firstly, select your Placeholder component and choose Fill Container from the Resizing options.

Resizing options being changed on a placeholder component in Figma

Like we did with the text layers previously, this will allow the placeholder to expand horizontally if you decided to change the width of the Card component.

A Frame in Figma stretched quite wide horizontally

Secondly, you can probably see that Auto Layout added a little too much spacing to certain elements inside the Card, pushing the two text layers a little too far apart.

2 text layers in Figma spaced a little too far apart

Let’s fix that.

With the two text layers selected, use the keyboard shortcut Shift + A to wrap them in an Auto Layout frame and then apply individual spacing, let’s say 4, to this Frame.

2 text layers in Figma having Auto Layout applied to them

Then, with the new Frame selected, choose Fill Container from the Resizing options.

A Frame containing 2 text layers having its resizing adjusted from the Inspector panel in Figma

Time for some final tweaks to our Component.

Let’s make some final padding tweaks to get everything spaced perfectly.

With the Card Frame selected, change the element spacing to 16.

And for the Card itself, let’s apply 24 padding all the way around.

Padding being applied to a Frame in Figma

Much better.

And finally. Rename the Frame in the Layers Panel.

And then, from the Toolbar, click on the Create Component icon.

A Frame in Figma being converted into a Main Component

All done!

Now you can search for your new component in the Assets panel, drop it into your project, and tweak away!

A Card component being dragged from the Assets panel in Figma

Select any nested components in the layers panel, for example, the button, and quickly alter its properties via the Variants panel on the right.

Then, start adding your text, and thanks to Auto-Layout, see it resize to accommodate the text.

A Card component with extra text being added to it in Figma

And that’s a wrap!

Just jump in, start creating simple components, play around with the Auto Layout and Resizing options, get comfortable, and then move onto bigger components at a later date.

Join me soon for the next part of this Figma 101 Series.

By the way, if you want to really save yourself hundreds of design hours, my Design System for Figma; Cabana is now available.
Special Offer: Use the code CABANA35 to receive 35% OFF. 👇

Cabana - Design System for Figma
Cabana is a Design System for Figma that is super-powerful and feature-rich but gives you the creative freedom and flexibility to make it your own.

Thanks for reading the article,
Marc.