Components

Components allow you to save sets of layers and interactions, making them reusable throughout your entire prototype. Simply select the layers and interactions you want to reuse, convert them into a component, and create instances of it across your scenes.

Here's why components are a game-changer:

• Eliminate Repetitive Work: Say goodbye to recreating the same elements and interactions over and over again. Components let you create once and reuse anywhere, saving you valuable time and effort.
• Enhance Readability: With Components, your scenes become cleaner and easier to understand. Instead of cluttering your prototype with redundant elements, you can use instances of components for a more organized and efficient design.
• Accelerate Workflow: By reusing components, you can rapidly build and iterate on your prototype. Make changes to the original component, and all instances automatically update, ensuring consistency across your entire design.

Using Components

Creating Components in a Scene

Transforming layers into components is a breeze with ProtoPie. Follow these simple steps:

1. Select the layer(s): Choose the layer or multiple layers that you want to turn into a component.
2. Click the "Component" icon: Look for the component icon in the toolbar and give it a click. Alternatively, you can right-click on the selected layer(s) and choose Convert to Component from the context menu.
3. Voila! Your component is ready: ProtoPie automatically creates a component with the selected layer(s) and their corresponding interactions. The original layers are replaced by an instance of the component.

Creating Components Directly

Components can also be created 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 the active scene.

Editing Components

Main Component

To edit a main component, you must open the component editing mode. To activate this mode, click on a component from 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

In ProtoPie, modifying sublayer properties of a component instance is a breeze. Here's how it works:

• Override with ease: When you change a property of a sublayer within a component instance, you're simply overriding that specific property. These overrides are unique to the instance and don't affect the main component. This allows you to customize each instance independently, giving you flexibility while maintaining the core component structure.
• Keep changes intact: Even if you make modifications to the main component, the overridden properties in the instance will remain unchanged. This means you can freely experiment and iterate without worrying about losing your customizations.
• Reset with a click: Need to go back to the original settings? No problem! Simply right-click on the instance and select "Reset Overrides" from the context menu. All overrides will be cleared, and the instance will revert to its original state, mirroring the main component once again.

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

It's possible to override the initial values of variables. You can do so by enabling the "Make Overridable" option in the variable in the main component. Once enabled, you can override the value of the variable in the property panel of the 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 right-side property panel, you can effortlessly swap any component instance with another in just a few clicks.

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", they would be grouped as shown below.

Are you ready to take your prototyping skills to the next level?

Join the Digital Dashboard Masterclass and gain expertise in organizing assets, creating reusable components, and implementing smart logic.

If you want to learn how to reduce work duplication, build efficiently and scale interactions effortlessly, join the newest Mobile Game prototyping masterclass.

With this advanced knowledge, you can focus on the more critical tasks and take your projects to the next level, ultimately leading to a polished and robust final product.

Don't miss this opportunity to improve your skills and become an expert in prototyping!