MenuToggle Menu

Understanding the Interface

Open ProtoPie Studio and find a familiarly-looking interface. ProtoPie has a similar interface to the design tools you already use for screen design.

At the center of ProtoPie Studio is the canvas, where you have your designs per scene. Surrounding the canvas are, among others, the layer panel, toolbar, and interaction panel.

Already familiar enough with ProtoPie's interface? Learn more about making your first prototype.

[object Object]

1. Layer Panel

In the layer panel, find all layers hierarchically structured per scene. Learn more about how scenes work.

Reorder, rename, lock and unlock, and hide and show layers in the layer panel as you do in other design tools.

After importing your designs from Figma, Sketch, or Adobe XD, the layer panel would show layers with the same hierarchy. Learn more about importing your designs.

2. Scene Panel

The scene panel isn't visible by default. To access the scene panel, click on the scene panel icon on the left side of the window. Find an overview of all scenes in a prototype, reorder them, and open a scene from the scene panel.

Learn more about scenes.

3. Canvas

On the canvas, find a scene and the layers in that scene. The canvas only shows one scene at a time.

Inserting different layers to the canvas happens in various ways. Import them from a design tool, create them, or add them manually. Learn more about layers.

To pan around the canvas, hold the spacebar and click & drag.

4. Property Panel

In the property panel, find the properties and settings of the scene, layer, trigger, or response—depending on what you select. Select multiple layers and you'll see their common properties at once.

5. Interaction Panel

Create your interactions in the interactional panel. Start by adding a trigger and pair this with one or multiple responses.

The interaction panel shows all interactions in a scene as a list. Unlike the layer panel, the interaction panel does not have a hierarchical structure.

Learn more about how to make interactions.

6. Timeline

Find a visual display of the duration, delay, and repeats of a response. The timeline reflects these properties as you change them in the property panel.

Learn more about using the timeline.

7. Preview Window

Run your prototypes in the preview window. Use the preview window to see your interactions in action. If your interactions don't work or you made a mistake along the way, you would notice it in the preview window.

By default, the preview window updates automatically as you make changes to your layers or interactions.

8. Toolbar

The toolbar gives easy access to actions you'll use often in ProtoPie.

9. Component Panel

Similar to the scene panel, the component panel isn't visible by default. To access the component panel, click on the component panel icon on the left side of the window. Find an overview of local components and interaction libraries.

Learn more about components and interaction libraries.

10. Variable Panel

Similar to the scene and component panel, the variable panel isn't visible by default. To access the variable panel, click on Variables. Find an overview of variables used throughout the entire prototype or across the scene you have open.

Learn more about variables.

Back To Top