Introduction to 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 in a Scene

Creating Components Directly

Furthermore, you can create components from scratch. Open the component panel that you can find on the left side and click on the plus icon. An empty component is created and you can start customizing this component.

Creating Components Directly

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.

Adding Component Instances

Editing Components

Master Component

You need to be in the component editing mode if you would like to edit a master component. Click on a component in the component panel or right-click on an instance of the component and select “Go to Master Component” from the context menu.

Editing a master 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 "Go to scene" button in the top right corner or you can go to any scene by clicking on a scene in the scene panel.

Master Component

Instance

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

When you want to reset the overrides of an instance, right-click on an instance and select “Reset Overrides” from the context menu. All the overrides are cleared and the instance will be the same as its master component.

Instance

Link with Master

You can link an instance of a component with its master component. Using this option, you can edit the master component by editing the instance without having to be in the component editing mode.

Link with Master

Variable Overrides

It is possible to override the initial values of variables. In order to override the value of a variable, you need to enable the “Make Overridable” option for the variable in the master component. Once enabled, you can override the value of a variable in the property panel of a component instance.

Variable Overrides

Interactions Outside a Component

Basically, components are isolated from scenes. This means that triggers and responses in a component cannot be assigned to layers and variables outside a component. Also, triggers and responses in a scene cannot be assigned to layers and variables inside a component.

To bypass this, you can use the Send response and Receive trigger. Inside the component, you can use the Send response to send a message and this can be received by a Receive trigger outside the component. This also works the other way around.

Inside the component, you need to choose “Outside Component” as a channel. Outside the component, you need to choose “Component” as a channel.

Interactions Outside a Component

Example

Checkbox Component

Language selector
TOP