vortiqueen.blogg.se - Figma conference

#Figma conference how to#
#Figma conference plus#

This feature helps manage the library with fewer variants.

The boolean feature helps you select the specific need of the component much easier.

If you click on the component instance to swap, it can save the time of double-clicking to select the exact layer.

After playing with it, I realized that it feels great, and the combination of the variants and the new options make it easy to use and manage the library. In the Figma help center, I learned that variants are considered part of the component properties. Initially, I was skeptical about this feature and assumed that component properties had broken the app’s logic. It is not necessary to click on the layers of the components, and we can change many parameters with one click on the component. Using component properties is also useful because we can control many aspects of the component from the properties panel (right panel).

In addition to saving us the time of creating many variants, component properties reduce the amount of work needed to maintain the design system UI kit. Before component properties, I needed to produce 48 variants, but with component properties, I did it with only 12 variants.

#Figma conference plus#

In addition, each has two icons, one on the left and one on the right, plus a text label. Each has 4 states: enable, hover, focus, and disable. The main reason for using component properties is that it reduces the number of variants we need to create for each component to cover all the possibilities.įor example, I created a button with three types: primary, secondary, and thirty. Using component properties, we can build logic within the component that gives us the same options but with fewer variants.

In the past, we had to create a variant for each option. What are component properties?Ī component property is a feature that lets you create many options for each component without creating many variants. To help you better understand this topic, I added many gifs to this article. At the end of this article, I will share two files I built with the feature and some links to learn more about it.

#Figma conference how to#

This guide will show you how to use the feature and when it is useful.