Figma A Guide To Component Properties | by Anna Rzepka | October, 2022

cover image with component properties icon

TeaThe best part about Figma is that it is constantly improving. Time and again we get spoiled with new functionalities. Today I want to introduce you to some of the latest additions to the Figma arsenal: component properties. These new features will help bring your libraries one step closer to perfection 😉

You should already have a basic understanding of how components, instances, and variants work. If not, there’s no need to worry: this article can help you get started.

Properties are now available to everyone in open beta. They allow you to replace specified parts of your components. For example, you can change the text, decide which elements should be visible, or use a predefined set of instances for swapping. All this is accessible with just a click of your mouse.

enable component properties
enable component properties

In other words, component properties are the options you can put in yourself. design Panel. They eliminate a lot of tedious clicking through the canvas in search of the perfect layer. Using them will reduce your number of variants. And it can greatly help your file performance. Plus, the new properties better align the design with the code.

There are four types of component properties: type, Basic lesson, boolean And Example swap,

1. Variant Property

When your components have different sizes, colors, or styles, you use variations. If you are into prototyping, interactive components with variations are your best friend.

components with variants
components with variants

2. Text property

Back in the day, you would Command-click a text layer and press Return to edit its contents. You can also browse through the myriad elements it contains Layer Panel.

When you need to convert multiple layers at once, you have to use a plugin. Currently, you can bring up component text inputs on the sidebar and edit multiple instances at once.

Take this speech bubble component. Select the text layer and from design select panel create text property In Subject section. This property will be visible in all your examples. When it comes to batch editing, this is a real time saver!

create text property
create text property

3. Boolean Property

This can be a little confusing. We can already set the property true or false on the variant. Added a handy toggle control design Panel instead of the default dropdown. But the user was about to define the logic behind it. This may mean whether the layer is visible or not. It can also mean, for example, something round or square, vertical or horizontal, and so on.

The new Boolean property looks similar but behaves differently. It always toggles the layer visibility within your component.

Here we have an illustration component with a speech bubble. When you add a boolean property, you can quickly show/hide it in your examples.

create boolean property
create boolean property

One thing to note is that this feature doesn’t work with interactive components and prototype connections. For example, if you want to animate an icon to appear when you hover over a button, you need to use variants instead.

4. Instance Swap Property

This is by far my favorite. The swap property allows you to create a collection of preferred instances. You will no longer be faced with an overwhelming number of options when editing your master instance.

This is handy when you work with complex components. Without a lot of additional documentation, every designer on the team will know exactly what they can interchange.

Selecting preferred values ​​for example swap property
Selecting preferred values ​​for example swap property

There is one more thing. You can set all of your properties to be available at the component level—no more digging layers panel to find out what can be tweaked.

Select the main component and click the plus icon to highlight the nested instance properties Property section. Then, select the examples you want to appear at the top level.

Editing properties of exposed nested instances
Editing properties of exposed nested instances

Ok, but how can this be used in a design system? you can ask;)

Well, editing properties is an inherent aspect of a systematic design approach. And the new text, boolean and swap properties can significantly simplify your libraries and make your life easier.

For example, take buttons. Designers used to create franken-components with a variety of forms. One for each state, one for the version with a leading or trailing icon, one with a label, and so on. These components can go crazy with an overdose of the ingredients. Using properties prevents this uncontrolled component growth.

Button component with new type properties
Button component with new type properties

You can also use properties with placeholder components. Here you can find a brief overview of what is possible:

Placeholder components let you mix and match objects. You can also change the structure of the instances without changing the component.

Using component properties with placeholder components
Using component properties with placeholder components

The Finishing Touch: You Can Declutter Your layers Hide the names of instances without panels and properties. Figma assumes that elements without properties should not be edited. However, you can still expand and edit these layers if needed.

simplifying examples
simplifying examples

Figma introduces some exciting features that will make organizing your libraries easier. New component properties help streamline text editing, limit the number of variants, and speed up instance configuration. Now you can focus on the design rather than being distracted by the avalanche of elements to install. And if you share your files with other designers, it will allow you to collaborate more efficiently without much guesswork. Try!

Leave a Comment