MenuToggle Menu


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.

[object Object]

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.

[object Object]

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.

[object Object]

Editing Components

Main Component

You need to be in the component editing mode if you would like to edit a main component. 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.

[object Object]

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.

[object Object]


Changing a property of a sublayer of a component instance simply means that this property is being overridden. 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 being instances of the same main 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 main component.

[object Object]

Use as Main Component

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

[object Object]

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 main component. Once enabled, you can override the value of a variable in the property panel of a component instance.

[object Object]

Swap Component Instances

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

[object Object]

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.

[object Object]
Back To Top