Making Your First Prototype

Once you have installed and opened ProtoPie on your computer, you are ready to make your first prototype.

Discover how to import your designs into ProtoPie, create your first interactions, test what you made, and share your first prototype.

To create realistic prototypes, it's essential to understand ProtoPie's unique conceptual model. This model serves as the foundation and backbone of ProtoPie. Every interaction you create in ProtoPie is based on this model.

Haven't installed ProtoPie yet? Try ProtoPie for free!

1. Importing Your Designs

Start with importing your designs from Figma, Sketch, or Adobe XD into ProtoPie using their respective ProtoPie plugin.

Import artboards or top-level frames as scenes, and objects with the same layer hierarchy, positioning, and constraints as in Figma, Sketch, and Adobe XD.

Learn more about importing your designs.

2. Creating Your First Interactions

To create your first realistic interactions, it's essential to understand ProtoPie’s unique conceptual model. Once you understand how it works, you just need to combine the right pieces to create interactions.

Understanding the Conceptual Model

The conceptual model serves as the foundation and backbone of ProtoPie. It's based on how objects move in the real world.

To create a prototype, you need to create interactions. To create an interaction, combine an object(s), a trigger, and one or multiple responses.

Object refers to the layer which needs to be affected by the action. An object can be affected either by a trigger or a response. The trigger is the action that activates one or multiple responses. The response is the change activated by a trigger.

This is a visual representation of ProtoPie's triggers and responses, inspired by the periodic table of elements. Each trigger and response has its own unique functions and properties.

There is a wide range of triggers and responses you can choose from. Prototyping with ProtoPie comes down to combining triggers and responses—to create any interaction you imagine.

Learn more about triggers and responses.

Let's look at this example. Once you tap the green rectangle, it moves to the right. This comes down to an interaction consisting of a Tap trigger and a Move response, both assigned to the green rectangle layer.

Of course, you can create more complex interactions. It's possible to:

• Have more than one response in an interaction.
• Assign different layers to triggers and responses in a single interaction.
• Control the duration and delay of each response.
• Control layers dynamically using formulas.
• Create interactions across multiple screens and devices

3. Testing What You Made

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.

Another way is to use ProtoPie Player, a free companion app to ProtoPie Studio. View, experience, and test prototypes on iOS, iPadOS, and Android seamlessly.

Learn more about ProtoPie Player.

4. Sharing Your First Prototype

Upload your prototypes to the cloud. Share their links with your stakeholders. Depending on the prototype, stakeholders can preview it on the desktop browser, mobile browser, or in ProtoPie Player.

Stakeholders can use the prototypes stored in the cloud for usability testing and share them with other stakeholders.

Dealing with work that's sensitive? Activate password protection for your prototype.

Learn more about sharing prototypes.

Ready to Learn More?

Deepen your knowledge of ProtoPie with the following courses.

• ProtoPie 101 Crash Course
• Tips & Tricks
• ProtoPie Workshops

Learning From Others

Join our communities and learn from fellow ProtoPie users. Engage, ask, and share anything that comes to mind. Find tips, tricks, and solutions that other users have shared before.

• ProtoPioneers Community
• ProtoPie on Discord
• ProtoPie Users on Facebook
• ProtoPie YouTube channel

If you're stuck with making your Pies or have a specific topic you'd like us to cover, drop us a message here: Ask ProtoPie.