Previously, I was learning to create a design system and while learning the whole thing, I found Variants from Figma and to be honest I got amazed by it, it makes the whole design system much easier to alter. If you don’t know anything about Variants don’t worry just read this article till the end.

What are Variants?

In simple words “Variants make Components Smart” which basically means that you can create a design system much more easily and effectively if you use variants with components. Read More

Why Designers are Using Variants?

By using Variants in the design system designers can make their design system more responsive and easy to use. Variants provide various features which make the designer choose, edit, and alter components from the panel with just a few clicks which otherwise will take more clicks.

Let’s Create Variants in Figma

Let’s understand the process of making the Variants so that you can save the precious time and effort that you will waste If you don’t use the variants.

1. Create Your Components

Variants work with components, so the first step is to create components, If you don’t know about components and how they work in your design system. Read This.

I always recommend using Auto-Layouts for your components as it makes things much easier and more fluent, If you don’t know to create them read my article to learn designing Auto-Layouts.

2. Combine Them as Variant

The next step is to select all the components that you think are suitable for creating a variant and then click the “Combine as Variant” option in the properties panel.

3. Enjoy the Variants

Now You’ve successfully created a variant, now you can create an instance of the component by selecting and duplicating the component, and then you can alter the component as per your need from the properties on the right.

Naming Convention of Variants

You can either create variants manually, or you can try a more smart approach of making the variants using the Naming Convention, where you can use the / and define different properties of variants by just labeling the components.

Different Properties of Variants/Components

Variant’s important part is its features or properties in design terms, which you can use to make the components more dynamic and smart and much easier to edit and control. Let’s learn some of its useful properties.

Boolean Property: Allows You to Show/Hide Content

Boolean property helps a designer in creating a component that can show or hide elements within it as per the request, in the above case I designed a button that can either show or hide the ellipse icon based on the request.

Text Property: Allows You to Edit Text from Panel

Another Property I use the most is the Text property which basically allows you to edit the text or label of the button from the properties panel. If you wanted to learn more shortcuts read the article below by figma.