Figma Variants 101

Our team at UI Prep recently optimized our design system to include Figma's new variants feature. We learned a lot about variants during this process and want to share what we found to help you level up your designs!  Keep an eye out for some advanced variant tips and tricks in our next article.

👀 Get our free Button UI Kit, which uses variants, to use as a playground or as the starting point for your next design project.

Before we get started, what are "Variants" and why should you use them?

Variants is a new feature in Figma that makes using and maintaining components that require multiple variations much easier.  This feature is a game changer and should be applied to every component in your design system that has multiple types, sizes, or states.

Before variants

Before Figma released variants there were a few different strategies for creating and using component variations. Each had their advantages and disadvantages, but none were perfect.

Strategy 1: Create a unique master component for every possible variant. For example, creating 50+ master components for every possible button type, size and state.

• Advantage: Very easy to maintain consistency.
• Disadvantage: Over crowded assets panel & instance menu.

Strategy 2: Create one master component and apply property overrides while designing to create variations.  For example, creating one button master component and manually overriding text, icons, and colors while designing to create variations.

• Advantage: Uncrowded assets panel & instance menu.
• Disadvantage: Very difficult to maintain consistency.

Strategy 3: Nest all variations into a single master component. For example, creating a unique frame for 50+ buttons and stacking them into one master component. Then, turning the visibility of each variation on/off in the layers panel as needed.

• Advantage: Uncrowded assets panel & instance menu. Easier to maintain consistency.
• Disadvantage: Cumbersome to use and maintain - text can not be preserved when switching between variations.

After variants

Figma's new Variant feature has all of the advantages from the previous options, with non of the disadvantages. That means components with multiple variations are now easier than ever to use and maintain.

Strategy 1: Create a unique master component for every possible variation and turn them into one asset by combining them as variants. Then, add an instance of the asset and select the desired variant properties in the design panel.  For example, creating a unique master component for 50+ buttons and combining them as variants.  Then adding the "button" instance from the assets panel and selecting the desired "type", "size" and "state".

• Advantage: Very easy to maintain consistency.  Uncrowded assets panel & instance menu.
• Disadvantage: None

How to create a set of variants

Creating a set a variants might take a little more upfront work, but the end result will be a better, more efficient design system that will save you and your team a lot of time.  Fortunately, this new feature is very compatible with existing workflows, so whether you're starting from scratch or converting an old system, it's easy to set up and use.

The steps below describe how to create a set of variants from scratch.  However, they can just as easily be applied to an existing set of master components.  If your existing master components are already organized and properly named, go ahead and jump to step #4.

1) Create & organize your components

To create a set of variants, start by designing every possible variation required for a particular component.  Then, organize all of them into neat rows on a dedicated frame.

For example, a button component with 98 variants (2 sizes, 4 types, 5 icon placements, and 3 states) should look like this.

2) Add layer names

Once you've created and organized all your components, name each component based on its properties and values with the forward slash naming method.  This step is very important as it will determine how the variants are configured later. But don't worry, they can be updated later if needed.

For example, name each button by adding each of its values separated by a forward slash ("/").

3) Turn into master components

Turn every component into a master component by selecting all of them, navigating to the top bar, and clicking "Create Multiple Components".

For example, select all 98 buttons and turn them into multiple master components.

4) Combine as variants

Select every master component and click "combine as variants" in the design panel... and voila! All the components have been combined into one asset.  Once the components have been combined, rename the property names to match their values in the design panel.

For example, name the button property with "Large" and "Small" values, "Size".

5) Edit variants

Variants can be edited at any time to accommodate changes and new additions as your design system grows.

Add more variants: To add more variants, simply create more master components that follow the same naming pattern and drag them into the variant container. Or, duplicate and edit one of the master components inside the variant container.

Change the order of properties: Hover over a property name to expose the grip icon and drag the property to the desired order.

Edit the variant names: Variant names can be edited to update or add values.  To do this, click into the layer name and edit the value without disrupting the new format (Property=Value).

How to use variants

To use your variants, add the combined component from the asset panel and select the desired properties in the design panel.  One of the best things about using variants is that overrides, like changes to text or icons, are preserved when switching between variants.

For example, add the "button" component from the assets panel and select a new size, type, icon placement, and/or state.

See for yourself

Get the freebie below to see variants in action. Included in the file (.fig) is the entire button component system from UI Prep's Design System. Use this freebie as a playground to learn how to use variants in your own designs or use this file as the starting point for your next project.

👉 Get the (free) Button UI Kit here