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]](https://cdn.sanity.io/images/vidqzkll/production/e322afc8baddfc079a2ccdf0b3f8235ca1166321-1449x980.png/dashboard.png)
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]](https://cdn.sanity.io/images/vidqzkll/production/a136fc17471daa56a8fbbc8884766c729b6e1fd9-4350x2400.png/understanding-the--interface.png)
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.
- Add layers.
- Change the device of a prototype.
- Use the preview window.
- Try prototypes in ProtoPie Player.
- Share prototypes via ProtoPie Cloud.
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.