ProtoPie Bootcamp: Bare Essentials in Less Than 2 Hours
With Darren Bennett's ProtoPie Bootcamp course, you'll be surprised with the prototypes you can make all by yourself in less than 2 hours.
.png?fm=webp)
Our team has set up ProtoPie School where you can access learning content on how to use ProtoPie from A to Z — all for free. We've curated it in a way learners can study at their own pace, in their own time. But we understand that, sometimes, carving out sufficient resources to master a new tool can be tough.
That's why we'd also like to share ProtoPie Bootcamp by Darren Bennett from ProtoPilot. Its sole focus is speed—it's meant to get you up and running fast.
In less than 2 hours, you'll be surprised with the prototypes you are able to make with ProtoPie yourself confidently.
Course Content
The first 9 videos teach you how to create amazingly realistic and dynamic prototypes. The last 2 videos are extra and show you how to make your creations reusable and scalable.
- Importing
- Creating an interaction
- Scrolling and paging
- Conditions
- Scenes
- Text input
- Variables
- Formulas
- Detecting Stuff
- Components
- Messages
1. Importing
Learn how to import your designs from Figma, Sketch, or Adobe XD into ProtoPie.
ProtoPie isn't a replacement for your design tools. Instead, ProtoPie works in combination with Figma, Sketch, and Adobe XD. Think of ProtoPie as peanut butter and the previously mentioned tools as jam. They are both delicious individually. But together? A match made in heaven.
Follow along with these assets:
2. Creating an interaction
Learn how objects, triggers, and responses work. With these three, create your first interaction.
Sticking to the previous analogy, creating your first interaction feels a bit like taking the first bite of a peanut butter and jelly sandwich. What you learn here is fundamental. Every interaction you'll make—small or big, conditional or dynamic—follows the same conceptual model.
Follow along with these assets:
3. Scrolling and paging
Learn how to add scrolling and paging to your prototypes.
Scrolling and paging are the workhorses of modern mobile app and web design. Most likely you will always need at least one of the two as the foundation of your prototype. Discover how to turn a bunch of static layers into something interactive using scrolling and paging.
Follow along with these assets:
4. Conditions
Learn how to make your interactions conditional.
The beauty of ProtoPie is that you can make your prototypes behave based on certain conditions. Rather than sticking to one fixed "happy path", prototypes in ProtoPie are realistic and can cover all real-world scenarios you have in mind.
Follow along with these assets:
5. Scenes
Learn how and when to use scenes following a practical example.
Scenes are comparable to top-level frames in Figma, and artboards in Sketch and Adobe XD. It's possible to make click-through transitions by connecting scenes. As click-through prototyping isn't ProtoPie main purpose, discover how and when to use multiple scenes.
Follow along with these assets:
6. Text input
Learn how to get real text input and use that text input for interactions.
It's important that users interact with a prototype the same way they would with the actual product. Text input, often overlooked and underestimated, is something you can add to your prototype. It doesn't end there—you can use that input to create dynamic interactions.
Follow along with these assets:
7. Variables
Learn how to use variables and store reusable information.
Put simply, variables are storage for values. They are called variables because their values can constantly change. A simple example would be updating a counter. Other use cases could be simply storing a name that's typed in, holding the count of items in a basket, or remembering the total amount in a bank account. The possibilities are endless.
Follow along with these assets:
8. Formulas
Learn how to use formulas without any programming knowledge.
You might have come across formulas in apps, e.g., Microsoft Excel or Adobe After Effects. Formulas are single-line instructions to make dynamic interactions. It's fair to say that formulas may sound "codey" or complicated but they are not. With a little knowledge, you will be able to create astounding interactions that you thought only engineers could do for you.
Follow along with these assets:
9. Detecting stuff
Learn how any changes in a prototype can trigger a set of responses.
Detect is one of the most useful triggers you have in your arsenal. Any change in your prototype, whatever it may be, can trigger a set of responses. Did this object move? Was this button tapped? Did the variable change?
Follow along with these assets:
10. Components
Learn how to reuse your interactions and make components.
Once you have discovered the power of ProtoPie, you might want to know how to create reusable sets of layers and interactions. Components in ProtoPie are similar to components in Figma or symbols in Sketch. The difference is that the ones in ProtoPie contain interactions. The more reusable UI elements you componentize, the faster you prototype.
Follow along with these assets:
11. Messages
Learn how to make components "communicate" with each other.
In the context of components, messages are needed to make components communicate with each other as well as with the scene they are used in. For example, a search component. A search component needs to work with other UI elements in the scene. Then, send a message with the inputted search term to the scene and make certain responses happen based on the received message.
Follow along with these assets:
Want to learn more?
Got excited about ProtoPie and want to dig deeper? Check out Darren's in-depth course, Total ProtoPie, in which he teaches you in 7 hours all there's to know about ProtoPie. Also, check out some of Darren's exclusive ProtoPie tutorials on Patreon.
Join the ProtoPioneers community where you can ask questions and learn more from ProtoPie experts like Darren himself.
.jpg?fm=webp)
.png?fm=webp)
