MenuToggle Menu

Understanding the Interface

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.

The dashboard is the first thing you see when you open ProtoPie Studio. Explore all the useful examples and learning resources it features and elevate your ProtoPie skills!

Create a new Pie file or open an existing prototype. Find the canvas at the center of the interface, displaying each scene individually. The canvas is surrounded by, among others, the layer panel, toolbar, and interaction panel.

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

Dashboard

Open your recent prototypes directly from the dashboard. Access the prototypes stored on ProtoPie Cloud or any 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

[object Object]

1. Layer Panel

The layer panel lists all layers in a 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. 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.

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

To pan around the canvas, hold the spacebar and 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 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.

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 easy access to actions you'll use often in ProtoPie.

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. Find an overview of local components and interaction libraries.

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. Find an overview of the variables used across scenes or in your active scene.

Learn more about variables.

Back To Top