Component properties (text, boolean, instance swap) in Figma - Step-by-Step Guide

Introduction

Component properties let you customize parts of a design component easily. They help you change text, toggle options, or swap parts without making new components. This saves time and keeps designs consistent.

When you want to change the text inside a button without making a new button component

When you need to show or hide an icon inside a card by toggling a switch

When you want to swap one image or icon for another inside a component instance

When you want to reuse a component but change small details like labels or colors

When you want to keep your design system clean by avoiding many similar components

Steps

Step 1: Select the main component

- Layers panel or canvas

The component is highlighted and ready for editing

💡 Use the Layers panel to find components easily if the canvas is crowded

Step 2: Click the 'Properties' icon in the right sidebar

- Design panel on the right

The component properties panel opens showing existing properties

Step 3: Add a text property by selecting a text layer inside the component and clicking 'Create property' → 'Text'

- Properties panel

A new text property appears allowing text changes in instances

💡 Name the property clearly, like 'Button Label', for easy use

Step 4: Add a boolean property by selecting a layer to toggle (like an icon) and clicking 'Create property' → 'Boolean'

- Properties panel

A toggle switch appears in instances to show or hide the selected layer

Step 5: Add an instance swap property by selecting a nested component and clicking 'Create property' → 'Instance swap'

- Properties panel

The property allows swapping this nested component with others in instances

Step 6: Go to an instance of the component on the canvas

- Canvas

The instance shows the new properties in the right sidebar for editing

Step 7: Change the text, toggle the boolean, or swap the instance using the properties panel

- Instance properties panel on the right

The instance updates immediately with your changes without detaching

Before vs After

Before

A button component with fixed text 'Submit' and a fixed icon visible

After

An instance of the button with text changed to 'Send', icon hidden by toggle, and icon swapped with a different style

Settings Reference

Text property

📍 Properties panel in component edit mode

Allows changing text content in component instances

Default: Original text in the component

Boolean property

📍 Properties panel in component edit mode

Lets you toggle visibility of layers inside component instances

Default: True (layer visible)

Instance swap property

📍 Properties panel in component edit mode

Enables swapping nested components inside instances

Default: Original nested component

Common Mistakes

Not selecting the correct layer before creating a property

The property will link to the wrong layer and not work as expected

Always select the exact text, icon, or nested component layer before creating the property

Trying to create a property on a layer that is not inside the component

Properties only work on layers inside the main component

Make sure the layer is part of the component before adding properties

Forgetting to name properties clearly

It becomes confusing to identify properties when editing instances

Use clear, descriptive names for each property

Summary

Component properties let you customize text, toggle visibility, and swap parts inside component instances.

They save time by avoiding duplicate components and keep designs consistent.

Remember to select the correct layers and name properties clearly for easy use.

Practice

1. What is the main purpose of using component properties in Figma?

easy

A. To export components as images

B. To customize parts of a component without creating new components

C. To change the color of the entire Figma file

D. To delete unused components automatically

Solution

1. Step 1: Understand component properties

   Component properties allow you to change parts inside a component without making a new one.

2. Step 2: Identify the main benefit

   This saves time and keeps designs consistent by reusing the same component with variations.

3. Final Answer:

   To customize parts of a component without creating new components -> Option B

4. Quick Check:

   Component properties = customize parts [OK]

Hint: Think: change parts, not whole component [OK]

Common Mistakes:

• Confusing properties with exporting features
• Thinking properties change whole file colors
• Assuming properties delete components

2. Which of the following is the correct way to create a boolean property in a Figma component?

easy

A. Use the boolean property type and toggle it on or off

B. Add a text field and type 'true' or 'false'

C. Swap the instance with another component

D. Change the component's fill color

Solution

1. Step 1: Identify boolean property usage

   Boolean properties in Figma are toggles that switch between true or false states.

2. Step 2: Recognize correct creation method

   You create a boolean property by selecting the boolean type and toggling it on or off, not by typing text or swapping instances.

3. Final Answer:

   Use the boolean property type and toggle it on or off -> Option A

4. Quick Check:

   Boolean property = toggle true/false [OK]

Hint: Boolean means toggle on/off, not typing text [OK]

Common Mistakes:

• Typing 'true' or 'false' in text instead of using boolean
• Confusing instance swap with boolean property
• Changing colors instead of property type

3. Given a component with a text property named Label set to "Submit", what will happen if you change the Label property to "Send" in an instance?

medium

A. The text property will be removed from the instance

B. The main component's text changes to "Send" for all instances

C. The text inside the instance changes to "Send" without affecting the main component

D. The instance will break and show an error

Solution

1. Step 1: Understand text property behavior

   Text properties allow instances to override text without changing the main component.

2. Step 2: Apply to the example

   Changing the Label property in an instance updates only that instance's text to "Send".

3. Final Answer:

   The text inside the instance changes to "Send" without affecting the main component -> Option C

4. Quick Check:

   Text property override = instance text change only [OK]

Hint: Instance text changes, main stays same [OK]

Common Mistakes:

• Thinking main component text changes
• Expecting errors on property change
• Assuming property gets deleted

4. You tried to swap an instance property with another component, but the swap option is grayed out. What is the most likely cause?

medium

A. The components are not from the same component set or variant group

B. You forgot to select the boolean property first

C. Text properties cannot be swapped

D. You need to restart Figma to enable swapping

Solution

1. Step 1: Understand instance swap rules

   Instance swap works only between components in the same set or variant group.

2. Step 2: Identify cause of grayed swap

   If swap is disabled, it usually means the components are unrelated or not grouped properly.

3. Final Answer:

   The components are not from the same component set or variant group -> Option A

4. Quick Check:

   Swap enabled only in same variant group [OK]

Hint: Swap only works within same variant group [OK]

Common Mistakes:

• Trying to swap unrelated components
• Confusing boolean property with instance swap
• Restarting app unnecessarily

5. You have a button component with a boolean property IsDisabled that toggles the button's color and disables clicks. How would you set up the component properties to allow instance users to swap the icon inside the button easily?

hard

A. Change the main component's icon directly for all instances

B. Add a boolean property for the icon and toggle it on/off

C. Add a text property and type the icon name manually

D. Add an instance swap property linked to a set of icon components

Solution

1. Step 1: Understand instance swap property

   Instance swap lets users replace parts like icons by choosing from predefined components.

2. Step 2: Apply to icon swapping

   To let users swap icons easily, add an instance swap property linked to icon components.

3. Step 3: Avoid incorrect methods

   Boolean toggles can't swap icons; text properties require manual typing; changing main affects all instances.

4. Final Answer:

   Add an instance swap property linked to a set of icon components -> Option D

5. Quick Check:

   Instance swap = easy icon replacement [OK]

Hint: Use instance swap for easy icon changes [OK]

Common Mistakes:

• Using boolean for icon swap
• Typing icon names instead of swapping
• Changing main component icon directly