Components are reusable design elements. They save you from having to recreate the same element multiple times, and make it easy to manage changes across your designs.

There are two aspects to a component:

• The main component that defines the properties of the design element
• and an instance that’s a copy of the component, which you can add to your designs.

About creating components

You can create main components from any collection of layers. This could be a simple element, like an icon or button; or an entire layout, like a card or menu.

To create a main component, select the layers you want to use and click Create component in the right sidebar. You can identify main components by their purple bounding box on the canvas and four diamonds icon in the layers section in the left sidebar.

About adding instances

Once you’ve created a main component, you can add instances of it to your designs. To add an instance, duplicate the main component on the canvas or select the main component from the Assets tab in the left sidebar and drag it onto the canvas. You can identify instances by their purple bounding box and their outlined diamond icon.

Instances are connected to their main components. This means that changes made to the main component are automatically applied to every instance of that component in the same file, saving you time and making sure your designs stays consistent.

There may be times where you don’t want the instance to look identical to the main component. Buttons, for example, will need different labels for different actions. If you change the label in the main component, every instance would take on that new label.

You can make changes to some properties of an instance—including text, fill, stroke, and size—without breaking its connection to the main component. This allows you to customize instances to fit their new context, or test out different design variations.

You can always reset changes if you decide you’d rather use the default properties on an instance. You can also push changes to the main component, and any other instances in the file, if you find something you like more than your original design.

About detaching instances

If you need to make more extensive changes, you can detach an instance, breaking its connection to the main component. This means that it won’t receive any updates from the main component. Detaching an instance can be useful, but keep in mind, once an instance is detached, it can’t be reconnected to the main component in the future. If you accidentally detach an instance, you can undo it right away using the keyboard shortcut:

• Mac: ⌘ Command Z
• Windows: ⌃ Control Z

Check your knowledge