Categories
Figma

How to create a Variant-powered Component in Figma.

View the original post

In this tutorial, I’ll show you how to create a new Floating Action Button Component in Figma, so you can see how easy it is to start building your own components and how to use powerful but sometimes confusing features such as Variants.

Ok. Wow. A Floating Action Button. Well, it’s more about showing you how to create Components with Variants. And like anything, it’s better to start small and then work your way up to bigger things right?

Now. Variants as powerful as they are can be a little confusing the first time you start creating components with them.

But don’t worry, this tutorial will fix any confusion that you might have, and you’ll be Variant ready the next time you create a suitable component.

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 a Variant-powered Component.

Ok. Firstly.

Taking a look at the existing Floating Action Button or FAB Component in the Tutorial file, you’ll see that it’s made up of 8 elements to cater for differing sizes, as well as shape types.

Click Thumbnail to Enlarge

And if you click on the Variant container you’ll see the different Variants shown in the Inspector.

Click Thumbnail to Enlarge

So. How do you put all this together? Let me show you…

Let’s start with the Extra Large, Circular button first.

Using the Frame tool draw out a Frame 64 by 64, give it a corner radius of 100, and then from the Inspector panel apply the Blue Color Style.

Click Thumbnail to Enlarge

Then from the Assets panel, grab the ‘Math Plus’ icon and drag that into the Frame.

Click Thumbnail to Enlarge

Change the Size of the icon to 32 by 32, align it inside the Frame, and then with it still selected, change its colour to White from the Color Styles in the Inspector.

With the Frame selected, turn it into a Component using the icon in the toolbar, and then rename it to, let’s say, ‘FAB Demo’.

Click Thumbnail to Enlarge
Click Thumbnail to Enlarge

Time to bring on the Variants.

Ok. Let’s do some Variant work on this little button.

With the Main Component selected, click the Plus icon in the Variants panel of the Inspector to create a new Variant.

Click Thumbnail to Enlarge

Ok. We’re off and ready!

Feel free to drag out the Size of the Variants container, change its colour, and generally move things around until you’re happy with the layout.

Click Thumbnail to Enlarge

Now. With the new Variant selected, use the shortcut K to use the Scale tool and reduce the size of the new Variant down to 48 by 48.

Click Thumbnail to Enlarge

Once you’ve done that, press V to go back to the Move tool.


Get descriptive with your Variant names.

Ok. Let’s see where we’re up to.

Click on the Variants container and take a look at the Variants panel in the Inspector.

Click Thumbnail to Enlarge

Property 1. Default. Variant2.

Wow. Inspiring.

Let’s tweak things to get those property and variant names a little more descriptive shall we?

Now. Referencing the existing Floating Action Button Component, we know we need a Property called Size and one called Type.

Click Thumbnail to Enlarge

Let’s start with the Size first.

Double click on the Property name and change it to Size.

Click Thumbnail to Enlarge

We also know that we need different sizes of buttons, so let’s edit the Variant names too.

Extra Large and Large would be a great place to start.

Click Thumbnail to Enlarge

Now let’s create a Property called Type.

Click Add New Property and name it Type.

Click Thumbnail to Enlarge

Then, to adjust the Variant name, double-click on the Chip and rename it to Circle.

Click Thumbnail to Enlarge

That’s looking a lot better.

Ok, let’s finish up the sizes for the circular shaped button.

With the Large Variant selected, click on the Add Variant icon at the bottom of the container.

Click Thumbnail to Enlarge

And then use K to Scale it down to 40 by 40.

Click Thumbnail to Enlarge

Don’t forget to press V to switch back to the Move tool.

With this new Variant selected, jump on over to the Variants panel and rename its Size to Medium.

Click Thumbnail to Enlarge

Ok. Let’s get the final size Variant into place.

With the previous one selected, click the Add Variant icon, and using K resize it to 32 by 32 and adjust its Size name to Small.

Click Thumbnail to Enlarge

Clicking on the Variants container, you can see that we have all our Circular button Size Variants in place.

Click Thumbnail to Enlarge

Watch out for those Variant conflicts.

Let’s quickly move onto the Square button type Variants.

With the Extra Large button variant selected, click the Add Variant icon.

And. Oh. Figma, we have a problem.

Click Thumbnail to Enlarge

We have two Variants with matching values, which is not cool in the crazy world of Variants.

Let’s fix that real quick.

Well, quickly, with this new Variant added, reduce its Corner Radius to 6. Cool.

Click Thumbnail to Enlarge

Ok. Let’s fix this Variant conflict.

From the Variants panel, select the Type property, and from the select menu, click Add New.

Click Thumbnail to Enlarge

For the new value, simply enter Square.

There we go. A quick name change was all that was needed, and now everything is good in the world.

Click Thumbnail to Enlarge

Just something to note. If at any time you see the following message pop up in the Variants panel, go through your existing Variants and check for any naming conflicts there.


Let’s start wrapping things up here.

Following similar steps to before, let’s create the remaining sizes for the Square shaped button, using the Add Variant option and the trusty Scale tool.

Just remember to select the correct Variant options in the Variants panel, as otherwise, you’ll see that pesky conflict message popping up.

Click Thumbnail to Enlarge

Also, remember to switch back to the Move tool to add a new Variant each time; otherwise, that handy little Add icon won’t appear for some strange reason.

And there we go!

Now jump on over to the Assets panel, drag in your new Component and start tweaking away at those Variants from the Inspector panel.

Click Thumbnail to Enlarge

Ok. So. Initially, setting up new Components with Variants can take some time, there’s no doubt about that, but once they’re in place, the power they wield is fantastic.

Go forth and create some more.

You’re now a Variants master.

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 a Variant-powered Component in Figma. appeared first on Marc Andrew.