Components

Components allow you to bundle multiple individual canvas layers (containers, labels, images) into a single, cohesive, reusable object. By encapsulating layout nodes into components, you can keep your main layers panel organized and instantiate identical visual patterns across different layouts.

1. Defining and Grouping Layers

To build a component from a set of active canvas elements:

Select multiple elements on your canvas by holding Shift and clicking each one, or by drawing a selection box over them on the canvas.
Right-click on the selection or on any of the highlighted layer rows in the Left Sidebar.
Select Create Component from the context menu.
Provide a unique, descriptive name (e.g., Social Card) and click Create.
The layers are collapsed into a single, sleek container group in your Sidebar tree, denoted by a purple component icon.

2. Exposing Instance Variables

The true power of components lies in **Properties Exposure**. You can create a master template style but allow individual component instances on your canvas to display different texts, colors, or image assets:

To Expose a Sub-property:

Double-click the purple component in your Left Sidebar to enter **Isolation Mode** (which dims everything else on the canvas).
Select the child text or image layer you wish to expose.
In the Inspector panel on the right, click the small ⚡ Chain/Link icon next to the property input field (such as Text String, Fill Color, or Image URL).
Input a variable key name (e.g., card_title) and a user-facing label (e.g., Headline Text).
Click Save & Exit Isolation Mode on the top left.

Now, when you select the main Component instance on the canvas, your custom fields are revealed directly in the primary Inspector panel. You can duplicate this Component, and each duplicate will share the master layout styles and animation properties while displaying distinct headlines or graphics!

3. Component Animations

When you animate properties *inside* a component (using Isolation Mode), the animation loops are packaged with the component.

Isolated Keyframes

All nested elements can be animated relative to the parent component bounds. This keeps your main timeline clean and avoids cluttering your primary editor workspace.

Global Inheritance

Modifying a keyframe track inside the parent component definition instantly replicates that animation timing across all active component instances on your canvas.