Figma Tips

Component Properties — Practical Tips

Learn the best approaches when to use variants and properties

So you are already familiar with creating component variants (if not, see the tutorial), now with Figma Config, we have received a new way to expose component customization for our design systems — component properties.

What are component properties?

The first thing you need to understand is that component properties do not replace variants; they are an additional feature that will allow you to design faster in Figma.

To understand the component property feature, let’s use the example of a button. Imagine the one with the icon on the left, the label, and the icon on the right.

To allow customization of instances with variants, you would have to prepare at least 4 component variants. One with both icons and labels, one without heroes, and two with only one icon on each side.

Component properties let you establish all of this in just one component. Sounds like magic!