Understanding the Interface
Like a web browser, ProtoPie works with tabs. This way, it's easy to switch between prototypes. Work on prototypes simultaneously or refer to other prototypes—all within a single window.
The dashboard is your starting point every time you use ProtoPie. To get the most out of ProtoPie, explore various examples and learning resources.
Open a Pie, a new tab is created with an existing or new Pie file. Find the canvas at the center, 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.
Dashboard
Find your recent prototypes in one overview. Also, discover useful quick tips on creating common interactions you most likely will need.
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/e322afc8baddfc079a2ccdf0b3f8235ca1166321-1449x980.png)
Learn
New to ProtoPie? Try the various examples we prepared for whatever use case. Also, find workshops and documentation with explanations about specific features.
Support
Need help or additional resources? Find everything you need here. Visit our blog, share your desired feature requests, or join our communities. Our communities are great places to connect with like-minded ProtoPie users to learn from as well as discuss anything about ProtoPie.
Prototyping
![[object Object]](https://cdn.sanity.io/images/vidqzkll/production/7c59431e2a7680636b70d8db2306c786a7bba613-4680x2500.png)
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.
- 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
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.