Figma components with a cat giving a thumbs up

Why Figma Variant components blew our mind

Intro

First of all we want to say how happy we are about Figma. We've long faced this problem of versioning, collaborating and ultimately making our entire design/development journey smoother. With Figma making leaps and bounds in the right direction we couldn't be more stoked to see the roadmap to get us where we are today.

Quick rundown

If you haven't already checked out Figma, I'll give you the worlds quickest rundown as to why you should use it:

  1. It works out of the box with multiplayer - it's not file-based so multiple designers can work on the same project.
  2. It's platform-agnostic - it works on Windows and Apple (for those 3 designers out there that use Windows/Linux).
  3. It has versioning built-in, meaning if you accidentally just pushed a component 3 pixels out... You can revert that.
  4. The sharing capability with both clients and developers is second to none, you can go from primitive components to prototype in no time.
  5. Components/Design systems are a key part of Figma and as a dev/designer this helps a tremendous amount in keeping designs consistent, scalable and all-round a pleasant place to be

So enough of my love-letter to Figma, let's talk about what's new and why it's a quantum leap for the design industry.

You guessed it by the title: Figma introduced a new way to organise components with Variants. Why is it a big deal? Let me tell you in short: one of the biggest issues you'll ever have with Design Systems isn't setting it up. It's organising it. Nobody can ever describe the hell that is manually relabelling buttons to ensure

1 button/default/active/primary

Doesn't get confused for

1 button/primary/active/primary

In a mix of various pages, separate uses and variations of colour, text size etc etc.

Whereas traditionally, you will get multiple variants of the same button within your design library Figma now gives you the ability to reduce this to just one asset with multiple variants. This means you can design faster, scale easier and avoid all the excess bloat within your assets.

Let's hope Figma keeps knocking it out the park with these huge QOL (quality of life) updates, and soon we get a dark mode for this tired developers eyes.