Tutorials 3 min read

ProtoPie 101 Crash Course: Beginner to Advanced

How to get quickly started with ProtoPie, from beginner to advanced.

Leah Han
Leah Han, Head of Customer LearningMarch 22, 2021
ProtoPie 101 Crash Course: Beginner to Advanced thumbnail

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.

Shatabdi Biswas YouTube comment

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

ProtoPie Workshop: How to Use ProtoPie for Beginners

[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

ProtoPie Workshop: How to Use ProtoPie for Intermediates

[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

ProtoPie Workshop: How to Use ProtoPie for the Advanced

[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