How to Use Component Properties in Figma: Simple Guide

In Figma, use component properties to customize instances of components without detaching them. You create properties like text, boolean, instance, or variants inside a main component, then adjust these properties in instances to change appearance or content easily.

Syntax

Component properties in Figma are set inside the main component and can be of types like Text, Boolean, Instance, or Variant. You define these properties in the right sidebar under the Properties panel when a component is selected.

Each property has a name and type. Instances of the component can then override these properties to change text, toggle visibility, swap nested components, or switch variants.

plaintext

Component {
  Properties:
    - Text: "Button Label"
    - Boolean: "Show Icon"
    - Instance: "Icon Component"
    - Variant: "State" (e.g., Default, Hover, Disabled)
}

Instance {
  Override Properties:
    - Text: "Submit"
    - Boolean: true
    - Instance: "Checkmark Icon"
    - Variant: "Hover"
}

Example

This example shows a button component with a text property and a boolean property to show or hide an icon. The instance overrides the text to "Send" and toggles the icon visibility on.

plaintext

1. Create a Button component with:
   - Text property named "Label"
   - Boolean property named "Show Icon"
2. Inside the component, add a text layer linked to "Label".
3. Add an icon and set its visibility controlled by "Show Icon".
4. Create an instance of the Button.
5. In the instance, set "Label" to "Send" and "Show Icon" to true.

Output

Instance shows a button with the label 'Send' and the icon visible.

Common Pitfalls

• Not defining properties in the main component before trying to override them in instances.
• Confusing variants with boolean properties; variants switch entire styles, booleans toggle parts.
• Forgetting to link text layers to text properties, so text overrides don’t work.
• Trying to override nested components without using instance swap properties.

plaintext

Wrong:
- Trying to change text in an instance without a text property defined.

Right:
- Define a text property in the main component and link the text layer to it.
- Then override the text in the instance.

Quick Reference

Property Type	Purpose	Example Use
Text	Change text content in instances	Button label text
Boolean	Toggle visibility or states	Show/hide icon
Instance	Swap nested components	Change icon component
Variant	Switch between predefined styles	Button states: Default, Hover

Key Takeaways

Define component properties inside the main component to enable easy overrides in instances.

Use text properties for editable text and boolean properties to toggle visibility or features.

Variants are best for switching between different styles or states of a component.

Always link layers inside the component to the correct property to allow overrides.

Avoid detaching instances; use properties to keep components consistent and flexible.