Component Properties

In May 2022, Figma released an update for Component Properties. We’ve since then implemented them into the structure of our components.

Component Properties assign names and values to elements that can to be customized in a component, such as:

An icon that can be swapped.

A text layer that can be updated.

An element’s visibility that can be toggled on/off.

Variants vs Properties

Our components are now powered by both Variants and Properties, the overall value of which we’ll go into later.

Both types have a use. Variants control the styling and state of a component while Properties control customization of the components elements like Text, Icons and other Sub-Components.

⁠

Usage

To explain the usage of our new components we’ll take a look at the first one we built using Component Properties. The Button component has taken the multiple components that we had in the previous component file, and turned them into one.

⁠

Booleans Properties are used to toggle the visibility or presence of an element within a component. We use this in our Button to toggle the Icon, Label and Logo sub-components.

We add an Icon to the component by toggling it in the Button Controls:

⁠

Instance Swaps are used to customize a sub-component. In our Button we use this to change Icons and Logos:

⁠

⁠

Lastly, Text Properties are used to customize text elements in your component. We use it to edit the button label:

⁠

Benefits

In general, we hope that overall usability will improve across components. For example, a user will no longer need to click into each element individually to customize it. Sometimes the Text on your component can be layered deep and you have to click 40 times to customize it. Now we can customize that value straight from the Component Panel.

It also helps in reducing the size of our component files. What used to require 3 different components (or variants) can now be reduced to a single component:

⁠

Including other button styles:

⁠

Developers will also appreciate the similarity that Component Properties have to their Code. They use similar key/value pairs to customize components like we do in Figma:

⁠

Current Issues

We’re currently unable to pull any Brand Logo from the library and insert it into the Button Component.

We have to keep a separate file for the Logos that are meant for Buttons.

If you need a Logo added to the file you can add it to the Contributions Page and we’ll be sure to add it ASAP.

Documentation

The information provided for users to reference has been improved. We use subject appropriate emojis to correlate elements between the documentation and component controls:

⁠

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.