DEV Community

Cover image for A Hands-On Guide to Figma's Component Properties
Jesse Wei
Jesse Wei

Posted on

A Hands-On Guide to Figma's Component Properties

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.

Example of adding boolean property

Example of adding boolean property

Breakdown

1). Double-click the icon to select it. In the Layer section of the right sidebar, click the Create boolean property button.

Boolean property: step 1

2). Give it a self-explanatory name, such as Show Icon, leave the Value as it is and hit Create property.

Boolean property: step 2

3). Now the property is added to the icon layer and appears in the Layer section of the right sidebar.

Boolean property: step 3

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.

Boolean property: step 4-1

Boolean property: step 4-2

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).

Example of adding instance swap property

Example of adding instance swap property

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.

Instance Swap property: step 1

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.

Instance Swap property: step 2

3). Now we see from the right sidebar that our new property is successfully created.

Instance Swap property: step 3

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.

Instance Swap property: step 4

5). Finally, from the dropdown menu, choose another icon and we're done.

Instance Swap property: step 5-1

Instance Swap property: step 5-2

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.

Example of adding text property

Example of adding text property

Breakdown

1). Double-click the text to select it. In the Content section of the right sidebar, click the Create text property button.

Text property: step 1

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.

Text property: step 2

3). Now we see from the right sidebar that our new property is successfully created.

Text property: step 3

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).

Text property: step 4

5). Finally, change the text to something like Submit and we're done.

Text property: step 5-1

Text property: step 5-2

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.

Variant property: step 1

Variant property: step 1-2

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.

Variant property: step 2-1

Variant property: step 2-2

Variant property: step 2-3

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.

Variant property: step 3-1

Variant property: step 3-2

4). Now, create a button instance and try out all the properties we've created.

Variant property: step 4

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:

Profile card component

And here are some instances created from it:

Profile card component: instances

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.

Create profile card component: step 1

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.

Create profile card component: step 2

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.

Profile card component: step 3

4). Now select the rectangle along with everything inside it and componentize it.

Profile card component: step 4

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.

Profile card component: step 5-1

Then, check in Button.

Profile card component: step 5-2

6). Now we can tweak the property values of our button.

Profile card component: step 6

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:

Profile card component

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)