Figma Components and Variants

Components are reusable design elements. Create a button once, turn it into a component, and place it across hundreds of screens. Change the component once and every copy updates automatically. Variants extend this by letting you store all the different states of a component — like default, hover, and disabled — in one organized place.

What Is a Component?

A component in Figma works like a template. You design it once (the Main Component), then place copies of it (called Instances) wherever you need them.

Component Relationship Diagram

  MAIN COMPONENT (master)
  +------------------------+
  |  [icon]  Button Label  |  <-- Edit here to update all copies
  +------------------------+
           |
    +------+------+
    |             |
  Instance 1   Instance 2   <-- Used in different screens
  (Home page)  (Settings)

If you edit the Main Component — change the color, font, or icon — all instances update simultaneously across the entire file.

Creating a Main Component

1. Design your element (e.g., a button with text, icon, and background).
2. Select it.
3. Press Ctrl + Alt + K (Cmd + Option + K on Mac), or right-click and choose Create Component.

The layer icon changes to a solid diamond shape (◆), indicating it is now a Main Component.

Creating an Instance

Drag the Main Component from the Assets Panel to the canvas. Each copy you place is an instance. Instances show a hollow diamond icon (◇) in the Layers Panel.

Alternatively, copy (Ctrl/Cmd + C) and paste (Ctrl/Cmd + V) a Main Component to create an instance.

Overriding Instance Properties

Instances inherit everything from the Main Component, but you can override specific properties locally. Common overrides include:

• Changing the button label text
• Swapping the icon inside a button
• Changing the fill color for one specific instance

The override stays local to that instance. The Main Component remains unchanged. If you update the Main Component later, your local overrides are preserved.

Override Diagram

  Main Component:  [  Save  ] (blue button)
  Instance 1:      [  Save  ] (inherits blue)
  Instance 2:      [ Delete ] (text overridden to "Delete", color overridden to red)

  Now update Main Component border-radius to 12px:
  Instance 1:      [  Save  ] (blue, radius 12) ← updated
  Instance 2:      [ Delete ] (red, radius 12)  ← radius updated, overrides kept

Detaching an Instance

Right-click an instance and choose Detach Instance. It becomes a regular group, no longer linked to the Main Component. Detach only when you need a completely unique version that should never update with the component.

What Are Variants?

Variants group multiple states of a component into one organized container called a Component Set. Instead of having separate components called "Button Default", "Button Hover", and "Button Disabled", you create one component with three variants.

Variants Diagram — Button States

  COMPONENT SET: Button
  +------------------------------------------+
  |  Variant: Default   Variant: Hover       |
  |  +----------+       +----------+         |
  |  | [  OK  ] |       | [ OK ✓]  |         |
  |  +----------+       +----------+         |
  |                                          |
  |  Variant: Disabled  Variant: Loading     |
  |  +----------+       +----------+         |
  |  | [  OK  ] |       | [  ...] |          |
  |  +----------+       +----------+         |
  +------------------------------------------+

Creating Variants

1. Create your first Main Component (e.g., the default button).
2. Select the component and click Add Variant in the Design Panel. A second variant is added inside a component set.
3. Edit the second variant to look different (e.g., change the fill to grey for the disabled state).
4. Repeat to add more states (hover, active, loading, etc.).
5. Name each variant using the Property fields in the Design Panel.

Variant Properties

Properties are the labels that describe each variant's characteristics. You define property names and values in the Design Panel.

Example: Button Component Properties

  Property Name: State
  Values: Default | Hover | Disabled | Loading

  Property Name: Size
  Values: Small | Medium | Large

  Property Name: Type
  Values: Primary | Secondary | Destructive

This creates a matrix of variants. For example, a "Large, Primary, Hover" variant is one specific combination of these properties.

Switching Variants in Instances

Select an instance on the canvas. In the Design Panel, you see the component's properties listed as dropdowns. Change the State dropdown from "Default" to "Hover" and the instance swaps to that variant instantly — no copy-pasting needed.

The Assets Panel

All components in your file (and connected shared libraries) appear in the Assets Panel. Open it by pressing Ctrl + Alt + O (Cmd + Option + O) or clicking the grid icon in the left sidebar.

Assets Panel Structure

  ASSETS
  +--------------------------------+
  | Search: [____________]         |
  +--------------------------------+
  | LOCAL COMPONENTS               |
  |   Button/Primary               |
  |   Button/Secondary             |
  |   Input/Text Field             |
  |   Card/Product Card            |
  | SHARED LIBRARIES               |
  |   Design System / Icons        |
  +--------------------------------+

Component Properties (Advanced)

Beyond variants, Figma supports three types of component properties you can add directly to a component:

• Boolean Property – Toggles a layer on or off. Example: show/hide an icon inside a button.
• Text Property – Exposes a text layer for easy editing without double-clicking into the component. Example: button label.
• Instance Swap Property – Creates a slot where any component can be dropped in. Example: an icon slot inside a button where you can swap any icon.

Component Properties Example — Button

  Main Component: Primary Button
  Properties:
    ✔ Label (Text Property)     → shows in panel as editable text field
    ✔ Show Icon (Boolean)       → toggle on/off in panel
    ✔ Icon (Instance Swap)      → swap any icon in panel

  Instance in panel shows:
    Label:     [Get Started    ]
    Show Icon: [Toggle: ON     ]
    Icon:      [arrow-right  v ]

Organizing Components

Use slashes in component names to create folders in the Assets Panel.

• Button/Primary creates a "Button" folder containing "Primary".
• Button/Secondary goes in the same "Button" folder.
• Form/Input/Text Field creates nested folders: Form → Input → Text Field.

Good component organization makes your design system easy for the entire team to browse and use.