Tutorials

ProtoPie 101 for Beginners

A beginner series by Soda Design, ideal for those new to ProtoPie. Learn how to make basic interactions with this course.

Adriana Diaz
Adriana Diaz, Social Media ManagerMay 19, 2021
ProtoPie 101 for beginners thumbnail

Soda Design is one of our ProtoPioneers. Her fun tutorials teach you the basics of ProtoPie and also guide you step-by-step to make your first interactions.

Introduction

Soda Design shares the journey she took to find a prototyping tool that was suitable for her. In this video, she explains why she finally chose ProtoPie as her prototyping tool of choice.

Basic Features

If you are new to ProtoPie, knowing what the basic features are is helpful. Soda Design guides you on what these are in the videos below.

In this tutorial, learn the following:

Import

  • How to import designs from Figma?

Please note: This tutorial uses the legacy import. In December 2020, we introduced the ProtoPie Plugin for Figma.

Media

  • How to add media, such as image, video, audio, and Lottie?

Save and share

  • How to save a prototype?
  • How to share a prototype?

In this tutorial, learn the following:

Device

  • How to select the device?
  • How to enable/disable the device frame?
  • How to change the background color?
  • How to use the system status bar?

Layers

Container

iOS background blur

In this video, she specifically covers text and input layers. Learn how to use these.

Text layer

  • What are the properties of a text layer?

Input layer

  • What are the properties of an input layer?
  • How to change the keyboard?

Once you are familiar with the basic features, proceed to make basic interactions.

Basic Interaction Part 1

Here, Soda Design explains how to make basic interactions based on our conceptual model.

Basic Interaction Part 2

In the second part, learn to make advanced interactions using the following:

For more tips & tutorials from Soda Design, check out her YouTube channel. Also, follow her on Twitter and Instagram for more inspiration.