The release of the new variants feature in Figma had been highly anticipated at OVO ever since its announcement at Config Europe in September of this year. This was something we had been trying to achieve within our system to maintain a clean and consistent library.

A brief history of (hack) variants within OVO Energy's design system

We had originally built the OVO Energy instance of our multi-brand platform design system by creating a separate library of mixins to host all of the component variants, which were then referenced within a single master component on the main library. This approach allowed designers to select that main component, go down a level and swap out the variant.

While this gave us a clean system, it also led to a bit of confusion, as it required the designer to enable both the mixins library as well as the main library, but they were then instructed to only pull components from the main library. This fast became quite complicated to manage and definitely wasn’t scalable for multi-brand, especially when it came to creating our second library.

Taking the learnings from this, when we started to scale up the system, the mixins file was depreciated and we consolidated everything that we could into a single file.

The Figma library as it stood

As a result of consolidating this file, we ended up with components that ranged from between 2-8 different variation states (with small and regular screens being the bare minimum). This meant there was a strong reliance on the description feature to know which component to use, and in which instance to use it, this caused friction in an otherwise seamless system, it also increased the risk of the wrong component being used.

Using a component

With Figma’s recent instance swap menu update, which moved away from a dropdown to an interactive embedded interface, it made even trickier to navigate between component variations to see what other variants existed. As a result, designers needed to go to our documentation site, or go to the main Figma file in order to know what was available.

How we implemented variants

Tl;dr it was super easy! We were already in a great position with this update thanks to our consistent naming convention. As a result, upgrading to variants was as easy as selecting all variants and clicking ‘combine as variants’, and then updating the state titles.

“Component name / Screen size / State”

The result

Less repetition, and clear individual components to choose from, reducing mistakes and variation swapping when selecting components.

Component usage

Screen sizes are now more obviously a default variant to every component, and complex components have become simplified and easier to use, designers also no longer need to rely on the description to find what they're looking for.

In conclusion

We now have a super clean, refined library of components that are easy to navigate and swap between. You can find out more about Figma variants on their website, and learn how to use them through this handy tutorial video.