UI/UX Design: The Problem With Variants
The creeping, dangerous problem with Figma variants that most designers don’t know about.
Overview
Variants in Figma are an absolute game-changer, and can save you a ton of time when designing across multiple platforms, formats, and use-cases.
The trouble is that Figma variants have a few fatal flaws that can cause serious issues for you and your team later down the line if you don’t know how to properly address them.
Today, we’re going to go over:
- What variants in Figma are
- How variants work
- The trouble you can get into with variants, and
- How to get yourself out of/work around these issues
Without further ado, let’s get into it.
What are Figma variants?
Variants are essentially different versions of components that you can have in Figma, which are directly related to, and can be referenced from your original component or component instance.
The following is an example:
As you can see, we have a group of variants of the same normal button component to the left, and on the right we have an instance of that normal button component.
I can then take, select a variant property within my right panel, and the component instance on the right will change to match the properties of the associated variant (in this case Variant3 or the blue button from the variant list).
Sounds like a dream come true, right? Not so fast. Let’s take a closer look at this process to see exactly where the issue occurs.
How do variants work?
Let’s start off with a brand new, fresh component that will act as our master for our variants.