ProtoPie 101 Crash Course: Beginner to Advanced

Learning a new prototyping tool can be overwhelming, so our team compiled 3 official workshops with real examples to get you started. If you’d like to learn about ProtoPie but don’t know where to start, this is it!

Furthermore, each video comes equipped with the Pie file for a practical hands-on experience.

I’m Busy, Just Tell Me

We highly recommend watching all videos from start to finish. But if you’re busy, please reference our time stamps below so that you can skip to the section that you need.

If you get lost on the way, check out our official documentation that provides an explanation for each ProtoPie feature.

Without further ado, let’s begin!

Beginner: Basic Interactions

[4:45] Prototyping process

• Studio : Prototyping software
• Player : Live viewer on iOS & Android
• Cloud : Sharing & collaboration

[6:15] ProtoPie conceptual model

[9:04] Workshop agenda

[13:43] Understanding the workspace

[16:08] How to create basic interactions

[20:41] Demo 1 : Repeat & looping

• Learn how to make an app icon shake repeatedly.

[35:22] Demo 2 : Slide menu

• Learn how to swipe down and allow notifications to appear on your screen.

[45:15] Demo 3 : Page transition

• Learn how to jump from your home screen to another screen.

[59:05] Demo 4 : Open a link

• Learn how to add website URLs to visit a website from your prototype.

[1:03:03] Demo 5 : Scroll & Paging

• Learn how to make your designs horizontally scrollable.

[1:11:11] Live Q&A

[1:16:41] Question : Can the paging interaction start from the middle of the image?

Intermediate: Chain, Typing & Condition

[1:25] Beginner workshop review

[3:07] Workshop agenda

[8:35] Demo 1 : Camera

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

[27:04] Demo 2 : Chain

• Learn how to move between stories by swiping horizontally.

[50:15] Demo 3 : Range

• Learn how to change the text by swiping horizontally.

[1:04:42] Demo 4 : Typing

• Learn how to make typing interactions by using the native keyboard.

[1:19:46] Demo 5 : Condition & Formula

• Learn how to make complex typing interactions. Password example: users who enter a minimum number of characters can skip to the next screen.

[1:43:00] Live Q&A

Advanced: Component, Variable & Multi-screen

[0:26] Intermediate workshop review

[4:13] Workshop agenda

[12:20] Demo 1 : Remember name

• Learn how to show your name on the second screen after typing it on the first screen.

[25:05] Demo 2 : Control light

• Learn how to update a number by using a slider bar.

[48:17] Demo 3 : Turn all off

• Learn how to reset the slider bars to zero all at once.

[1:06:04] Demo 4: Set initial state

• Learn how to set a slider bar to the initial height.

[1:15:16] Demo 5 : Voice prototyping

• Learn how to use voice to control a slider bar.

[57:27~1:05:18, 1:35:07] Demo 6 : Multi-screen

• Learn how to create interactions between different screens.

[1:47:25] Live Q&A