The component properties feature of Figma is powerful but can feel somewhat unintuitive at first.
While there are quite some resources online and offline about this topic, few give real-world examples to help us truly understand it. So I created this hands-on tutorial to show you how this feature can boost your design workflow.
Table of Contents
Prerequisites
To follow along, you should have some basic knowledge on Figma in general. You should understand what a component is and how to create one in Figma.
If you're new to Figma, don't worry, check out this beginner guide before getting back to this tutorial.
What Are Component Properties
Component properties are styles and/or content of a component that can be changed to create variations of the component.
They can be the content of some text, having or not having a nested component, the specific type of the nested component and so on.
By applying those properties, we can create sophisticated component libraries out of limited number of components, which is a great time-saver.
Types of Component Properties
There are four types of component properties:
- Boolean Property
- Instance Swap Property
- Text Property
- Variant Property
We'll examine each of them closely.
Boolean Property
This property controls whether something is visible or not. To be precise, it shows or hides a layer of a component. So anything of the component that appears in the Layers panel can have this property applied.
Example
Suppose we have componentized a button with a text label and an icon. We want to be able to create variations of the button with or without the icon.
Breakdown
1). Double-click the icon to select it. In the Layer section of the right sidebar, click the Create boolean property button.
2). Give it a self-explanatory name, such as Show Icon, leave the Value as it is and hit Create property.
3). Now the property is added to the icon layer and appears in the Layer section of the right sidebar.
4). Create an instance from the button component. A switch for the property appears under the component name in the right sidebar. We can use it to toggle the showing and hiding of the icon.
Instance Swap Property
If Boolean property controls show or hide, then Instance Swap property controls what to show. In the button component example above, we may want to change the icon in practice to fit our needs and this is where the Instance Swap property comes in handy.
Example
Let's build upon our button component example. But before we start, as a pre-step, add a couple of icons to our canvas and componentize them (you can go to Plugins, search for icons, pick a library and arbitarily add a few icons to the canvas).
Breakdown
1). Double-click the icon to select it. In the right sidebar and next to the name of the selected icon name, click the Create instance swap property button.
2). In the modal that appears, feel free to give the new property a proper name, choose the default icon (I'll leave both as they are here) and hit Create property.
3). Now we see from the right sidebar that our new property is successfully created.
4). Create an instance from our button component and from the right sidebar and under the instance name, we can see our new instance property is availabe. Click the dropdown button.
5). Finally, from the dropdown menu, choose another icon and we're done.
Please note that, Instance Swap property only applies to components. If we want to choose an icon from a list of icons, for example, we must first componentize them for them to appear in the instance list.
Text Property
Text property is pretty straightforward. As the name suggests, it controls the content of text. Whenever we want the text of a component to be customizable, we can add a text property to it.
Example
We'll keep building upon our button component example.
Breakdown
1). Double-click the text to select it. In the Content section of the right sidebar, click the Create text property button.
2). In the modal that appears, feel free to give the new property a proper name, set the default text (I'll leave both as they are here) and hit Create property.
3). Now we see from the right sidebar that our new property is successfully created.
4). Create an instance from our button component and from the right sidebar and under the instance name, we can see our new instance property is availabe. We can change the text from the text box here (or you can choose to edit the text directly on the button instance).
5). Finally, change the text to something like Submit and we're done.
Variant Property
Simply put, a variant property is one that is out of the reach of all the component properties we saw above. We cannot use any of the Boolean, Instance Swap or Text properties to control the size or background color, for example, of our button. If we want to have buttons of different sizes and different background colors, we need to create variants of that button.
Example
We'll add a type and a size property to our button component and create a variant for each of the new properties. Follow these steps:
1). Select our button component and click Add Variant from the top menu. First, we want to make the new variant an outline type of button. So we give it an Outline value and rename the default Property 1 to Type from the right sidebar. Change its style to make it an outline button.
2). Next, we want to create a smaller-sized variant for each of the existing variant. Select our component set by clicking the Button tag and drag the border to make it wider. Then, with the component set still selected, click the Create component property button from the Properties section in the right sidebar and select Variant from the menu. Name it Size and hit Create property.
3). Select both of the existing variants, press and hold Option/Alt and drag to duplicate them. In the focused text box in the right sidebar, change the text to Small. Then, with the new variants still selected, resize them in the Auto layout section by giving them smaller paddings and we're done.
4). Now, create a button instance and try out all the properties we've created.
A Challenge
Now we'll get some practice by building a profile card component using our button component. It has an avatar, a title, some description text and a button. It allows us to change the avatar image, the title and the text dynamically and we can access all of the properties we added to the button from within the card component.
Here is what it looks like when finished:
And here are some instances created from it:
Make sure to try building it out yourself but if you're stuck, try these steps:
1). Use the UI Faces Figma plugin to generate a few avatar images and componentize them.
2). Create a rectangle, set its background color to white and give it a shadow if you want. Don't worry about the size or aspect ratio of it.
3). Drag an avatar and a button instance from the Assets of the left sidebar onto the new rectangle, and add title and description text to it too. Don't worry about the positions of the elements as we'll align them later.
4). Now select the rectangle along with everything inside it and componentize it.
5). To be able to access all of the properties of our button, we need to expose properties from nested instances. If you are not familiar with it, check out Figma docs on this. In this case, with the card component selected, click the Create component property button from the Properties section in the right sidebar and select Nested instances from the menu.
Then, check in Button.
6). Now we can tweak the property values of our button.
Follow the steps introduced in this tutorial to create an Instance Swap property on the avatar, a Text property on the title and another Text property on the description text.
7). Finally, align the elements with Auto Layout which is out of the scope of this post. If you are not familiar with it, take a look at Figma docs on this (I'm considering creating a tutorial on Auto Layout so stay tuned). The completed design should look something like this:
Conclusion
In this tutorial, we learned what component properties are in Figma and how to use them to create dynamic and flexible UI. There are 4 types of component properties: Boolean, Instance Swap, Text and Variant properties.
Each of the first 3 properties provides a specific control over a part of a componet while Variant property allows us to tweak the size, the color, the state or other aspects of a component that are beyond the reach of the first 3 properties.
Figma is easy to get started but hard to truly master. I'm considering creating more tutorials covering other important topics on it, so please stay tuned!
Top comments (0)