Components

Components are saved sets of layers and interactions that are reusable across your prototype. You can turn any set of layers and interactions into a component and reuse it by creating instances of a component throughout your scenes. By using Components, you can avoid unnecessary repetitive work, improve the readability per scene, and ultimately accelerate your prototyping workflow.

Using Components

Creating Components in a Scene

You can create components in a scene. Select a layer or multiple layers that you would like to turn into components and click on the "Component" icon in the toolbar. Or right-click on the selected layer(s) and select "Convert to Component" from the context menu. A component is automatically created with the selected layer(s) and the corresponding interactions. Moreover, an instance of the component would replace the original layers.

Creating Components Directly

Moreover, you can create components from scratch. Open the component panel located on the left side and click on the plus icon. This creates an empty component that you can start customizing.

Adding Component Instances

You can create an instance of a component by dragging a component from the component panel to the canvas of a scene.

Editing Components

Main Component

To edit a main component, you must be in the component editing mode. To enter this mode, click on a component in the component panel, or right-click on an instance of the component and select "Go to main Component" from the context menu.

Editing a main component is similar to editing a scene. You can create, modify, and delete layers, variables, triggers, and responses in the component. The changes you would make are applied to all instances of the component.

You can return to the scene by clicking on the ← arrow button in the top left corner or you can go to any scene by clicking on a scene in the scene panel.

Instance

When you change a property of a sublayer of a component instance, you are simply overriding that property. Overridden properties do not affect the main component, as they only apply to the instance. Even if you make changes to the main component, the overridden properties in the instance would remain. By overriding, you can customize instances, making them different from each other while still being instances of the same main component.

To reset the overrides of an instance, right-click on the instance and select "Reset Overrides" from the context menu. All the overrides will be cleared, and the instance will be the same as its main component.

Use as Main Component

You can link an instance of a component with its main component. This allows you to edit the main component by editing the instance, without having to be in the component editing mode.

Variable Overrides

Overriding the initial values of variables is possible. To do so, enable the "Make Overridable" option for the variable in the main component. Once enabled, you can override the value of a variable in the property panel of a component instance.

Detach Component Instance

Detaching breaks the connection with the component and turns the instance into a container. You can do this either from the property panel or the context menu. Ensure that you have enabled the feature in Labs prior to use.

Detach component from the context menu

1. Right-click on the instance
2. Click on Detach Instance

Detach component instance from the property panel

1. Select a component instance
2. Click on the Detach Instance icon in the property panel

Once the instance has been detached, the Detached_ prefix will be automatically added to the detached interaction’s name. Easily identify whether an interaction stems from a detached instance or not.

Swap Component Instances

In the property panel on the right side, you can easily replace any component instance with another one.

Grouping Components

Groups can be created or separated using the slash "/" in the component name. For example, if the name of the first component is "Button / Primary / Normal" and the name of the second component is "Button / Secondary / Normal", it would be grouped as shown below.