Component properties

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.

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.