Finally, I shared some pro tips, such as naming the properties and some links and files to learn more about the feature.Did you know that knowing how to prototype is an essential skill that every UI/UX Designer should have?. I showed you how you could create and edit the properties. Next, we looked at each property in detail and showed you how to use them. First, I explained what they are, what they do, and why we need them. In this guide, I covered everything you need to know about component properties in Figma. Figma Component Properties Playground file. Figma help page about component properties. Component properties from the Figma Youtube channel. Maybe some designers won’t know what the table can look like if not. But if we’re talking about a complex component like a table, here we should also show examples in the UI kit. Basic components like buttons aren’t needed it because they have a basic and common design. The ability to see all the variants: Designers may not always be aware of all the options available for a component. The ability to swap variants directly from the properties panel: This essential feature will allow users to adjust the components without changing an entire component. The example above shows only 12 variations of the button instead of 48. 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. 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.
This guide will show you how to use the feature and when it is useful.
0 kommentar(er)
