MenuToggle Menu

Understanding the Interface

Learn more about ProtoPie Studio's interface.

Already familiar enough with the interface? Learn more about making your first prototype!

Dashboard

The dashboard is the first screen you see when you log into ProtoPie Studio. Explore all the useful examples and learning resources it features!

Find and open your recent prototypes under Recent Pies. Or open Pies from ProtoPie Cloud or .pie files saved locally in your computer.

Learn more about opening Cloud Pies in ProtoPie Studio.

[object Object]

Learn

New to ProtoPie? Find useful examples and resources to speed up your learning, including workshops and tutorials for all levels.

Support

Need help or have feedback for us? Visit our blog, submit or upvote feature requests, or join our user communities to get feedback and learn from others.

Prototyping

Prototypes open as tabs inside ProtoPie Studio, similarly to pages in web browsers. This way, it's easy to switch between prototypes and work on multiple prototypes simultaneously.

[object Object]

1. Layer Panel

The layer panel shows all the layers in the active scene based on their hierarchy. Learn more about how scenes work.

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

Layers from Figma, Sketch, or Adobe XD are imported with the same hierarchy they have in the original design file. 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.

The scene panel displays all the scenes created inside the prototype. In this section you can navigate between scenes and reorder them.

Learn more about scenes.

3. Canvas

The canvas contains your active scene and its layers. Scenes are displayed individually, one at a time.

There are multiple ways of adding layers to a canvas. You can import layers from your design tool, create new ones, or add them manually. Learn more about layers.

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

4. Property Panel

The property panel contains the properties and settings of a 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 interaction panel. Start by adding a trigger and pair it with one or multiple responses.

The interaction panel displays all the 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

It’s a visual representation of the duration, delay, and repeat properties of a selected response. The timeline reflects these properties as you edit them in the property panel.

Learn more about using the timeline.

7. Preview Window

Use the preview window to see your interactions in action. This helps you spot any errors in your interactions before you share the prototype.

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

If you want to hide the preview window by default when opening ProtoPie Studio or switching between prototypes, toggle it off in Preferences.

8. Toolbar

The toolbar gives you quick access to frequently used actions:

9. Component Panel

Like 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. It shows all the local components and interaction libraries available in your account.

Learn more about components and interaction libraries.

10. Variable Panel

Like the scene and component panels, the variable panel isn't visible by default. To access the variable panel, click on Variables. It stores all the variables used in your active scene, or across your prototype's scenes.

Learn more about variables.

Back To Top