Usage of Variants in Figma

Hey there fellow designers,

I want to try out using variants for the new design system i’m building. Before i start, just wanted to know the best approach in using variants for the below scenario.

Buttons - Should the types ( Primary, Secondary) be treated as a property ? If so, then how can i push a change that would reflect on all buttons ? Let’s say a change in the border radius.

Also, if they are to be treated as properties, i would need to handle states(hover, disabled etc) as properties also right ? Wouldn’t that be too much of elements in the design system (2-Dimensional Array of elements) ?

Hi,

For the specific scenarios you are presenting, I would recommend:

  • Separate components for button types, in order to speed up the insertion of a button (one click vs three with Variants), as suggested in this very helpful talk.
  • If you go for a single Variant, you can use “Base components” to help with maintenance. Also a talking point of the Schema replay shared above.
  • States in properties: yes, or if your target is very experienced designers, you can also follow this article’s method to build (very) complex components. The article presents a rule in order to choose between Variants or no Variant, but for much more complex cases than a button.

In general, before using Variants, consider:

  • Ease and speed of use for users
  • Maintability for you

The result is a balance between the two, depending on your context.

For every component, I always have a Master component, with a dot prefix to prevent it being published. If you have different sized variations, you may need more than one master. Each one of my variants contains exactly one child element, this master component, but with different colours / layers turned on/off depending on what variant it is. That way you have complete control over all spacing/alignment/border radius etc in a single component, while having as many variants as you want. For your case, I would have a ‘state’ property (default, hover, pressed, disabled), then a ‘type’ property (primary, secondary, tertiary). So 12 variants in total. You could then add another property ‘has icon’ true/false which would mean 24 variants.

1 Like

Wow thanks. Thats some good info and thanks for the link.

I too am about to start using variants and this is very helpful.

The statement is easy, you need to optimize repetition, if on each variant you are declaring over and over, auto layout padding, border radius, text and others… definitely, that deserves being componentized. So, yes, every time you spot these patterns, possibly a master component is appearing, variants are to be taken seriously in terms of code or effort repetition. So for me perfect mix is . Master and variants.

This topic was automatically closed after 30 days. New replies are no longer allowed.