Working with components and 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.
Creating Components and Instances
Create a Component
To create a Component:
- Select any object or group on the page.
- From the Component button in the Top Toolbar, or the Component section of the right-click Context Menu, choose Create Component.
- Once created and selected, Components are identifiable by their orange ‘Component’ label, badge and frame; in the Outline panel, they are identified by an orange highlights.
Create an Instance
To create an Instance:
- 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.
- You can paste the Instance to any page within the project
- Now, change the size, text, color, or other formatting attributes of the Component
- Once the changes are complete, click outside the Component’s object-frame – and watch the changes propagate to all Instances within the project.
Editing and Adding New Objects to a Component
Components and Instances – even those made from single objects – behave like groups.
To edit any component or instance:
- Select it so you see the orange Object-Frame.
- Then, double-click so the thicker Component Edit Border appears in orange.
- 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
Applying Overrides to an Instance
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.
Resetting and Detaching an Instance
Reset an Instance
Detach an Instance
Locating and Restoring 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.
Locate 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.
Restore a Component
