A Main Component is a Frame or Section that can be reused throughout your project. It preserves its style and structure, and any changes made to it will update across all instances where it is used.

Main Components and their instances work together but serve different purposes in the design process. Understanding how each function is crucial to using them effectively.

A Main Component is the original version of a design element, often referred to as the 'source of truth'. When you create a Main Component, you define its structure, style, and content. Any changes made to the Main Component are automatically synced with all instances, unless those instances have been manually overridden.

You can identify a Main Component by checking its label on the right-side panel or viewing its icon on the layers panel.

An Instance is a copy of the Main Component placed on the canvas. It inherits the design of the Main Component but allows for local overrides, such as changes to content or style, without affecting the Main Component or other instances.

Instances are marked with a label on the right-side panel and an icon on the layers panel to differentiate them from Main Components.

When a Main Component is created or added to a project, it is saved in the Main Components library.

To find Main components:

To create a Main component, follow these steps:

Gather a set of elements that you plan to reuse (such as headers, cards, or footers) in a Frame or Section.

Select the Frame or Section, then convert it to a Main component by:

Give the new component a meaningful name, as it will be added to your component library in the left panel.

Once created, the Frame or Section will change color, indicating it is now a Main Component.

To edit a Main Component, you need to enter the edit mode. You can do this by:

This takes you to a dedicated environment for editing the original design. Any changes you make here will update all instances unless they've been manually customized.

To save changes:

All changes will automatically push to all instances, except those with manual overrides.

In the 'Add components' menu, hover over the component and click the overflow menu (...) to select 'Change name'. Enter the new name and click 'Save'.

To delete a Main Component, follow the same steps for renaming, but select 'Delete main component' from the menu.

Instances allow you to customize a Main Component without affecting other instances or the Main Component itself. This is useful when you want to update content or experiment with design variations.

Any edits made to an instance are local and only apply to that specific instance. For example, you can change text, images, or colors without affecting other instances.

In the image above, you can see an example of an unedited instance to the left and an instance to the right with overrides on text, image, and background color.

If you make edits to the Main Component, you can see in the image below that the instance to the left has inherited an update from the Main component, while the instance to the right with overrides is not affected.

Instances are linked to the Main Component and inherit its structure. Some limitations include:

To make these types of edits, you must update the Main Component.

You can reset any overrides and restore the instance to match the Main Component by:

To reset only specific styles, use the style indicator buttons in the right-side panel. Learn about style indicators here.

If you've made significant changes to an instance that you want applied to other instances, you can push those changes to the Main Component. Once pushed, the updates will apply to all instances that don't have manual overrides.

If you want to fully disconnect an instance from its Main Component:

This will turn the instance into a standalone frame or section, with no link to the Main Component.