Everything you wish you knew about Figma variants
Tired of treating Figma like a glorified pen and paper? Me too.
Quick and dirty designs have their place in ideating, but that won’t get you the productivity that professional designers can achieve.
If you want to hand off designs that are quick to implement in code and help you make other designs in the future, you need to go beyond just copy-pasting your frames.
That’s where variants come in!
But what is a variant and how can it possibly be better than my trust ⌘C + ⌘V? Good question; let’s get into it.
Need to Know Terms
Components
A component in Figma is simply a re-usable design.
You’ve probably seen these before, they’re those purple icons that show up in your layers.
The main things to know here are that the component definition is the original design that defines the component, while a component instance is an individual re-use of that component.
Change the definition and all the instances change to reflect it.
Variants
A variant is a different version of a component.
Most simply, you can think of a variant as an entirely unique component that is grouped with one or more other variants in a component set.
These variants can be either almost the same as each other or entirely different, but usually they represent different states that a single component can be in.
Variant Properties
Each variant of a component is defined by its variant properties.
These variant properties are essentially variables of a component that can take different values.
It’s easier to show rather than tell:
Here, you can see that a single component (Square) has a property (Color) that can take two values (Red and Blue). This gives us two variants.
We can also increase the complexity by adding another property (Letter) that can take three values (A, B, and C). This yields 2 x 3 = 6 variants.
How to create variants
1. Create a component
Take a Figma design, like this button.
In order to turn it into a component definition, we can either Right Click → Create Component or use the hotkey ⌥⌘K.
We can tell this worked because our design’s root layer now shows a purple component definition icon.
2. Add a variant property
To create a variant of this component, we first have to give it a variant property.
For this example, we want to give color options to our button, so we create a Color property.
To do this, we go to the sidebar and select Properties → + → Variant.
We can tell this worked because our component is now surrounded by a dashed purple line and wrapped in a component set layer.
We now have to rename our default property and value from “Property 1: Default” to “Color: Blue”.
To do this, we click the settings icon next to our property. This lets us change both the property name and the current value.
3. Add a new variant
To add a new variant, we can select an existing variant and hit the purple “+” that shows up next to it on the canvas.
This does a few things all at once:
- Creates a new value for a variant property.
- Duplicates the originally selected variant within the component set.
- Assigns the new variant the new variant property value.
Now, we can similarly rename the new value, and modify the new variant to match it. In this example, we name the new value “Red” and make the component red to match.
Organize components on the canvas
Variants are a powerful tool in your Figma arsenal, but they can quickly get out of hand and absolutely annihilate your canvas.
To prevent this, it’s important to learn how variants exist on the canvas itself.
Simply put, variants are just the top-level layers within a component set layer.
Icon-wise, the component set will have the four-section diamond icon that non-variant components usually have (or some other purple icon depending on auto-layout, etc.), and the variants themselves will have a single diamond.
The most interesting thing we can do with this information is realizing that the component set layer is just an auto-layout node under the hood. This lets us organize our variants very easily.
First, we can activate auto-layout on the component set to place our variants in an organized and reasonable way. To do this, go to the sidebar and select Auto layout → +.
From here, you can organize your variants however you want. I usually choose put in some padding and gap, and I set the layout mode to wrap so it can be laid out in two directions.
Another improvement we can make is recolor the border to match the rest of your canvas. Feel free to make it pretty!
Creating instances
Now that we have our component definition with a few variants, we’re ready to use them in our designs!
The easiest way to use a variant is to ⌥ + Drag a variant from our component set into our new design. This automatically creates an instance of our component with its variant properties set to those of the variant we dragged.
Another way to do this is to ⌘C + ⌘V your variant (funny enough, exactly what I told you not to do at the beginning of the article). Instead of just copying the design, this actually creates an instance as well!
Variants in code
How do these variants end up working when they’re coded up?
You’re likely a designer who has to hand-off designs to devs, or, like me, a designer-developer who brings features from design to production in one go.
For designers like us, the process of designing doesn’t end in Figma. It turns into hours of back-and-forth between design and development just to get the Figma design implemented in code.
That has led me to annoying mistakes in translating the design to code, and major headaches when the design changes and the code doesn’t, or vice-versa.
I made a tool called Vivid to make sure that doesn’t happen and to take advantage of all the variant logic we designers put into our designs. Just select a design and get all of it in code — including the variant logic you spent your valuable time defining.
I made it free to use, with a 30 second setup.
If you’re running or working on a larger project, you can get free access here.
My email’s jorge@vivid.lol if you want to give me thoughts!
Changing instances
Once you have some instances in your design, the work you put into your components really starts to shine.
The first cool thing you can do is to go into the component properties of an instance and change them to switch to a different variant.
This lets us rapidly iterate new states for a design. Disabled modal? Just swap all the buttons to their disabled state. Danger alert? Just put all your components in their danger state.
If an instance you’re using needs a lot of customization, you can always tell Figma to treat it like a non-component design instead.
To unlink a design from its component definition, you can Right Click → Detach Instance or hit ⌥⌘K. Then, we can edit it as if there was no component in the first place.
If detaching instances is too much, say you just want to change sizing, text, or a color, we can use overrides.
Overrides are just changes that Figma tracks on an instance which make it different from its definition.
Basically any change that doesn’t add new layers to an instance is possible, however, I would recommend you only override the top-level layer of a component.
Any changes to more deeply-nested layers are better expressed as new variants (which you now know how to make!).
