Making Your First Prototype

Once you've 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 its unique conceptual model. This conceptual model serves as the foundation and backbone of ProtoPie. Every interaction you create in ProtoPie comes down to this.

Didn't install ProtoPie yet? Try ProtoPie for free.

1. Importing Your Designs

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

[object Object]

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 its unique conceptual model. Once you do, just combine the right pieces to create your first interactions.

Understanding the Conceptual Model

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

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

[object Object]

Objects could be, among others, any type of layer that is affected in some way. Either a trigger or response can affect an object. Triggers are those that would activate one or multiple responses. A response is a change activated by a trigger.

[object Object]

Inspired by the periodic table of elements, ProtoPie has its own version with two groups: triggers & responses. Each trigger and response have its own unique function and properties.

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

Learn more about triggers and responses.

[object Object]
panel trigger tap

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.

3. Testing What You Made

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.

  1. Preview window of ProtoPie Studio showing a prototype
  2. protopie-player

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

Learn more about ProtoPie Player.

4. Sharing Your First Prototype

Upload your prototypes to the cloud. Share the link of a prototype with stakeholders. Depending on the prototype, stakeholders can try it in the desktop browser, mobile browser, or in ProtoPie Player.

[object Object]

Stakeholders can use the prototype in the cloud for usability testing and share it with other stakeholders. Dealing with work that's sensitive? Activate password protection for your prototype.

[object Object]

Learn more about sharing prototypes.

Ready to Learn More?

Deepen your knowledge of ProtoPie with the following courses.

Want to join a live workshop instead? Join one of our live 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.

Or ask Leah, our official ProtoPie School teacher, any question about ProtoPie—she'll get back to you as soon as possible.

Back To Top