Protopie Studio Essential Training: Fundamentals | Kehinde Akeredolu | Skillshare

Protopie Studio Essential Training: Fundamentals

Kehinde Akeredolu, Product Designer

Protopie Studio Essential Training: Fundamentals

Kehinde Akeredolu, Product Designer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
10 Lessons (29m)
    • 1. Welcome

    • 2. How to use the project files

    • 3. Quick Interface Tour

    • 4. Layers and Containers

    • 5. Scrolling and Paging

    • 6. Importing Layers from Adobe XD

    • 7. Triggers and Responses

    • 8. Conditions

    • 9. Recording and Sharing

    • 10. Next Steps

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class


Protopie Studio is a powerful platform for creating micro-interactions for user experiences using the object, triggers and response relationship. In this class, product designer Kehinde Akeredolu introduces the design tools and workflows in Protopie. Learn how to set up a Pie project for interaction design, use scenes to keep your project organized, and start working with layers, triggers and responses. Find out how to manipulate shape layer for live masking. Then discover how to use power tools conditions, and leverage assets from other applications like Adobe XD. By the end of the course, you should have everything you need to know to create your own micro-interactions with Protopie Studio.

Meet Your Teacher

Teacher Profile Image

Kehinde Akeredolu

Product Designer


Hello, I'm Kehinde. I'm a product designer based in Lagos Nigeria. I love visual and interaction design. I switched my career two years ago form digital marketing to UX Design. It's been a great journey so far and I've learnt a lot and I'd like to share some the skills I've learn't with you.

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. Welcome: hello and welcome to put up our studio. Essential training. My name is can be accurate Blue I'm a product designer on also and this course are been teaching you how to create beautiful micro directions that make you use experiences shine before you jump into this course you shouldn't be from in there with a db x to your sketch . I will be using the Doobie X T to create visual animates for interactions and prettify. If you're unfamiliar with either of these applications, I recommend studying one of the author beginner courses in the library. But if you're ready, let's get going. 2. How to use the project files: the project. Fouls included with this class contained the Doobie X'd prettify. Fouls will be starts in the classroom, a brand new project, but you can always reference the final prototype if you make a mistake or you get lost. Project files are included toe dimensional in experience, so I would appreciate it if you do not use it for personal or commercial purposes. 3. Quick Interface Tour: So we're here at the start screening Pretty price studio. Here you can view your recent falls. You can open a new pie or create a brand new one. You have more resources like materials, documents, social media and community forms. You can also jump quickly into some quick tutorials like basic movements, scrolling conditional statements from your input layers. Let's start by creating a new party and here we have our converse. So up here you have your two bar files you can open receive clues, imports you have you edits copy piece electoral. You can certainly as you can. No objects. We're groups can group them from here. If you have them selected, you can zooming the zoom out. Or you can come here human and your note. You can run your device in here if you have a thin a physical device, You can also preview from here the same things you can do here, some of which you can also do on this panel here. So this is your converse your capacity called the space bar. But you can move around if you want to happen. Field in a device for him. You can move that device frame by total In this put in here. Over here you have your object panel. So if you add any objects to the Congolese working shapely this level you can see here you can actually rename its circle and then you can move it around. Connors moving around The numbers you see over here from the scene pedal changes in this position are reflected Sweeping secret position is changing here. If you change the size, sighs is also being reflected. So this panel is context sensitive. It shows you what's currently being selected on Converse. If I click on the converts itself issues me the Converse properties click on the oval. It shows me the properties of the ruble part this planet overhears sugar panel on Mrs Black and add sugars like touch triggers, conditional triggers mouth sugars. If I'm creating an interaction, Dexter, I love too key triggers or input Sureness. This trigger is called a sensor trigger they only used on physical devices. We won't be using physical devices in this class, so this would be left for that vast us to be made later in the future. We'll talk about all these sugars here in this basic cross. All right, so over here you can have a pee view of you puts types of if I move this circle over here coming a few changes in my previous here. 4. Layers and Containers: in purpose, did you? They are variously as that can be imported into your scene. You have image layers, video layers. She players text lives shapely s you can import rectangles are overalls for text. You can actually import text, want input layer. That's the crux and images from our protocols. Right. So this image of us came in to launch. We've been coming over here to the size panel. Just repeat stuff, too. All right. So as we move this over, we can see we have some properties that you can just if we wanted to adjust in rotation. If you do that from the scene panel on the properties panel No, let's combine that with the shape She added. A tango, for instance. So this shape we can move Tunggal skill. That's I use it as a mask. TV has a mask. You have to drag it on the ship and the mask you still like to. It's still like that's the difference between precip iron and to be extra, you can actually still move your mask around. So what if a type of layers can we have won't be talking about video layers on text layers in this course vests more advanced but have continuous containers of basic creatures, a group of two or more layers. So for to have a container could come here on just another image. De starts to 200 right now is actually masking Bruce Pictures, but I can't leave it down. I took way, so it's no longer being masks. And then I can just press control de to duplicate this. Had that the US places, I can come over here and just have a cantina shift clip. Drag all of these elements into the content. Answer these old group together in that container. And then now, when I click on the container, get the properties every continent in the properties panel here, I can move this. Continue around. This continues restricted to this books, but you can see it's tracking all the layers with it on. Its position is also changing in the properties panel as well 5. Scrolling and Paging: right. So it's look out scrolling and pigeon. So make a scrolling interaction. You have to 1st 3 to school cantina. Then you have to have elements inside that container, so I could have maybe erect uncle and I just dragged out 10 going just just heart. Our container is over here. I would like to screw with schemes. I'm just going to make that continue for another with the screen. I mean, if about rectangle, I'm just gonna come over here just gonna duplicated several times by using control, D you know, just drug drug. More copies. Basically drugging along the y axis drug, more cookies. I went ahead of us to preview. Nothing happens. Have to drug all my objects into the scroll cantina, and then I can screw with them, but container. So the whole width of the screen is basically my school in the area. Paging walk Slightly different. So let's just make this invisible, like talking this I for paging. More secretive container goes to make it the week of the screen before PGE in. If I have let's see a rectangle on. I want to make that whore rectangle with skin duplicate that rectangle twice and then I couldn't move. Get to decide. Leave this to decide. I could change this cooler here. Just make it something a bit different. Change discovered here, Thank you to be different. And then I would shift quick and drink all money objects into that container and then, when a preview actually screwing between peaches. Now the way that works is if you go to this party, you can actually see your control. I can be set to none, and it wouldn't do anything we wouldn't school. Wouldn't page she Concrete's basic container and then making teaching. Continue by just clicking, either. Here we're here to make this good content. You can choose the direction of the pigeon if you choose the bounce. If it's if it's if it's now set bounds. If you don't want it to over school, you can see I can't move it any more than that. But if it's on bounds, then I can adjust it a little bit. Any. Who's back? Drug T But they were driving all the week hits blocked for drug About a week it comes in if I try just a little bit, so that's P gin 6. Importing Layers from Adobe XD: So we are now in a Doobie X'd. We have three our ports forward to its interaction. We have the routine airport, the crop up port on the crop top port. So we're moving from rotates to crop. Um, we're gonna head to prettify right now. Country Want to send our screen on the converse on to import You simply go to file import Adobe X'd we can achieve from our screens. Now it's important to note that went importing You have to have the right density right now we're set a two x on the sea on this deemed out version of devices, actually the iPhone X for three X. What happens if you import in two X? This is what happens so you don't get the correct size. Let's indeed that lets imported correctly. Imported out three X Right? So that's it. We've imported our txt file. We can come over here to creating you. Seen it's Are you seen scripting mining? Seems we're gonna just call this t. You just double clicked. Who called this? You cannot any scene. Here's our all this throat, Cruz. So this crop screen looking good to import the baby X'd clear structure you hear about to the crop. Seen good to imports to be X'd. Let's port. Right. So this is cool. I'm gonna go back to the crop seen just for a moment. Just want to show you something. So we never would be important to be a week and you can actually cheese to import just one layer other, all theirs. And to do that, it's good to be X T. And she's Toby on Mark for batch export. So if you total this and it's when you come back to pretty by studio, we need good to file import reported to the extreme just she's only layers mark for bad export. You go to the screen, that is correct. We import that and back comes into a scene like that. So we're just gonna leave this here from Just leave it somewhere here. Yeah, that's OK. 7. Triggers and Responses: right. So the first thing we're gonna do now is to creates a region of interest. That's where I was gonna be made. It's a do there. We're gonna come here, cretin. She one is an old ship to be below this picture, but I use it as a mask. And what I want to do is I wanna have it 1 50 in terms of its size drug here, just spit it on the frame. I'm gonna select use as mask. So what happens is it creates almost like a revealing feel, because this stream is basically a black rectangle from my txt that was imported at 15% capacity. And so it looks like it's hiding the same goofy picture behind you should review We're just gonna be name this region off interest. And obviously this this scene is called rotate. So we're gonna irritating this year to do that. Let's head to they're rooted, right, But which is what I'm going to use because obviously the pictures retreated. Left right, 90 degrees on. We're gonna get Patrica when we tap on the rotate. Right. Putting be once to treat this crop area. Come over here to your routine here. Just choosing 90 degrees. We're gonna rotate to the right in the last 4.2 seconds. So that's see what I missed, right? So it's no root eating exactly how you would want it to that, because the crop areas Origin Point said to the top left hand corner, right there we need to do is to have it set in the middle K Rit eats around its centre. And once we've done that, now we can go back to a preview click Gerty, and it does seem to understand it sent him. Now what I would like to have is to have it shrink on in large at the same time. I said routine because right now it's it's root eating. It's corners touching the edge of the screen, which is in next. So to do that, I'm going to come here. So that skill, that's a skill. I'm gonna skill the crop area. I'm gonna steal by a factor 75%. You've been skill by size, which is an exact body, or you can skill by factor. If you didn't have that's still evolving mind. Soon that's done. I want to scare box. I'm just gonna go back to copy and pieced Change this buck too percent. I'm gonna bring this down here because I want to ask you So how come before reputation? No, it's PV that right? Actually seeing escaping grain on. That's to do with time. So right now, our rotation is helping exactly as the same time as the scaling is happening. So we need to enlarge this. So it's drug this back and forth to increase situation. What we can do it just from the property spinal was going to go back to you 0.4. Then we can preview it again the previous. This time you see the same effects, you can actually see the scale. Isn't that the reason for that? That's because scaling down and scaling no happy notes at the same time. So we need to have it, really? So we have a believe me at first skill down. Then we skill up on drop at same time over a teacher. So preview again, that's what That's exactly what we wanted to find. Not our petition is done. We need to jump to the next scene, which is a corporate screens do that with another response. Our responses jump. We jumped to trip screen and we don't want to jump immediately after tap. You need Tito happen after. Be irritated. See, we can add a rotation off point just to give some space a lot of decision to to come to be completed and to give, like, a rest period so we can do that again. Part when you see jumping medically to Mexico. 8. Conditions: right. So we're here in the crop seen on. We're going to create the Copan interaction here. So what we need to do So the first half Our region of interest we do about creating a level . You said that over to 1 50 15. Right? Select it on. Let's drug it over here. Drug it under the picture. Andi, we're just going to center. It's in a frame. Let's make a copier. Make sure Leah's touchable the oval. All right. Drug trigger. Rename this, we give him the last scene Region of interest with me. Try to directly wanted to be between me on We want t me opened down, Not sideways but freehand So wherever we drug it too So much tribe out now Oh, yeah, We need to make this a mask strike right now so we can drug But as you can see, we're dragging outside the frame. I don't want that to be the case. I want a drug within the limits of our frame off the crop area. To do that, we go to move response on. We set the limit to limit to container. Remember the containers? This copier? So we tried to drug again were limited to the container to the copier, which is what we want now. We also want to have happen, has been set. This profile for two wants to simulate the experience where only the original insurance remains and everything else feeds to the background. General corporate offices. So to do that, we're going to be set. But in another top trigger tap set. But in what we want to happen, we want the capacity of the crop area to get zero. Just sit back. The property is opacity said that zero are also like the a pass ity of the unused areas which is this region here. The unused areas to use his here She I said that to zero as well. Also like the set foot in itself. Also core PNP start set button. This is here. So this preview that see what direction Drug. Actually, there's one more thing that for good to do. So right now it feels like a region of interest is to small elected to be a lot more negative space around the head. What I like to do is I would like to increased, so that's out under another trigger but I want to check it to be in the region of interest . I want to have a double time when I double talk. I want to scale skill to this time. 200. It's about work. So when I double tap, I would like to skill see by inaction that's not working over still set to the set bottom. So it's supposed to be region of interest. You should work now. Double Tuck would have interests, skill schemes, skill, the region of interest so skilled the reading of interest to 200 parts. Preview right. It's gaining right now from the top rights because that's the origin point. So we need to change the region of interest to the origin. Give you what skills now I want when we double top again elected to go about back down to the original size. To do that, I'll just add a condition here. Under condition is if the with division of interest is equal to 200. Um, with first the region of interesting game on the heights this time the 4 to 200 within I would like skill division of interest back down to 1 50 you see by inaction. Double talk to scale. Don't talk to scale again. And that's because we set the condition that when we have 200 of with and heights, you don't want to scale again. Because already at 200 won't scaled down again. That's cute. She can double top and selected Betsy Region for perform, picture and set Set us before picture. The last thing obviously wanted these want to move it to the position where it is in our next. You can see that by going toe. Put your files a new being. No, that would be Eckstine. So in the crops are quote. We can see that the profile picture is a disposition. It's on a teeter on the X axis at 1 20 it's on the Y axis. So if we head back to Carter Pie, we have our courts picture here. It's been hitting all this time. Remember, be imported it through the about exports. The last movie. So what we want to do is you want to move this to that position. So when we top this set foot in another response, the cropped proof pick shouldn't to 88 on the X axis 1 20 on the Y axis. When it's moved, we want to jump to the next scene. Vaccine is print none. This is resolution of 0.2, so you better believe that to his well from the jump happens at the end of the movie. So let's preview that great. That's an interaction. 9. Recording and Sharing: right. So here are first seen on. We have ah interaction completed. Now, I would like to record our prototype. Do the head over to the PV top Tokyo preview. Your preview window opens up and you can just click record from here. You can set the speed, you go slower or you can go faster. We're normal speed now, so I'm gonna click record and performer Interruption and that's it. I click the court again to stop. Well, I conceive my recording the MP four format. I already have my recorded foul done, So he's gonna go console and see what that looks like. Head to my next up. Open the project crowds and open record. That's what the recorded vision looks like. No, I'm gonna head back to fruit pie and you can actually shoot by green here to be upload button so you can just click this occlude. I already have my no polluted. I'm just going to see what that looks like. You can see it over here after the you are also gives you a unique e on. You can share this on to know Facebook. You can download it. I look in your mobile phone soon. You can actually interact with you in the weapons will. That's really cool. 10. Next Steps: thanks for watching this class. I will be had a phone time than in the fundamentals of Pretty by studio show to complete the class projects and she directions on social. If you have any questions about the cloths on the project referred to contact me, we only covered the basics in this class. But if you're interested in creating more complex interruptions and watch out for my advanced class and purports to do well, dive into using video layers, conditional triggers, timeline, controls and so much more again, thanks for watching and goodbye.