Components and variants

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.