Know about components and instances

When you duplicate a component or drag a component from the assets panel in the left sidebar to the canvas, the component on the canvas is essentially an instance of the component. You can think of it as a copy of the component used on the canvas.

Relationship between components and instances

An instance is a precise copy of a component, possessing all the same properties as the original component, including text formatting, styles, and constraints.

Instances are essentially linked to their master components, so when you make changes to the master component, the instances automatically update.

Learn more about components and instances: an in-depth look

Create Instances

You can create instances from a component in the following ways:

  • On the canvas in the component file, select a component, hold down the (Option/Alt ) key, and drag to create a copy, successfully creating an instance of the component.

  • On the canvas in the component file, use the shortcut to duplicate the master component:

    • Mac: Command + D
    • Windows: Ctrl + D

  • In the assets panel, select a component, and drag it directly onto the canvas, creating a copy of the component on the canvas, i.e., an instance.

    img

How to distinguish between component and instance layers:

  • An empty diamond (◇) represents an instance of a component.
  • A solid diamond (◇) represents the master component.

Set instances

You can customize instances currently in use through the instance menu in the right-side properties panel.

Swap instances

  1. Select the instance you want to replace.
  2. In the right-side Properties panel, click the dropdown arrow in the instance menu.
  3. Choose a component from this file.
  4. Select an instance to replace the current selection.

img

Detach instances or edit components

Detach an instance from the component

When you detach an instance, Creatie will remove the link between the instance and the component, make the instance a regular layer and no longer apply any changes made to the component. At this point, the editing of the instance is not constrained by the properties set in the master component.

  1. Click the “···” button next to the instance in the right-side panel and select “detach”.
  2. Or, use the keyboard shortcut to detach the instance from the component.
    • Mac: Command + Option + B
    • Windows: Ctrl + Alt + B

img

Edit the master component of an instance

When you need to update the master component of an instance, just select the instance, click the “···” button next to the instance in the right-side panel, choose Edit component, and it will automatically navigate to the canvas where the component is located or the canvas where the component file is located and select the component.

👍🏻 Helpful or 👎🏻 Not Helpful

👉🏻 Was this article helpful to you? We look forward to your feedback.
👍🏻 Helpful
👎🏻 Not Helpful

Know about components Components and instances: an in-depth look