How to create component’s variants in Figma

raoufbelakhdar - Jan 21 '22 - - Dev Community

In this quick post, we’ll see how to create a component’s variants out of a series of buttons in Figma.

Watch Video Tutorial

Create Variants

In this example, I’ll use a series of buttons that I’ve previously created.

  • In order to transform this series of button, we’ll just select all our buttons.
  • Head to the top-bar menu and hit the arrow besides the Create component icon.
  • In the drop-down menu, select Create components set

Add variants properties

To begin, we’ll add three variants properties to our button component: icons-button, dropdown-button, and close-button.

  • First, select the Component set.

  • Head to the Variants section in the right-hand sidebar.

  • Hit the three dots icon in the right corner of the Variants section, and select Add new property.

We’ll create three properties and rename them with the following names: i cons-button, dropdown-button, and close-button.

To rename a property, just click on the property name and type your property name.

Here’s our Variants Properties :

Next, we’ll add our variants values. In our example, I would like to add Boolean values: True/False.

Add variants Values

  • Let’s select our Component set and go back to the Variants section.
  • Double-click on the first property value which is Default and rename it to False.

  • You can repeat this process for all the other Properties values.

Apply Variants Properties

Next, we’ll apply the properties we’ve created to our Variants.

  • We’ll select the first variant.

  • Let’s go back to the Variants section.
  • For our first variant, well keep it’s properties to default

  • We’ll move to our second component and change the first property icon-button to true.

We’ve changed our value icon-button to true because our variant has an icon.

  • Let’s select the third variant and change the second property dropdown-button to true.

Again, the reason we’ve changed the value dropdown-button to true is because our selected variant is a drop-down button**.**

  • Let’s select the last variant and change the third property close-button to true.

Now, head to Assets tap in the the left-hand sidebar to access our variant.

  • Let’s drag and drop our component set from the Assets panel to our canvas.
  • Go to the instance section in the right-hand sidebar.

To access a specific Variant, we can switch the properties nobs.

Variant one:

Variant two:

Variant three:

Variant four:

That’s everything about component’s variants in Figma. In the next posts we’ll cover more concerning Figma components.

Before you go

Feel free to visit our website captain-design.com where we are sharing generously, ready for commercial use Figma and HTML templates.

You’ll find three things to help you kickstart your next project’s design :

Originally published at https://www.captain-design.com on January 2, 2022.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .