Prototypr

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

Follow publication

Member-only story

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!

Create an account to read the full story.

The author made this story available to Medium members only.
If you’re new to Medium, create a new account to read this story on us.

Or, continue in mobile web

Already have an account? Sign in

No responses yet

Write a response