A better way to use component properties in Figma!

A quick tour of how I reduced my button variants count from 225 to 45 button instances.

You may already be familiar with what I am about to explain, but I, an animal of habit, have gotten used to my way of building components and have become the best at repeating them.

After many months of building dozens of variants for my buttons, I decided it was time to give a chance to the “new” features that Figma had been insisting on showing me and I insisted on ignoring them.

So far I have been using “Variant” and “Boolean” to build my components.

This article is about my exploration of these property types and the attempt to reduce redundancy and create more maintainable components.

Count

A few months ago I decided to count the number of variants I had made for a simple set of buttons. I had:

1. Primary, secondary, and tertiary buttons.
2. Small, medium, and large variants.
3. Label only, label + icon, icon + label, icon + label + icon, and icon-only variants.
4. Enabled, Disabled, Focus, Hover, Active.

Well:

3x3x5x5 = 225 variants.

The 225 variants way

I start by creating the Primary variants:

Primary button variants

Then the different states:

Primary button Enabled, Hovered, Active, Focused, Disabled

Secondary and Tertiary:

Secondary and Tertiary button groups

And finally, the Large and the Small variants:

Medium, Large and Small buttons

And there you go, 225 variants.

Pros:

• I will only have to play with a list of 4 properties (as in the picture below) to get to my variant.

Cons:

• Well, 225 variants.
• I need to dig the individual button instance layers to change the icons.
• The button label can only be changed directly on the button (the limitation is to have ONLY this one option).
• Time-consuming to make batch edits (I.E. tweak the padding of all Medium buttons).

These are the options you will get for your button instances

Same results, 45 variants!

I started with a button with all possible elements inside.

Primary Medium Icon+label+icon Enabled variant

The Label

For the label, I created a Text property. This allows me to edit the button label text ALSO straight from the Instance options/properties panel.

The component property can be named whatever you want

The Icons

For the icons, we need a Boolean (need or not the icon) and an Instance Swap (which icon, change here)Property. The first Boolean asks if the user wants the icon-left ON. The second asks the same about the icon-right. If any of the Booleans is ON, then its Instance property will allow us to pick a different icon. This way we can choose different icons for left and right positions.

With 1 you will enable to choose the icon straight from the instance options/properties panel. The 2 is used to enable/disable it.

2 is used to enable/disable it.

1 is used to choose the icon straight from the instance options/properties panel

I then hid the icons et voilá, my default button is ready!

Pros:

• Easier to maintain.
• Faster to build.
• Icons can be changed straight from the properties panel.
• Button text can be changed straight from the properties panel.
• Fewer variants, faster Figma.

Cons:

• Well, you have a few more dedicated options in the instance properties to play with..

The icon-right instance selector will only show up if/when the “icon-right?” has been activated.

Conclusion

There is still work to be done. It is not justified to still have to build 45 variants when the difference between them is a background color or padding.