Working with Components & Instances

Components can help reduce errors, assure consistency, and save time – by freeing your team from the tedious work of syncing and updating.

Once you turn an object or group into a Component, it acts as a master to any and all copies – or Instances – that are made from that component.

That means that whatever formatting you apply to the Component is immediately reflected by every Instance in the project.

However, instances remain independent of the component in their Coordinates (including Flip and Rotate), and Visibility. This means you can relocate or hide components without affecting the position or visibility of their instances.

In this article, we’ll show you how to turn any object or group into a component, create instances of that component, and demonstrate how to edit your components by adding or removing elements.

Create components and instances

Create a Component

To create a Component:

1. Select any object or group on the page.
2. From the Component button in the Top Toolbar, or the Component section of the right-click Context Menu, choose Create Component.
3. Once created and selected, Components are identifiable by their purple ‘Component’ label, badge and frame; in the Outline panel, they are identified by a purple highlight.

Create an Instance

To create an Instance:

1. Make a copy of the Component using Ctrl/Cmd + D, the Duplicate option in the Context menu, or simply hold down Alt/Option and drag.
2. You can paste the Instance to any page within the project
3. Now, change the size, text, color, or other formatting attributes of the Component
4. Once the changes are complete, click outside the Component’s object-frame – and watch the changes propagate to all Instances within the project.

Edit and add objects to a component

Components and Instances – even those made from single objects – behave like groups.

To edit any component or instance:

1. Select it so you see the purple Object-Frame.
2. Then, double-click so the thicker Component Edit Border appears in purple.
3. Now, you can...

• Click through to edit
• Add a new element from the left-sidebar
• Copy and paste an object in from the page itself

Override instances

Sometimes, you may want to customize one aspect of an individual instance – yet still leave it connected and responsive to its component for other changes and updates. For example, you might want to change the color of a CTA on a specific page, but still want that button to sync with its master for any future changes in size and text.

That’s why a change made locally, to any individual instance, overrides the component’s ability to change that specific formatting attribute (text, color, blur, rounded corners) in the future.

Overrides applied locally have no effect on other instances, or the original Component itself. This allows your team to be consistent in design, but still responsive to the particular design context of each instance.

Reset and detach instances

Resetting an Instance

If you’ve made local modifications and overrides to an individual instance, but then decide to remove those overrides and re-apply the full style and properties of the component, select Reset Instance.

Detaching an Instance

If you want to turn an instance back into a normal object or group, just select Detach Instance.

Locate and restore components

To organize your Components, you can leave them in the context of a design – or create a separate page where all your components can live, and pin that page to the top of the Pages Panel.

But, from time to time, you may still want to jump to your component from somewhere else in your project – for example, while working on one of its instances.

And, in case you accidentally delete a component, you may need to restore it from one of its instances.

Locating a Component

If you’re working with an instance, and need to check – or tweak – the component itself, just click on the instance and select Go to Component from the menu. No matter where the instance is, you’ll jump right to its Component’s location within the project.

Restoring a Component

If, for some reason, you delete a Component, and leave orphaned instances behind, just select any of its instances and choose the Restore Component option. The component will magically reappear! Note that this works even for instances with overrides – you’ll still get the original component back.