At the end of 2022, Figma released an important update that changed the way its components are used.
This new way of working with components has two main advantages:
- It considerably reduces the number of variants needed for your design system.
- It improves usability for you or for designers who are going to use your components.
Four new properties
There are four types of properties that you can apply to your Figma components:
- Variant is used to create the variants we already know from previous versions of Figma. It saves style changes such as colours, borders, backgrounds or sizes between the different variants as well as to create active or inactive states.
- Boolean is used to make a layer of your component visible or not, so that an icon can be hidden or shown.
- Instance swap is used to show that the content of that element can be swapped. You can define the default value and exchange it for elements from your libraries.
- Text is used to indicate which text layers are to be edited, like the editable text of a button or input.
How to apply properties step-by-step
There are two ways to use these properties in components. You can create them from the component and assign them to the elements it contains, or go directly to the element and create the available property based on whatever type it is.
Component elements are any unit that can be assigned a property, such as a text or icon.
In the following example we can see the second way mentioned above, which is the process with fewer steps. As we can see, with two variants and the properties defined in the menu on the right, you can have up to six applications. Here there are six because that is what the design system of the application requires, but it will depend on the limitations you want the component to have.
1. Create the base component
Start by creating the base component with the elements that you are going to use in its variations, even if some of them are hidden by default. To start working with properties, think about which elements you want to vary and which you don’t.
2. Apply the properties to the component elementsmentos del componente
When you select the element you want to apply a property to, the symbol marked below will appear in the Design menu in the different sections where you can apply properties. Note that multiple properties can be applied to an element. For example, a text can have a different message and be hidden or not.
Here, when selecting an icon, the CTA will pop up allowing you to add a property related to that section. For example, in the section where you select which icon goes on that layer, you can add the Instance swap property, which, as mentioned, allows you to change the icon to one from the selected library. In the Layer section, where you set the transparency and visibility of the layer, you can create a Boolean property. This same thing will happen with each element of the component in question.
3. Check the created properties
Finally, select the component and make a copy to see how it will look for the designers when they use it. Using the menu on the right (the component properties), check that all the variations generate the changes you expect.
Tips for creating properties
- It’s better to leave the variants until last. First, create all the properties and then create the variants with these properties.
- It is very important that when you use icons, to make sure they have the same layer structure and the same name. If they are different, Figma will sometimes not carry over the style of the parent component. In the following example using the Swipe instance property, you can see that, when changing the arrow icon to the plus icon, Figma does not use the white of the main component, but takes the colour of the original icon.
Following the same steps, but changing the name of the layers, the plus icon instantly appears with the characteristics of the main component.
Though it requires a new way of thinking about defining components and using the new properties, once understood, they are very easy to use. With properties, designers will more clearly know which component elements they can edit.
AIt also helps to structure elements and their variants. It completes your design system with good documentation to make it easier to use as it grows.
