Component Creation

Creating a Component

First you’ll need to select the layers you’d like to include in the component. Then, right click on the layer and choose Create Component, or use the shortcut ⌘⌥K. After choosing a name for your component, you’ll be able to edit your component in isolation.

Component & Instance

First of all, it’s important to understand the difference between component and instance:

1. The component, also called primary, is the source of truth and can be only edited in an isolated canvas.

2. An instance, which is a copy of the component that can be used anywhere in your project. Instances are linked to the main component and update with any changes made to the primary component. You can override certain properties to customize an instance with direct manipulation, or using Variables.

Customizing a Component

After creating a component, you can further customize it by making use of variants and variables.

Variants. They are different appearances for the same content that can transition to each other. Like a button hover state or a light and dark version. Learn more.

Variables. They are dynamic inputs that you can use in your component to customize it, like a button title or color. Or the border radius for a card. Learn more.

The Hover Variant

In the isolation view, select the component and click on the ‘Hover’ placeholder below. You’ll see a new variant gets created that look exactly the same. Changing its properties (e.g. the color) will define how that component looks when hovered. Additionally, you can tweak its transition to the hovered state in the properties panel.

Other Variants

A part from the hover variant, you might need different states and sizes, as well as light and dark modes. Variants allow you to add those within a single component. After selecting the default variant, click on the variant placeholder on its right to add one, then proceed customizing it as you wish (e.g. by changing the corner radius property). When you’re back to the canvas, you can switch the variant of a component from the property panel on the right, in the section with your component name.

Using Variables

To make the process of changing certain properties of your instances easier, for instance changing the button label or color directly from the canvas, you can use variables. When you create a button, a text variable for the button label is already created for you, but on top of that you can create as many as you wish.

For example, if you want to easily change your button color on the fly, you can create a color variable. To do so, enter component isolation and click the tiny plus next to the color property, and then Create. A modal will appear allowing you to pick a name for your variable and a default value. Once that is done, going back to the canvas and selecting an instance will show your variable fields in the component section of the properties panel.

Managing Components

You’ll find components you create in the left panel, in the Assets tab. Components can be inserted in the canvas, edited, renamed, duplicated and deleted from that list. You can also copy paste a component across different projects. Please note that instances ported over in other projects will be linked to the primary component in the original project.

Related Articles

Component Variants
Component Variables
Component Transitions
Component Sharing