Just as you were hoping, Variants will be available soon (next release 2.10)!
We’re all excited, including us, the Penpot design team, to optimize our design system with variants. With variants AND tokens: a dream come true.
In this post, I’ll show you how to prepare once Variants are released so that you can take your design files to the next level. Before that, I’ll give you a small intro to the importance of this long-awaited feature.
Why is this feature great for you?
As a designer, you just don’t WANT clearer libraries; you NEED them. A well-organized design system is essential for efficient workflow. It’s easier to navigate that way; it helps you spot states you haven’t designed yet or components that (OH NO!) are duplicates.
Nobody wants to scroll endlessly through a component list searching for the one they need. Instead, you should be able to select components logically, based on specific properties. This becomes even more critical when the person consuming the design system is not the same person who created it or maintains it. They shouldn’t need familiarity with every component. Instead of browsing folders, they should simply choose what they need, and that’s it.
The last reason, but not the least: An input error is not a different component from input hover; they are just different states of the same component. This way of classifying elements keeps designers and developers in sync, enabling better communication through shared terminology.
So what exactly is a variant?
Variants are pieces of the same design system that differ slightly from each other and share the same set of identifying properties.
Buttons that have multiple levels (primary, secondary, tertiary), states (default, hover, focus, disabled), and icon alignments can be transformed into a singular component with variants.
Those characteristics: level, state and icon alignment are properties. Each variant is a unique combination of values across those properties.
Think of an infinite-dimensional array… and now stop! 
How do you get from the old system to the new one?
Without variants, you had to be very precise with the nomenclature used for your components.
One great thing about this release of Variants is that you can now transform this nomenclature into values for different properties.
And to go the extra mile, we’ve built a feature that allows you to transform components into variants in bulk from the root of your choice: COMBINE AS VARIANTS
This functionality allows you to merge multiple components into a single component with variants. The shared portion of their path becomes the component name, while the rest becomes property values.
For best results, sorting is crucial. Go to the Assets tab and select the root folder where your components are stored. When all the components you want to combine share the same file path structure, you’ll end up with a complete set of variants with all values populated. Simply name your properties and you’re done!
Get ready for Variants and feel free to leave your comments here once the release is out. Let us know what you think. 
