Components
Components are reusable building blocks. You design a component once and place instances across multiple pages. When you edit the master component, all instances update automatically.
Creating a Component
Select layers
Select one or more layers in the Layers panel or on the canvas. The selection becomes the component content.
Create the component
Press ⌥+⌘+K or right-click and choose Create Component from the context menu.
Name the component
Enter a name in the Create Component dialog. The component is added to your component library and the selection is replaced with an instance.
Component Variables
Components support variables for content that varies per instance. You define variables when creating or editing the component, then link them to layers inside the component. Each instance can override these values without affecting the master or other instances.
Variable Types
| Type | Description |
|---|---|
| Text | Overridable plain text content |
| Rich Text | Overridable rich text with formatting (bold, italic, links, lists, inline CMS variables) |
| Image | Overridable image source |
| Link | Overridable link URL and settings |
| Audio | Overridable audio file source |
| Video | Overridable video file source |
| Icon | Overridable SVG icon |
Linking Variables to Layers
After creating a variable, link it to a layer inside the component:
- Enter component edit mode
- Select the target layer (e.g., a text element, image, or button)
- In the right panel, find the Link to variable option
- Choose the variable to link
The linked layer displays the variable’s default value. Each instance can then override that value.
Rich Text Variables
Text variables support rich text content. When you override a text variable on an instance, you get the full rich text editor with formatting controls, inline CMS field references, and structured content. This is useful for components like cards, testimonials, or content blocks where the text needs formatting beyond plain strings.
Editing Components
Double-click any component instance to enter edit mode. The canvas shows only the component content. Changes you make apply to the master component and propagate to all instances.
Exit edit mode by clicking outside the component or using the breadcrumb navigation to return to the page.
Detaching Components
To break the link between an instance and the master, select the instance and press ⌥+⌘+B or use the context menu Detach Component. The instance is replaced with inline layers. Those layers no longer update when the master changes.
Detaching is irreversible. The detached layers are independent copies. You cannot reattach them to the component.
Instances
Every placement of a component is an instance. Instances share the same structure and styles as the master. You can override component variables per instance. All instances update when you edit the master.
When components are nested (a component instance inside another component), each level maintains its own overrides independently. The inner component’s overrides are scoped to that instance within the parent component’s layer tree.
Components in Rich Text
You can insert component instances inside CMS rich text fields. This lets you create structured, reusable blocks within long-form content — callouts, embeds, feature highlights, pricing cards, and more.
When editing a rich text field in the CMS, use the component inserter to place a component instance inline with your content. The component renders with its full design and structure, and you can override its variables per insertion.
Components in rich text are ideal for content teams who need consistent design patterns inside blog posts, documentation, or marketing pages without touching the page editor.
Best Practices
- Use components for repeated patterns: headers, footers, cards, buttons, and navigation
- Define variables for any content that changes between instances
- Use rich text variables when instance content needs formatting
- Nest components to build complex, reusable structures (e.g., a card grid component containing card components)
- Use components in CMS rich text to maintain design consistency across dynamic content