ProtoPie 101 Crash Course: Beginner to Advanced

Taking on a new prototyping tool can be overwhelming, so our team has set up ProtoPie School where you can access free learning content on how to use ProtoPie from A to Z.

If you're looking for a guided learning path starting from the basics and progressing to key features, head over to the ProtoPie 101 Crash Course and follow along step-by-step using beginner to advanced examples. You can study at your own pace, and even share your progress with the Instructor and other students!

I’m Busy, Just Tell Me

We highly recommend going through the entire ProtoPie 101 course. But if you’re too busy, we've compiled five comprehensive workshops containing a variety of useful demos below. Please reference the timestamps so that you can skip to the section that you need.

If you get stuck with your Pies, check out our documentation pages with more details on each feature. Or join the ProtoPioneers community and get help straight from our ProtoPie experts.

Without further ado, let’s begin!

Beginner: Design Workflow and Basic Interactions

[0:51] How does ProtoPie work?

• Our Conceptual Model
• Objects, Triggers, and Responses

[13:16] The ProtoPie Ecosystem

• Studio: Your prototyping playground
• Player: Test your prototypes with a live viewer on iOS and Android
• Cloud: Sharing and collaboration

[18:29] Step 1. Importing assets with ProtoPie plugins

• Figma
• Sketch
• Adobe XD

[26:05] Step 2. Building basic interactions

• Repeat
• Looping
• Stop

[46:42] Step 3. Testing and sharing

[57:49] Step 4. Collaborating

Intermediate 1/2: Making Micro-interactions

[5:50] Demo 1: Page transitions

[29:47] Demo 2: Paging and scrolling

[49:03] Demo 3: Sliding menus

Intermediate 2/2: Using Native Sensors

[4:24] Demo 1: Camera

• Learn how to take a picture, and switch between the front and back-facing camera of your device.

[15:00] Demo 2: Typing

• Learn how to make typing interactions using your device's native keyboard.

[27:41] Demo 3: Voice

• Learn how to use voice command to enable smart home control.

Advanced 1/2: Logic-based Interactions Using Conditions

[5:32] Demo 1: Password reset (Condition)

[14:19] Demo 2: Image slideshow (Chain)

[26:35] Demo 3: Scroll-based video player (Range)

[48:11] What's the difference between Chain and Range?

Advanced 2/2: Using Variables and Formulas

[4:06] Demo 1: Camera Focus (Formula)

[9:43] Demo 2: Using values in multiple scenes (Variables)

[30:41] Demo 3: Slider (Components)

[1:16:36] Demo 5: IoT Home (Send and Receive)