ProtoPie is Prototyping on Roids

Key Takeaways

today we're going to use a spiffy app called protopi to create this High Fidelity prototype that you can use on your mobile device protopi is prototyping on steroids because it gives you way more capabilities than say figma or adobe XD and if you haven't seen it there's a part one to this video linked below where we used figma to design everything we're about to prototype so be a good design student and watch that one first alright so the first thing you need to do to get started is go to protopy.io and click on get started here for free and then download either Mac OS or the studio for Windows depending on which OS you have and you'll be you'll need to create an account during this process and all that good stuff then here's the project I for our uh previous video that I created for the fictional app I'm gonna make this available so that you can access this if you want to follow along just to get your feet wet so to speak with protopi so what we need to do now is you need to install into plugins click on find more plugins down here and just type in protopy and install that plugin It'll ask you to log in and all that stuff and I have the protopi app open so it's a desktop app and what we do is we select the artboard or the frame whatever you want to call it uh and we're going to export that automatically to protopi so just to show you what's happening here over here in the layers I you'll see I have a couple things that are hidden we have the nav overlay that we built right there we also have hidden a or I didn't hide it yet I'm just going to take one of these slides because these two elements are real similar to each other so I'm just going to drag them over like that and then I'm going to hide it all right so now we could take this artboard or this Frame select it right click go to Proto Pi plugins protopi and then choose export now that's going to go ahead and load it up there we go all right and by the way if you click preview you'll see the preview now one thing you might notice is why is the background video not moving well that's because it can't export the video from figma so what we have to do that's the first task that we're going to do is we're going to re-import that video and get that working so right up here we're going to click on media and then video now that's going to open up your file system here my video happens to be bg3 I'm going to click this and expand it and I will try to remember to make this video also available in the YouTube description and then we want to put this at the very bottom delete the other one there we go click preview ah it does not work why is that well we gotta select it and choose right here play automatically in looping there we go once you do that this preview right here will start working and looping okay so there's a number of things that we wanted uh to to happen here and I guess the first thing we'll work on in no particular order is the hamburger menu and getting that thing functioning so we can see over here that we have our nav overlay now if we bring this out we'll see we don't really have the Blurred glass effect because it this protopi can all cannot also import that as a background blur layer so that's another thing that we're going to go ahead and recreate manually real quick so we're going to open this up right here we see rectangle three we don't need that we're going to delete it and I know it looks like crap right now but what we need to do is just go to shape choose background blur right there when you do that we left click and drag the entire width that we need and we're going to drag this over inside of the nav overlay I group just like that now you have some options here in the property inspector we have right here mainly the one that we want to adjust is the blur effects so the blur effects if I click this I'm going to get out of the way for a second we see we have all these options I system dark effects like we can choose material dark and when you start exploring with these you'll see um you know how these change like these are light versions these are dark versions so I'm just going to choose material dark over here and by the way when you go to preview this of course it's working here but when you go to view this on your phone because you can choose device and you can actually preview this on your smart device your phone I it'll only work that background blur effect I found that only works with iOS it does not work with Android so just understand that one limitation right there uh if I'm incorrect about that correct me in the comments Okay so here's our overlay and now we have some options you know how do we want this overlay to appear uh we can slide it in we could fade it in we can scale it in we can do all that stuff I'm just going to slide it in from the right to the left so that means we need to take this and the initial position up here of course is 0 on the x-axis we're going to push this all the way off screen right there which the position is now 390 because the entire width of this phone is 390 pixels so now that it's over here we're going to take this little hamburger menu and we're going to click add trigger right up here the type is going to be a tap because we're going to tappy tappy and then we are going to add a little plus sign and once so that basically means when you you tap it what happens we have all these options to choose from obviously a million times more than like figma in terms of prototyping and all that stuff so we just want to move something correct exactly so we're going to choose move all right so what exactly are we moving well that's where this drop down menu comes into play here we want to move the nav overlay on click and on x-axis we want to position it to where zero that's why I referenced that before we want it to be at the zero position we also have some other options here such as the easing there's a really cool editor that you can use that allows you to change the easing type and it just gives you a lot of options here we'll leave it at the default duration 0.2 pretty quick you know maybe we'll try point four you can add a start delay you don't want to repeat that element for sure and let's give it a shot so all we do is come over here we clicky and there is very nice so now let's get the little x button working as well so again you know the drill we'll double click to access it we'll choose add trigger we'll choose tap we're going to specify move and then we're going to take our nav overlay move back to 390. all right preview let's click it and click the X and there you go that freaking simple all right so what else do we want to try to get working here how about this little scroll indicator to kind of indicate that you can swipe left in order to get through our little pagination so to do that we're going to select it and we can see it's called rectangle one at the moment probably a good idea to rename this to something else we'll just call this swiper there we go now this swiper we want to kind of just do a looping animation where it's just kind of growing and shrinking something like that and in order to do that I what we want to do is go ahead and add a trigger the trigger will be a start so that means you know once this this app loads or this prototype loads right on start that's going to be the trigger so we click Start and then what do we want to do for us we want to scale it so in order to scale this properly if we try to scale it out of the box because this particular element was made in figma if we do this we're going to get squashed edges and we don't want that so when that happens we simply click up here make editable not like editable like eat it but something that you can edit like this and it's going to maintain those Corners perfectly so right now it's current X or width is actually 82.45 let's just make that 82. let's make the height 34. all right and so we want to shrink this to what value we'll come oops we'll select it again and we'll pull it in probably like to right here and that value happens to be 35. we could just say an even 34 to make it perfect all right so what we're going to back up and now that we have that reference we're going to go ahead and change or add rather scale Under start because we want to scale it so then what do we want to scale well we want to scale the swiper and it is selected right there and then what we want to do is we want to scale it to a width of 34. all right and I'm also going to go ahead and choose to repeat it and the repeat options allow us to specify a delay and we can also specify an interval like how many I at like what is the delay between the subsequent Loops I guess you could say we want this to be infinite so it's going to dim out this count and then the interval we'll go ahead and change this interval to something like I don't know one second all right so now if we preview this it instantly kind of goes pretty fast so let's change this to one second for the duration hit preview there you go you can still see how it I scaled in I'm going to hit refresh there we go closer look all right so now we wanted to scale back out so we'll take scale right here Ctrl C to copy Ctrl V to paste and let's drag this out so we have a little bit of more room so we can see what's happening here by the way hold your space bar and left click and drag to move things around and for this one we want to make this so that we push this up right there and this is going to scale to a width of what was it before well what is it now let's go click back over here it's 82. I completely forgot about that that value so 82 all right and the duration one the start delay has been automatically added to one notice if we move it it's going to change that start delay value right there all right um so let's see what happens all right that actually is pretty decent I think that's good right there we'll just leave it as that and we have our menu that works very nice awesome all right so let's move on to the next thing and the next thing is going to be taking this element right here and making it swipeable all right so we have to do a little bit of reworking but it's not that bad at all trust me the first thing we want to do is add a container and specifically a scroll container so a scroll container will house multiple containers up here which we'll get to in a second and depending on how many you have you're allowed you're able to swipe these uh horizontally or vertically so let's choose scroll container we are going to left click around just the general area from the very left to right of the artboard right there and so now we see container one over here I'll change this to scroll right there and it's empty it doesn't do anything at this point in time now what we have to do is I'm going to take this this scroll container and we're going to lock it so we don't select it and I want to take this element which is our headline and I also want to take this little scroll indicator uh we're going to make it a part of the first slide that pushes off when we move our finger so we're going to take those two elements and we're going to oh before we do that we're going to take our container and we're going to left click and drag out the same size roughly as the scroll container so container one we're going to change to a name of we'll just call it page one or slide one whatever and we're going to take those two elements once again I'm going to lock that so we can select them take both both of those and put them in page one then we take page one and put them in scroll there we go now we can unlock those now if we hit preview and we try to push this ah it's on the wrong axis it's up and down so what we do is we take scroll and we come down here make sure my head's not in the way we're going to choose paging and make sure directions there and containers up there as well we're going to hit preview and then I will push this and guess what we can't do anything else why because there's no other Pages offset to the right side of it like over here there's only one page container right here so what we do is if you recall we do have an empty slide 2 right here so the Design's already done for us so what we want to do is we'll bring that back I'm going to take temporarily um our scroll container we're going to reveal this all the way out here so we're going to take page one and just duplicate it and then move it over right there now I know it's kind of hard to see what's happening here but I'm going to delete these two elements from inside of it and then we're going to take slide two and we're going to place it right inside page two all right so now I'm going to move those items right over here all right that looks to be pretty good right there and by the way you know we could probably temporarily hide this if you want to see like what this looks like that way we can take it and get this evened up right where it needs to be all right so we'll bring this back just temporarily all right and now for scroll we're going to go ahead and bring that back in notice how it hides because it's a scroll container so if we hit preview we drag it over and look at that it just it's easy and it works well now we can do the font one final thing we're going to take our scroll not final thing but one more thing rather we're going to take this and push it out pretty far again just so we can see this we're going to duplicate page two now we have page three here's our third slide all right so handy tip here right now this text is not editable but we can make it editable like that it's currently using B boss Chi font and we can just go ahead and change this to something else choose your voice over or something like that and then again you can go ahead and make all this stuff editable and edit however you wish I'm just going to change this to step two and just leave the rest there and now if we take our scroll all the way back in where it needs to be hit preview we have our three elements now another thing I want to do that I actually didn't cover in the previous figma tutorial while we were designing this whole layout is to add Lottie animations which is another way to add animations and it's very simple to do and so I have a lot of Animation I want to add for this step one right around here and then also another one right here and so I'm going to show you how to integrate a Lottie animation so you'll need a free account I searched for something like person in order to get this right here and I like it because it's black and it's simple and we can edit the color we actually need ours to be white because we have like that that darker purplish background and so to do that what we do is come down here and we choose and by the way I'll remember to link this specific file in the YouTube description edit animation when you go into their editor it's going to allow you to specify any colors that I the person who created this allows you to edit essentially so I'm going to change it to White all right once that's done we click this download and this one's called avatar.json so Lottie files are in the form of Json Json or what however you want to pronounce that files and then we come up here and then we choose media Lottie and then we're just going to go ahead and I'm going to copy and paste my downloads Avatar there we go look at that so it's ready to rock also you want to choose play automatically and looping because we want it to play automatically in Loop and we want to put this in this one goes into page three so real quick I'm going to drag this out so we can see what's happening our scroll container all right we're going to move our Avatar over here scale it down probably something around this size like right here and we're going to place that into page three right there now I also have another one that I downloaded and we're going to import that and this is called recording Spectrum so this is a cool little animation and again we want these to be roughly the same size and I'm going to put this probably right around here and play automatically and click looping now we can take our scroll move it back to where it wants to be and then hit preview watch this ah oh that speak I know why that happened because I didn't put this into the page two container and that needs to go into our slide all right I think that'll work now look at that look at this one it's just kind of hanging out down there it might make some more sense to put this above step two and move everything down a bit but yeah it works still awesome so our app is really coming along I really like what's happening so far now this is an issue right here and that happened because our novel relay needs to be on top of our scroll container so I'm just going to drag it up there and now our nav is seated nicely right there okay next up is going to be one of the final things and that is to get these three little pagination dots moving over based on the current scroll position of the scroll container so in order to do that what we have to do is set up a few things and this is more I would say intermediate but don't worry I'm going to hold your hand and we're going to do this together and it's going to be fun so what we need to do is first set up a what's called a detect trigger all right so we want to detect something we want to detect at what position the scroll container is in all right that sounds weird but you you'll figure it out don't worry so we've added a detect and we're detecting what up here we're going to choose a condition or wait no no we're going to choose I'm sorry our scroll right there and what are we detecting we're going to detect the scroll all right so scroll scroll hopefully that makes sense all right next up we're going to add a condition right there so the condition will be if scroll we're going to change this to scroll as well equals zero all right now why is that because we're setting this up for this first little scene right here this means if this right here this slide synthetic AI for voice synthesis whatever that means is present is that's the one that's in view then we want to make sure that this little dot down here the white one the high contrast one is in position one right there all right so let's actually zoom up and let's double click into that it's called ellipse four but let's name it something better uh we'll call it current dot all right so current dot remember that now what is the current X position of current dot 17.08 let's copy that I'm going to memorize that and what we want to do is under condition is we're going to add a move all right and the move is going to set our element down here current dot to an X position of 1708. all right so the duration is 0.2 maybe we can make that like 0.4 don't want it to repeat or anything like that now if we went to go play nothing's going to happen because by default it's already there so we have to add a another detect so we're going to take detect right here copy it and then paste it so that's going to memorize and just copy everything that we have associated with it so this is going to be for page two so detect scroll scroll that stays the same condition this changes to 390. because that's going to be the X position of the second slide all right now then we take move and we have to change the X position of the current dot up here and so in order to get that X position we're just going to move it over manually so we'll take current dot move it over right there looks good that's 44. the position is 44 right there so let's control Z to get back out of there we're going to specify 44 in this you know version of the attack the second one that we duplicated and hit enter now if we're lucky it's going to work so let's check her out ah yes so we need to check the scroll container width is 391. we actually want it to be 390 and when we do that we're going to go ahead and take this move it over and look at that moves over now it's not going to do the third one why because we haven't created the third copy so we're going to paste that change this here 390 plus 390 998 is 780. and then we're going to move this to the third option or the third Little Dot which is 70 on the X position so we take move changes to 70. preview it and here we go look how nice that is all right so a lot of stuff Happening Here we have the animated background we have this pagination occurring here we have our Lottie files working here we have our menu working and yeah this is all awesome awesome stuff so that is just a pretty simplistic tutorial of the things that you can do you can do much much more here in protopi in terms of creating really cool animations uh and highly interactive prototypes that allow you as a designer to accurately kind of convey what you want with your projects all right I think that pretty much tackles everything that we wanted to do here and that is it alright as always make sure to subscribe if you haven't yet click the Bell notification icon do me a big favor leave a comment and leave a like and I'll see you all soon goodbye