Categories
Figma

How to create an Auto-Layout powered Component in Figma.

View the original post

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.

Click Thumbnail to Enlarge

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

Click Thumbnail to Enlarge

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%.

Click Thumbnail to Enlarge

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.

Click Thumbnail to Enlarge

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.

Click Thumbnail to Enlarge

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

Click Thumbnail to Enlarge

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.

Click Thumbnail to Enlarge

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.

Click Thumbnail to Enlarge

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

Click Thumbnail to Enlarge

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.

Click Thumbnail to Enlarge

Nice work!

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

Click Thumbnail to Enlarge

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.

Click Thumbnail to Enlarge

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.

Click Thumbnail to Enlarge

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.

Click Thumbnail to Enlarge

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.

Click Thumbnail to Enlarge

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

Click Thumbnail to Enlarge

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.

Click Thumbnail to Enlarge

Much better.

And finally. Rename the Frame in the Layers Panel.

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

Click Thumbnail to Enlarge

All done!

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

Click Thumbnail to Enlarge

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.

Click Thumbnail to Enlarge

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, did you know you can create stunning UIs with my Design System; Cabana for Figma & Cabana for Sketch.
Special Offer: Please use the code CABANA35 to receive 35% OFF. ENDS SOON.

Thanks for reading the article,
Marc Andrew.

UNCODE.initRow(document.getElementById(“row-unique-0”));

Discover 58 powerful UI & UX Micro-Tips to improve your designs instantly.

Subscribe below to download my FREE Guide of UI & UX Tips, and also receive Regular UI & UX Articles, and Tips straight to your Inbox.

A book cover with a dark background and the words 'UI & UX Micro Tips' in white lettering

UNCODE.initRow(document.getElementById(“row-unique-2”));

The post How to create an Auto-Layout powered Component in Figma. appeared first on Marc Andrew.