Components

Component Instance

A component instance is a copy of the main component that you can reuse in your design.

Overview

Instances are linked to the main component and can be identified by the unfilled component icon. Any time you change the main component, all instances of that component will update as well.

There are two ways to add component instances:

  1. From the Insert + menu - Click on the Insert + button and select a main component from the Components section.
  2. By copying/pasting or duplicating - With a component selected in the Layers panel, right-click it to copy and then right-click it to paste the component onto a selected layer. You can also right-click it to duplicate the component in place.
Pro Tip
Alternatively, press ⌘C to copy a component and paste it onto a selected layer using ⌘V. You can also press ⌘D to duplicate it in place.

Editing Properties

You can edit the main component from the component instance by clicking on Edit Main… in the Component Instance section of the Inspector panel.

Overriding Properties

The properties defined on a main component are presented as a set of controls in the Inspector panel of an instance. You can use these controls to override the default values and customize the instance.

<div class="callout note">Note
To go back to the default values, click on the refresh icon in the top-right corner of the Properties section.</div>

Detaching Component Instances

You can detach a component instance to remove all of the linked properties and turn the component into a layer instead. With the component instance selected in the Layers panel, click on Detach in the Component Instance section of the Inspector panel.

Resources

Videos

No items found.

Ask Our Community

If you have questions about the Judo editor, or developer questions about SDK integration, join the community and start a conversation!