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.