Skip to main content
Components are a single-saved design which can be used repeatedly throughout a project. They can be updated at any time from a single location, and any changes will sync across all instances.
Component hierarchy chart with one main component and many instances connectedComponent hierarchy chart with one main component and many instances connected

​
Why use Components?

Components are typically used to save time when editing, and ensure consistency throughout a project. Any situation where a single design is used in more than one location is an opportunity to use a Component. Rather than duplicating or copying a design—requiring changes in more than one place— save it as a Component to extend one design over multiple locations. This way, if you need to make edits in the future you can just edit the Component and all instances will update automatically. Components are also useful in making sure designs are kept consistent. Rather than arduously double-checking exact property values to maintain consistency throughout a project, designs are ensured to referencing the correct component, and everything will stay perfectly in sync

​
Getting started

Whether you’re designing a simple block of text or a multi-layered group, you can start using Components in one click. There are many ways to interact with Components, and we’ll cover each one in more detail.

​
Create new components

Components 02
Any selectable element can be a Component. To create a Component, select a layer and click ‘Create’ in the right sidebar.

​
Choose an existing component

Button selected with choose component shown in right sidebar
To choose a Component, select a layer and click ‘Choose’ inside the Component settings group in the right sidebar. This will let you apply an existing component of the same type to this selected element.

​
Swap existing Components

Components 03
Components can be swapped with other Components of the same element type. You can swap a component by hovering over the thumbnail in the right sidebar.

​
Detach components

Existing component selected with detach option highlighted
If at any point you want to design outside the constraints of a Component, detach the Component instance by clicking the ‘Detach’ button in the right sidebar. Sometimes it’s an ideal design process to start with an existing component by adding it, detaching, then altering as needed.

​
Adding components

1

Select the add component tool

Add menu dropdown open showing a list of all optionsAdd menu dropdown open showing a list of all options
From within the editor, select Component from the  + menu in the top bar, or use the hotkey C
2

Select area to add to

Select a point in the project body by selecting between layouts, click + dragging within, or selecting a point inside a column.
3

Choose component

Grid of components available to add
Select the component to add. Keep in mind the components listed will be ones that have been previously created and able to be added to the chosen area.
The options available in the Component window are based on which add point you chose in the previous step. For instance, choosing an add point inside a Column, Group & Layout Component won’t be visible in the window since it is not possible to add a Layout inside a Column.

​
Editing components

Main component editing view with just the component within the editor interface
At the moment a Component is created, a version of the design is saved outside the layers of the project, and the selected layer becomes an instance that references the saved version. Any edits you make to Component instances are overrides and do not update elsewhere. To make edits to the Component itself, click Edit in the Component settings group in the right sidebar, or navigate to the Components tab at the top of the right sidebar and select the desired Component. This will open a specialized interface that allows directly editing the Component.
Tip: Any changes made here will automatically update anywhere the Component is referenced within the document.

​
Component usage

View how many times a Component is used in the project from the top bar in the Component editing interface.

​
Locked content

Under the component settings group click the toggle icon on or off to Lock content which will prevent overrides in any instance.

​
Editing instances

Make custom overrides to instances for content, colors, etc.

​
Resetting changes

To undo overrides and revert the Component back to its original state, click the sync icon (rotating arrows) in the top of the right sidebar. Keep in mind all changes will revert to match the main component.