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

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.

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

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.

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.

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.

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.

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.