Components let you reuse elements across your layouts, keeping your designs uniform and making updates effortless. You can create components from a single element or a group of elements—perfect for speeding up your workflow.
Overview
Elements such as buttons, product cards, or any other frequently used elements are perfect candidates to turn into components. You can also turn entire sections into components.
Benefits of Components
Benefit | Description |
Consistency | Maintain uniform design across all layouts |
Efficiency | Update once, apply everywhere |
Organization | Keep reusable elements in the Component Panel |
Flexibility | Override individual instances when needed |
Creating a Component
Select an element or group of elements on the canvas
Right-click the selection and click Create Component
The outline of the component will turn purple to indicate it's now a component
The layer in the Layers panel will also turn purple with a new component icon
The component appears in the Component Panel
Components and Instances
Main Component
The original component created first. It defines the style properties and elements that all instances inherit from.
Instance
A copy of the main component. To create an instance:
Method | Steps |
Copy and paste | Copy the main component and paste it to another location |
Drag from panel | Drag the component from the Component Panel to the canvas |
Identifying Components and Instances
Components and instances have different icons in the Layers panel:
Type | Icon | Description |
Main Component | Quadruple diamond | The original, editable component |
Instance | Single diamond | A copy linked to the main component |
Updating a Main Component
Changes made to the main component automatically apply to all instances.
How to Edit
Select the main component you wish to edit
Click on the Edit main component button in the right sidebar
All settings will have purple highlights to indicate you're editing a main component
Make your changes
Example
If you change the color of the main component to black, all instances of that component will also update to reflect the change.
Overriding Instance Properties
If you modify a property of an instance, that instance will not update automatically when the main component is changed. This is known as an override.
Example
You change the color of an instance to green
Later, you change the main component's color to blue
The instance with the override remains green
Clearing Overrides
Reset an instance to remove any overrides and restore the main component's properties.
How to Clear
Select the instance
Click on Reset Overrides
The instance will revert to the style properties of the main component.
Detaching an Instance
Detach an instance so it no longer inherits changes from the main component.
How to Detach
Select the instance
Click on Detach Instance
Once detached, the instance becomes a regular element and will not be affected by any future updates to the main component.
Finding the Main Component
Quickly locate the main component from any instance.
How to Find
Select the instance
Click on Go to Main Component
You will be redirected to the main component.
Restoring a Deleted Main Component
If the main component is accidentally deleted, you can restore it from an existing instance.
How to Restore
Find an instance of the component
Click on Set as Main Component
The selected instance becomes the new main component.
Nested Components
Components can be nested inside other components for complex element structures.
Example
Create a product card component that contains a button component within it. This allows you to organize and manage complex elements within a single component structure.
Important Rule
Allowed | Not Allowed |
Instances nested inside a main component | Main components nested inside other main components |
Only instances of components can be nested in a main component. It is not possible to have nested main components.
Quick Reference
Task | Action |
Create component | Select element → Right-click → Create Component |
Create instance | Copy/paste component or drag from Component Panel |
Edit main component | Select main → Edit main component button |
Override instance | Select instance → Modify properties |
Clear overrides | Select instance → Reset Overrides |
Detach instance | Select instance → Detach Instance |
Find main component | Select instance → Go to Main Component |
Restore deleted main | Select instance → Set as Main Component |
Component Icons
Icon | Type | Editable |
Quadruple diamond (purple) | Main Component | Yes |
Single diamond | Instance | Overrides only |