Lessons: 7Length: 53 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.1 What Is ProtoPie?

Welcome to lesson number 1, where you’ll learn what ProtoPie is, where you can get it, how much it costs, and what you can do with it. Let’s start from the beginning.

2.1 What Is ProtoPie?

Welcome to lesson number one, where you'll learn what is ProtoPie, where you can get it, how much it costs, and what you can do with it. So let's start from the beginning. ProtoPie is a desktop app you can use to create high fidelity prototypes. It works on both Mac OS and Windows and you can download it at ProtoPie.io. So we just click this button depending on your operating system, it's gonna download the appropriate file. So let's go ahead and download and open this. All right, currently I'm using a seven day free trial. This is a paid app, but you do have the option to use it for free for seven days. And there are a couple of examples they give you here. Let's just click on new pie, and this is it. This is the main interface. Now, I should point out that ProtoPie is not a design tool. It's not a design app like XD or sketch. Instead, it's a prototyping app. So it means you need to bring in your designs from somewhere else. You have this import option here. So currently in ProtoPIe you can bring in designs from Adobe XD, figma, and if you're using the Mac OS version of the app, you can also import sketch files. But because I'm using Windows right now, I can only bring in designs from Adobe XD and figma. So the way it works is very simple. Once you've finished designing your app, your website, whatever it is that you wanna prototype in one of these apps. You just open up ProtoPie, you import your design files as we'll see in the next lesson, and then you can use the various options in the app to create your prototypes. Now let's do a quick tour of the interface right here on this left sidebar. You have access to your scenes and to your components. On this top bar, you have access to your, some of the most common tools so you can add your own images. If that's what you want, you can add your own media. You can add some very simple shapes. You can add text, and you can add some containers, like scroll page and containers, these are more advanced frankly. Moving forward we have options for the device that we wanna use to preview our prototype currently by default, it's set to an iPhone eight size, but you can always change this to a larger size. And here on the right, we also have some options for previewing, testing on different devices, and uploading the prototype to the Cloud. This is the layer panel, so if I'm gonna add a rectangle here, we can see it also being displayed here on the layer list. This is the main Canvas where you see your currently selected scene. And this is where you will do most of the work in a ProtoPie. This is where you add triggers, responses and ultimately you will create animations. This panel here serves as an inspector for the various elements you have selected. You can change various properties. All right, so, what can you do with ProtoPie? Well, we can actually take a look at some of the examples provided by the team at ProtoPie, right? So let's open up one of these. As you can see, you can toggle between different elements here. So this is an app designed in a different software, but when it's being run through ProtoPie, this very interactive prototype is being created. Let's look at something else like this music player, for example. We can see here that we have also some different triggers like when we click and drag through one side. To the left, we get the lyrics, we click again, it takes us to the artwork for the album. Let's look at another one. Maybe this card UI, right? So as you can see when you click on one of these cards, we have a very nice animation that rotates this entire thing. And this is created in ProtoPie. So these are just a few examples of what you can achieve with this application. You can also check out some of the other ones and you can even see a preview right here which is fantastic. Now as I was saying, ProtoPie is a paid app. And currently it goes for $11 USD a month for the individual plan. So with this you basically get all the features, but you lack the ability to collaborate with others. If you want that you need to pick the team plan which is 42 USD a month per editor. So depending on your needs you would pick on one of these two. But for most people, I imagine the individual plan is the most popular because creating these prototypes is something a lot of freelance designers are doing for their clients. So in our $11 a month will be a very sensible amount if we think about the kind of power that we get with this app. So that's a quick intro what ProtoPie is all about. Now lets start using it, and the very first thing you need to do after creating a new project in ProtoPie is to import your designs. So we're gonna do that in the next lesson.

Back to the top