Figma just released variants. An amped-up version of components override existed initially within most design tools, strengthening our vision of better design system practices more than ever before.
How can it be of use?
Confusing components, back and forth discussion or even outright design inconsistencies are causing friction between work tasks more than we care to admit.
PTSD flashback intensifies Here at OOZOU, we work in an environment that demands a quick turnaround and volatile design system for each active project. Keeping the design system manageable and tidy is critical so that designers can bounce in and out of projects as needed. The variant, a predetermined set of components with customisable elements, could go a long way to reducing unnecessary documentation.
No more fumbling around the colour style combination!
Start with micro-components
You can start by gradually converting any components used to build up an entire foundation of your system into variants. For example, UI elements like:
Buttons
Forms
Tabs
Navigation bar
Dropdown menus
And so on
could all be transformed to variants and provide better accessibility across the entire structure. Variants can preserve your override and get your newly-designed screens up and running without having to touch those messy layer lists within component instances.
Property of each group can be completely customisable.
You can also add comments and attach the components link in case your frontend has a design system set up elsewhere. This could prove to be even handier when you’re dealing with a massive system and couldn’t seem to find anything without asking around first.
Uses documentation on Main components to get other started quickly
The downside of using variants
Creating variants takes time. Consider the workload before creating a set of variants. Oftentimes transitioning the override-able set of components into variants may seem a bit overkill from the start. Making it simpler and better using just a little bit more time However, as the project grows larger and you’re better-prepared to make a judgement of what should or shouldn’t be added into a set of components template, creating variants is indeed the way to go.
