5 Tips using Figma Variants

November 21, 2020
Source : Figma

Variants for Figma is a powerful to to organize and use your components more easy. You don’t multiple levels of folders but organize it into one! So here are some tips from trying out Figma variants.

1. Choose not to use variants

Variants is great. It makes your asset menu super simple. You can switch to what you want really quick with the options. The big down side is that you don’t know what is inside the variant until you try. Unless you know it very well. So you need to choose when to use combine to variants.

Basic rule would be not use it for components that need to check the picked visually. For example of you have a bunch of payment icons. You can name them. But it’ better to see the full list in the assets panel before you bring it your file.

Components better to be identified visually, tt should not be combined as a variant. If you hide inside your variant, your users(fellow designers) might try every variant to find the right one. So choose wisely.

2. Combining to variants. Just do it.

Press that button!

If you have a complex component that consist of different size, state etc. You would be tempted to structure it. That it would work right away when you migrate existing components.

I found it easy to just migrate and fix after. By adding properties and changing naming of properties and variants. The important thing is the layout of your existing components should be in a logical. So you can easily select multiple components(now variants) and edit.

Source : figma

Why do it later? I found you would need to edit order of properties, remove some redundant properties or variables most of the time. And found it more easy comprehend the structure. And it was faster more me to do it this way.

3. Use booleans

Your team would appreciate if you setup toggle switch for the variant. It makes the finding the right variant much more faster. You can do it by setting your variant as ‘True’ , ‘False’ or by ‘On’, ‘Off. I found it easy to use True/False as than On/Off

4. Order your properties

Source : Figma

As a UX designer, you should think about your users right? Reorder your properties that it’s easy to use. Especially when you have a complex one.

Also order with consistency. For example, if you have platform as property. Put in the same order as rest of the variants. Or set a logical order you would use. I order it for example ‘Platform-Size-State-Extra options’

5. Beware of size

If you have variants with different sizes. And change the property with different size. It won’t retain the original size obviously. So it’s better to place the property order more to the top. And one other tip is if you have create an instance and changed the resized the variant. It will remember the overrides for that variant.