Figma Component Properties

Component properties turn one component into a flexible building block. Designers change text, swap icons, and show or hide layers from a single panel. No digging through layers is needed, which keeps instances tidy and fast to edit.

What a Property Does

Think of a car dashboard. The driver flips switches and turns dials without opening the engine. Properties work the same way for a component. The component holds the machinery, and the properties offer the controls.

The Four Property Types

Type            Controls                 Control Style
-------------   ----------------------   ---------------
Variant         Which version shows      Dropdown
Boolean         Show or hide a layer     Toggle switch
Text            Words inside a layer     Text box
Instance swap   Which nested component   Picker

Add a Property

1. Select the main component, not an instance.
2. Find Properties in the right panel.
3. Click the plus icon and choose a property type.
4. Name the property and set a default value.
5. Link the property to the layer it controls.

Short, clear names work best. Use Show Icon instead of Property 1.

Boolean Properties

A boolean property shows or hides a layer. Use it for optional parts such as icons, badges, or subtitles.

Show Icon = On              Show Icon = Off
+----------------------+    +----------------------+
| (*)  Download        |    |      Download        |
+----------------------+    +----------------------+

Text Properties

A text property exposes the words inside a text layer. Instances change the label directly from the right panel, which avoids double-clicking into nested layers.

Component: Button
  Text property: Label = "Button"

Instance A  Label = "Save"
Instance B  Label = "Cancel"
Instance C  Label = "Continue to payment"

Instance Swap Properties

An instance swap property replaces a nested component with another one. Icons are the classic use. Set preferred values to limit the choices to a short list of approved icons, so teammates cannot pick random artwork.

Button
  Instance swap: Leading Icon
     Preferred values:
       - Arrow Right
       - Plus
       - Download
       - Heart

Build a Card with Four Controls

A product card shows how properties combine.

+--------------------------------+
| [ Image ]            (Show Image)      Boolean
|                                |
| Product Name         (Title)           Text
| (*) Short details    (Icon)            Instance swap
|                                |
| [ Buy Now ]          (Size)            Variant: Small, Large
+--------------------------------+

One card component now serves a grid, a list, and a featured banner. Each instance receives its own settings.

Nested Instances

A component can contain other components. A card might hold a button, an icon, and a tag. Expose properties from nested instances to bring their controls to the top level. The panel stays short and friendly, and designers never hunt through layers.

Keep Properties Organized

• Group related controls near each other in the panel.
• Use verbs for booleans, such as Show Badge.
• Pick sensible defaults so a fresh instance looks right immediately.
• Delete properties that nobody uses.

Common Mistakes

• Creating a variant for every small change when a boolean would do.
• Leaving vague names like Property 2.
• Forgetting to link a property to its layer, which makes the control do nothing.
• Exposing too many options, which overwhelms teammates.

Practice Task: Upgrade a Button

Take a basic button component and add three properties: a text property for the label, a boolean for a leading icon, and an instance swap for the icon itself. Place four instances on a frame. Give each instance a different label and icon, and hide the icon on one. Count how few clicks each change needs compared with editing layers by hand.