Prototypr

Prototyping, UX Design, Front-end Development and Beyond 👾 | ✍️ Write for us…

Follow publication

Member-only story

Figma Tips

Component Properties — Practical Tips

Learn the best approaches when to use variants and properties

Thalion
Prototypr
Published in
4 min readJul 20, 2022

--

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.

button variants made old way

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

--

--

No responses yet

Write a response