How to create component’s variants in Figma
Tags: figmatips, uidesign, figma, figmatutorial
Published: 2022-01-21 00:32:23

---
title: How to create component’s variants in Figma
published: true
date: 2022-01-02 19:54:00 UTC
tags: figmatips,uidesign,figma,figmatutorial
canonical_url: 
---

![](https://cdn-images-1.medium.com/max/1024/0*b1y5G-c3cNWDmm8d.jpg)

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

{% youtube Qkz8XYQZkkw %}

### Create Variants

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

![](https://cdn-images-1.medium.com/max/1024/0*5kwrfrHXw7jpRgOK.png)

- 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**

![](https://cdn-images-1.medium.com/max/720/0*5o5SzTpLbwnEr7oR.png)

### 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.**

![](https://cdn-images-1.medium.com/max/1024/0*XOZz_CjkZfXiaCv7.png)

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

![](https://cdn-images-1.medium.com/max/480/0*90igrMZAQJoWReJ5.png)

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

![](https://cdn-images-1.medium.com/max/234/0*JHkpdBV7X6qZHJlp.png)

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 :

![](https://cdn-images-1.medium.com/max/488/0*cV45rnvAjVeliCut.png)

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

![](https://cdn-images-1.medium.com/max/476/0*dO9hrrE2x2NKFa1z.png)

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

![](https://cdn-images-1.medium.com/max/478/0*wQhmpf5iKm7KTF2Y.png)

### Apply Variants Properties

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

- We’ll select the first variant.

![](https://cdn-images-1.medium.com/max/197/0*XWh-PKMgsiojZ-gj.png)

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

![](https://cdn-images-1.medium.com/max/238/0*o2A6kfrIKHdY1sbz.png)

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

![](https://cdn-images-1.medium.com/max/149/0*qVPGhV8E2Fq6LyLB.png)

![](https://cdn-images-1.medium.com/max/240/0*RbIg6EKz4XyJWGFi.png)

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

![](https://cdn-images-1.medium.com/max/147/0*lpixQ10HSzeRPXq_.png)

![](https://cdn-images-1.medium.com/max/233/0*7rSCm_OcQJ5m61yQ.png)

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

![](https://cdn-images-1.medium.com/max/121/0*FWSf2dNtbf_15xqO.png)

![](https://cdn-images-1.medium.com/max/243/0*78XNqrxqBJ1Fpl1L.png)

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

![](https://cdn-images-1.medium.com/max/243/0*2DSgkmLiyJwphCbq.png)

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

![](https://cdn-images-1.medium.com/max/241/0*xljUbyuT1DYYvIhq.png)

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

**Variant one:**

![](https://cdn-images-1.medium.com/max/972/0*zSQikCDmp5qzZ8TJ.png)

**Variant two:**

![](https://cdn-images-1.medium.com/max/972/0*7k1nGnch1-dkIzhm.png)

**Variant three:**

![](https://cdn-images-1.medium.com/max/972/0*EiWY03EQh4yGag-O.png)

**Variant four:**

![](https://cdn-images-1.medium.com/max/972/0*MtoeasfyoGA47dRQ.png)

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**](https://www.captain-design.com/) where we are sharing generously, ready for commercial use [**Figma and HTML templates**](https://www.captain-design.com/).

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

- [**200+ free Figma templates**](https://www.captain-design.com/templates/) **.**
- [**Free Html + Bootstrap 5 templates**](https://www.captain-design.com/templates/tag/html) **.**
- [**Amazing Figma Plugins and UI kits**](https://www.captain-design.com/uikit/) **.**

_Originally published at_ [_https://www.captain-design.com_](https://www.captain-design.com/blog/how-to-create-components-variants-in-figma/) _on January 2, 2022._