Level up your design systems with Figma component properties

Late 2022 I gave an internal workshop for the Yummygum team. As we’re all about sharing our know-how with the outside world we decided to turn it into a blog post.

About two years ago the entire design team at Yummygum took the plunge and moved from Sketch to Figma as their new main design tool. Not just for visual design, but also for wireframing. As a digital agency we were both impressed by and drawn to the way Figma went about components in design systems. And that was largely due to the degree to which it allowed us to mirror how we had been creating and using components in our development process.

Components on steroids

A few months back Figma took components to the next level by expanding the available Component properties. Before this update, design systems could become cluttered very easily due to the large amounts of states and variants that were required. With this latest update Figma now allows users to take even more control over the modifiable aspects of components, aka…  Component properties. More specifically, the creator of a component is now able to determine which parts of the component can be changed by others. And by ‘others’ I mean people who’ll be applying and using your design system.

But not only does it benefit and help the people using components. It also helps designers, the creators of the components and design systems they're part of. Instead of the exhaustive method of capturing all combinations with numerous variants, component properties actually give depth to a design system. Let’s have a look at each of the properties you can make editable/adjustable for your Figma components.

Variant property

Variants have existed for a while now. And where you probably have (excessively ;) )  used the variant property before, Figma aims to bring more clarity and focus for the use of the Variant property. In other words, the Variant property has a more specific and more designated purpose as part of a group of properties. 

This new function allows them to be used in two main ways:

• To represent the different states of interactive elements, such as the default, hover, focus and disabled states of a button. 

• To create different versions of a component, such as changing its border radius, size or color. This can be useful for creating a variant for dark mode and light mode, for example. This also comes into play when you work with the Atomic Design methodology.

Text property

The text property allows you to modify text right from within the properties panel, rather than making changes directly to individual layers. When combined with nested properties (What I’ll explain in more detail later on), it becomes simple to make high-level changes to text. This is especially useful for less experienced or technical users, like marketeers, who want to quickly edit text without having to navigate through a complex layer structure.

Boolean property

A Boolean in the original sense of the word is a data type that allows two possible values, which in most cases is true or false. That same logic applied to the Boolean property. 

Just like how you would use a true/false boolean for the variant property, the Boolean property itself shows its true powers whenever there is a preferred default value. For example, if a search field component is more often displayed with a magnifying glass icon than without, the preferred default displays the magnifying glass icon.

Instance Swap property

With instance swap you no longer need to double click/cmd click in layers. Instead of diving into layers of a specific component, instance swap makes it possible to swap instances in the sidebar. Which means you no longer have to overwrite a component. This is particularly convenient when you have complex components like a top- or sidebar.

Nested properties

Nested properties allow you to directly view and edit the properties of nested components within the top-level component, saving time by eliminating the need to click through multiple layers. This makes it easier to manage and work with complex designs.

Benefits of component properties

So why are component properties useful for your design system again?

Reduced complexity in design systems

By making changes to specific layers within the component, you can significantly reduce the number of, say buttons in our design system from 16 to around 8. It allows you to declutter your design system and eliminate unused or obsolete elements. Needless to say this doesn't apply to just buttons. It applies for many types of components. And this will save a lot of time in the long run. Which means; more time to focus on actually designing. 

A word of advice: previously, component variants showed all available options by default. Using component properties eliminates the need to display all options. As a Figma design system user, you must carefully understand which options are available. At Yummygum we handled this issue by placing an instance next to the variants. By doing this everyone using the design system can play around with the property settings to see what options the component allows.

Easy to update

Since the properties are now easy to edit in the properties panel even a Figma novice can effortlessly make superficial changes to a design without worrying about breaking something. This means you no longer have to dive into the layers of the designs, which can also make your workflow much more efficient because you can change components with a few clicks.

Getting started

Now that you know the basics of component properties, it's your turn. I'm very curious what you make of it and what you'd like to see added to component properties in the future.

The abovementioned component properties are now in open beta. You can currently turn the component property feature on in the component configuration modal. Or you can navigate to your account settings and turn the beta feature on/off there.