# Components and variants
> Make a layer once, use it everywhere, and change every copy from one place; group its versions as variants.
Source: https://uxdeck.app/guide/components-and-variants (checked against uxdeck on 16 October 2026)
A component is a layer you design once and use many times. Each use is an **instance**: change the component and every instance changes with it, while anything you changed on an instance stays as you set it. **Variants** group the versions of one component (a button that is primary or ghost, idle or hovered) so you can switch between them in one click.
## Make a component
Select a layer and press ⌥⌘K, or right-click and choose **Create component**. To turn several layers into a component each, choose **Create multiple components**.
The component's icon turns purple in the layers list. Name it with slashes, such as `Button / Primary`, and it is filed in a **Button** folder in the **Assets** tab.
## Use it: instances
- In **Assets**, drag a component onto the canvas, or press **+** on its row.
- Select a component and press ⌥⌘K again to add an instance beside it.
- Right-click a component and choose **Main component** > **Add an instance**.
Instances follow their component across every page of the file. Layers you add to or remove from the component are added to or removed from every instance.
## Change an instance
Anything you change on an instance (its text, a colour, a hidden layer) is an **override**: it stays when the component changes. The instance's head in the Design tab shows its component's name and:
- **Go to main component** takes you to the component; a chip above the toolbar brings you back.
- **Reset all changes** removes your overrides.
- **Detach instance** (⌥⌘B) turns it back into ordinary layers.
## Variants
Variants are components that belong together.
1. Make each version a component, named with the same first part: `Button / Primary`, `Button / Ghost`.
2. Select them and choose **Combine as variants**.
They become one **Button** set with a dashed purple outline, each variant named by its value (Primary, Ghost). The property starts as **Property 1**: rename it to what it describes, such as Style. Rename a variant to `State=Hover` to give it a property and a value.
On an instance, each property is a menu: pick **Ghost** and the instance becomes the Ghost variant, keeping your text.
To change the same thing in every variant at once, select the set and press Q (**multi-edit**): each change repeats on the matching layer of every variant. Press Q again, or the chip above the toolbar, to stop.
## Component properties
Properties are the settings an instance offers. In the main component's **Properties** section, press **+**:
- **Boolean** shows or hides a layer (an icon in a button).
- **Text** lets each instance set its own words.
- **Instance swap** lets each instance pick which component goes in a slot (which icon), with a **Preferred** list.
- **Variant** turns the component into a variant set; in a set it reads **Add variant** and adds another variant.
On a layer inside the component, **Apply property** links it to a property. Instances then show booleans as switches, text as a field, and instance swaps as a picture with a menu. Properties belong to the whole variant set.
Read more in **Component properties and swapping instances**.
## In prototypes
A variant set is how a button gets its hover or pressed state in a prototype: add an interaction with **Change to** and pick the variant. Choose **Instant**, **Dissolve** or **Match layers** to animate the change.
## Catches
- **Components belong to their file.** There are no shared libraries between files yet.
- **Deleting a component** asks first and says how many instances use it. The instances keep their look.
- **Dragging a variant out of its set** makes it a component of its own.
- **A slash in a name files the component in a folder.** It never makes a variant: use **Combine as variants**.
- **Text properties set the whole text.** Mixed styles inside one text property are not kept.
## Shortcuts
| Action | Keys |
|---|---|
| Create component | ⌥⌘K |
| Detach instance | ⌥⌘B |
| Multi-edit variants | Q |
| Insert or swap a component | ⇧I |
Components and variants are on every plan. Imported Figma files bring their components and variants with them.