# Component properties
> Give a component settings each instance can change, show or hide a layer, its words, which icon it holds, and swap instances.
Source: https://uxdeck.app/guide/properties-and-swap (checked against uxdeck on 16 October 2026)
Component properties are the settings an instance offers. Instead of digging into an instance to hide an icon or change a label, you set it from the Design tab: a switch, a text field, a menu. You decide on the main component which layers those settings reach.
Swapping is the other half: changing which component an instance shows, the whole instance or one nested inside it, while keeping what you changed on it. If components are new to you, start with [Components and variants](/guide/components-and-variants).
## Add a property
1. Select the main component (or a variant set).
2. In the **Properties** section, press **+** (**Add a property**).
3. Choose a kind, give it a name and a default value, and press **Create**. (**Variant** opens no form: see the table.)
| Kind | What instances get | Default value |
|---|---|---|
| **Boolean** | A switch that shows or hides a layer | On or off |
| **Text** | A field for the layer's words | The words it shows |
| **Instance swap** | A picture with a menu to pick a component | The component it shows, with a **Preferred** list |
| **Variant** | Turns the component into a variant set (in a set, **Add variant** adds another variant) | None |
Add a short description in the field under the list ("What this is for, and when to use it"). Instances show it under their properties.
To edit or rename a property, press the pencil on its row; the star on an Instance swap row sets its **Preferred** components. Removing one (the bin) asks first: its layers stay as they are, and every instance forgets what it chose for it.
## Apply a property to a layer
A property does nothing until a layer uses it. Select a layer inside the main component:
- **Boolean:** press the diamond next to the eye in the **Blending** section (**Apply boolean property**) and pick the property.
- **Text:** in the text's **Content** row, press the button beside it (**Apply variable/property**) and pick the property.
- **Instance swap:** on a nested instance, press the diamond in its head (**Create instance swap property** the first time).
The Boolean and Instance swap menus also have **Create property…**, which makes a property named after the layer and applies it in one step; pick **None** to unlink. For text, use **Create property or variable** in the picker, and **Detach** to unlink.
## Use properties on an instance
Select an instance. Its properties sit under its name in the Design tab:
- A **Boolean** is a switch.
- A **Text** property is a field: type and press Enter.
- An **Instance swap** shows the component it holds; press it to pick another. Components in the property's **Preferred** list come first.
- A **Variant** property is a menu of values.
Properties belong to the whole variant set, so switching variant keeps what you set.
## Swap an instance
To show a different component in place of an instance:
- Press the instance's name at the top of the Design tab, or right-click it and choose **Swap instance**. The menu offers components from the same frame or folder first; **More components…** opens the whole picker.
- Press ⇧I for Quick actions, type a component's name and press ⌥Enter to swap the selected instances to it. Enter alone inserts a new instance.
- Hold ⌥ while you drag a component from **Assets** onto an instance to swap it. Add ⌘ to reach the deepest nested instance under the pointer.
The picker lists every component on the page, grouped by frame and folder, with a variant set as one choice and **Recent** at the top. Search it with **Search components**, and switch between a list and a grid.
## What a swap keeps
Switching to another variant of the same set keeps everything you changed on layers of the same name: words, hidden or shown layers, and fill colour, type and radius. Swapping to a different component keeps only your text on layers of the same name; the rest comes from the new component. Selecting several instances swaps them all in one undo step.
## Catches
- **A property reaches only the layers you apply it to.** Creating a Boolean called Show icon does nothing until the icon layer uses it.
- **Instance swap needs a nested instance.** The layer you apply it to must itself be an instance of a component.
- **Text properties set the whole text.** Mixed styles inside one text property are not kept.
- **A component cannot be swapped into itself.** Choices that would put an instance inside its own component are left out.
- **Swaps are within the file.** Components belong to their file; there are no shared libraries between files yet.
## Shortcuts
| Action | Keys |
|---|---|
| Insert or swap a component | ⇧I |
| Swap the selection, in Quick actions | ⌥Enter |
| Detach instance | ⌥⌘B |
Component properties are on every plan.