ProtoPie for Beginners by Soda Design

Soda Design belongs to our pool of talented ProtoPie users in the ProtoPioneers community. Her fun tutorials teach the basics of ProtoPie and also provide easy-to-follow walkthroughs to help first-time users create key UI 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

• How do layer properties work?

Container

• What is a container?

iOS background blur

• How to add 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:

• Horizontal & vertical scrolling
• Paging
• Animation curves and timeline
• Chain
• Detect

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

Also, check out our very own ProtoPie School (https://learn.protopie.io/)where you can access free learning content on how to use ProtoPie from A to Z.