Figma: Best Practices for Variants in Your Active Design System

We all love updates to our favourite design tools. However, getting it done in a reasonable timeline is another matter entirely.

Design Tools

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.

Looking for a new challenge? Join Our Team

Like 3 likes
Gavin Chiemsombat
I'm a full-time Product Designer (and a Front-end enthusiast) at OOZOU in Bangkok, Thailand

Join the conversation

This will be shown public
All comments are moderated

Get our stories delivered

From us to your inbox weekly.