As a designer who has built component libraries for client projects, I’ve asked myself before, “How do I communicate the intended use of this component without wrong content being brought in or intentions being misused?” Then late last year, Figma read my mind and introduced component properties! Figma’s addition of component properties allows components to contain predefined configurable properties — so designers can work smarter, not harder.
I must admit, I was intimidated at first: I found it difficult to identify the differences between variant and component properties, and when to use each within building components. Ultimately I found that the two work together to create and organize a powerful system for component management. Jumping right into the Figma file helped me understand, and I am excited to have the opportunity to adapt component properties to my own workflow!
Let’s dive into what component properties are exactly, and how you can use them to enhance your work in Figma.
What are Component Properties and Why Should You Use Them in Figma?
Component properties are predefined controls within a component. As a designer, they allow you to configure which part of the component can be changed by setting up properties. You can control aspects such as which layers are being displayed, asset instances that can be swapped, and text strings that can be edited. When designing within a components instance, these controls are reflected in the right-side design panel, making it clear which properties can be edited.
Utilizing component properties in your product’s design system allows for less maintenance, which saves time within production and helps maintain consistency and accuracy within your components.
By having variants, you must create each possible variation of the component (considering property and value combinations such as color, icons, state changes, size, etc.) which is made for large design systems and requires keen maintenance. Introducing component properties helps reduce the complexity.
Figma Component Property Types and Set-Up
With Figma’s component properties, you configure each at the main component so designers using your product’s component libraries know what the possible controls are and can make edits or modifications to the components.
There are three types of component properties:
- Boolean Properties
- Instance Swap Properties
- Text Properties
Boolean properties allow you to set true/false values within your component on a single layer. This is a great way to reduce the size of your component libraries.
Instance Swap properties allow you to indicate which instances within the component can be swapped for another instance within a shared or local library. You can even set preferred instances so you can let your designers know the appropriate content you can swap out for.
Text properties can be used to indicate which text layers within a component can be edited. This is my favorite addition, as it takes out the guesswork when looking at which text layers can be edited.
Tips and Tricks for Using Figma Component Properties
Getting started with Figma component properties for the first time? While adapting component properties to your own workflow here are some tips to consider:
- Order the properties by the order they appear within the component.
- Label layers similarly to how you label the component properties.
- Start big and then take away: First, understand what component is available and where there are variables, and simplify from there.
- Utilize nested instances within a component to reduce the number of clicks it takes to expose what can be edited.
Getting Started with Component Properties in Figma
Check out our video tutorial on how to get started with implementing component properties into your Figma workflow:
