Figma: Prototype and Animation techniques for UX/UI

1. Introduction: welcome to the scores and these fast listens. We are going to learn how to improve your prototyping on animation skills in FEMA. My name is Bruno us the signer off that approx bean designer for there for the past 20 years. And I believe and learning by doing so in thes course Destructor is how you will be that you are going toe. We're going to see, like, a couple of theory classes and then we move toe make, like five samples or different interactions. How many? Some sensitive. So if you're really know something about prototyping and animations he picked my side. The sqs keep the two first videos and then go directly to the examples. So maybe you learn that a bit more. Something more Focus for yourself if you are you buying, you don't know how to use Pick. MMA is perfect. Perfectly fine. You can just go ahead and learn a little bit about the side while you land the basis off prototype in an animation. So this is for everyone is for your vies. For people who are these? No, something. So let's go ahead and start for the type and animating him. Fichman. So you're me to discourse. You 2. Basic prototyping: Hey, thank you for your into these course, and we're going to go a straight ahead to see um, how the war with basic integrations in ficc mop. Ah, stigma is a pretty straight for, as you may know, design prototyping tool. So we are going to see the basics off prototyping. So when you click here in, um, in a in a frame or on arbor, if you come from a sketch or adobe 60 you see here by default, you would have, like, known in some stop going on here like interaction, known overflow behaviour. And this this part with this kind of important, they show prototype prototype settings. All right, so we can go here and undefined what kindof device we're using if you want it imported more or landscape more the mobile. In this case, we're going to use Silber, and you can adjust the background off it. As you can see here, really life, we can adjust the background, the prototype and the starting frame. As you can see here we have, like I for eight plus one, and this is the same artwork, okay, the same frame. So this is something you need to set up the first time. And once you're don't, you don't have to come back again. Almost never. Um, depending maybe if you have different prototypes on the same, um, on the on the same document, you'll have to come here and and see if you need to change. This, for instance, is have come here toe another one. Then you can see the frames you have here. So it's a good practice not to have, um, different prototypes on the same page. You can have, like, multiple pages, and it's paid. You can have. Like, as you can see, this is kind of the starting point. This kindof play blue indicator and as well if we come here to this other prototype you can see here is the starting frame. Same thing here, and in this case, I don't have it. Set it up because I don't have any interaction here, Okay, But so it's a good practices. I say not putting different prototypes because if I duplicate these and I have this prototype here in another prototype here imagining we want to make, like, two prototypes on the same page, you are going to be, um, Sweeting, hearing the prototype prototype in setting stinking toe I blues three. So it starts here, so it's a good practice to keep it in separated pages. All right, so we're going to do this, and we are going to start working with these, Uh, let's see what we have here. Ah, we are here in the first frame, and I have applied Like like, um, e c interaction here. And let's see what happens if I could hear this kind of a push in, Ah, animation. And then if I could hear there is like a morphine between our first safe on the second escape. Okay, so let's break what's going on here? So for prototype meaning, Fichman, what you do, it's You can sell it the ARB or if you want, oh, all the airport to interact. Or you can press different elements from the page that have thes interactions in these guys . Let's pick this with jungle, and as you can see here, I have, like, on top. So when you click or you top you navigato iPhone eight plus two. In this case, you can see that the name off the arbor here, right and hearing animation as you can see there are a lot off option institute. We're going to see them all. So no worries about that. And then you can change the kind of animation you can see here down here. What's going on? You can change the kind off the animation basic worker that it's going on. Let's see the differences between this. Let's put like one second with it, like 1000 milliseconds. All right, so it's going to be a slower right now. So if I quickly here, as you can see, it takes like a second. Ah, here. Maybe it's We cannot appreciate so much the easy in and out, um, Animation Type Corp but I usually see myself using this. Most of the time. He seemed on out. Um, I suggest, never used linear because linear is kind of toe straight so but we will see that in in detail. So let's see the differing the Russians we have here. Okay, so we have phone top, we can see here, we kick and it's happening. Same way we can select again here on drug. So when I you start dragging this thing, animation is going to work. Let's see if I brought this. What's going on? Why not? Why are you are in working so well? Drag it. It's for when? When I choose thes and I want to drag and I drag, it should work as you can see so that repeat the animation. So if I pick these and drag, you can see these starts to come. Um, why harboring? It's pre over. Here's what it does. Let's come to the beginning. So when I Khobar here, the animation, it starts when I just go away from there part of the Sape Get this happy years. All right, let's go with the next one with this while pressing. So if I press in this, it works. When I release my bottom, it come back. So this is good for some animations. Maybe this is not the best example animation for this, But you can see right. Um what? What? It does the key game parts, Or do you just select the key? Let's say T, for instance. And when I pressed he here it works, as you can see, okay, and my center, Prio Pius. So when when the mouse enters here. So it's always entering because I have to click here, so But you get area. Right? So this is for my centers. Same thing when miles live. So when I go out of these rectangle is going to work the animation, Um, that's down. As you can imagine. Yes, I press only in the top sound. It does the animation and that shop. Same thing. That's when I release the touch. Then the animation starts. Okay, so we have these pre match Kober. We see everything. All the interactions we have use there is only one that here is disabled, as you can see is this is a after delay. We're going to use it now. So what does after DeLay cannot be applied to element kind of, um, it's only applied toe, um, two frames. And what is that? Let's him eyeing. Um, we want after one second you under here. Let's imagine we have like, um, let's put this here. Let's duplicate thes. And then let's say we have, like on its plus bait. All right, so we're going toe to put here like a splash. Me, it seems to be signed mold. It's gone off. We're to the sighing with So imagine we have like our spark This plus page super fancy, some who are tomato animations. So let's say we start here now and we have the X plus bait, right? And what we want it the the user enters through this page and then after one second without any indirection, then moves to the to the next, um, to the next frame. Okay, so that's what we're going to do is going toe prototype coming to after relay? So we are just going to put this 800 million milliseconds. It's fine. Then we're going to say that navigate through which it means goto the over frame. Whatever you choose here, and we are going to choose the frame free, which is this one. And yeah, we are pretty much good to look. So if we come here so we need to restart the and we can see now that after a while it stays , and then it animates itself. Okay, so you can use these toe may cool animations like I'm going to do something fast on drash. So what you can do here, this is cool. If you want to simulate, let's say, like, loading bar something. So that's Ah, yeah, that's not not delete. T a splash so we can see what's going on here. What we can do here, it's, Ah, create like circle. Okay, And then let's go to the sign again. And let's put on a stroke as they need to feel. Let's say we won't like 10. I feel like this. And then Uh huh let's say we're going to do is like this, OK, and rest pre kinky, not fancy at all. It doesn't really matter too much just for designed purposes. All right, so we're going to duplicate these two elements, so they they are named the same because we are going to see one maim animation type. There is here, too. We have We're going to combine the after DeLay after one second off entering this page. Let's put a little bit more time. Let's say, yeah, it is good and this is going to be toe iPhone blast for okay. And what we're going to do here, it's to rotate this element. The sign again. We're going to rotate it like 90 degrees. Maybe we cannot appreciate it because the arrows, you know, not the arrows. The lines are on the same way. But we have rotated 90 degrees, right? So what we're going to do? It's gone again to prototype. So we have already set up our after DeLay one that was in 500 navigato Thesis Screen Plus Four. And we're going to say in this animation part, we are going to put a smart animate and this is a coolest fitter for animation. That figure provides. Okay, so let's see what happened. Let's be star brother type here and after one. Have you seen it after one second into starts and sees we have here another after delay that goes to the next screen that we have previously set up? We can see what what is going on here. So we are not touching anything. The screen after time, it's spinning. And then the animation is coming. So these smart honey maid, it's a super cool feet. Er, you are seeing actually right here that when I press here in these kind of circle were circle Well, no, I have to set this up again to the screen. So when I press here and I press again here, the circle, as you can see, has another is smart animate. What it does is its changes. Its ape like super organically toe become this shape. So as Martin emit, what it does is it picks two elements that are named the same. And what it does is makes a transition between, ah, these shape to this to this other shape. Let's make the same thing. Since we already half like here thes, smart, animate, activated, we are going to make this test bigger and so we can see here like we're going to do this and we're going to put it here. And we're going to the one other thing, which is it's going to rotate and it's going to be bigger. And it's going to be this massive stuff here so we can see what, um, these kind off animation type, this smart honey maid death. All right, we can see everything gets bigger, and then the other animation it starts, and then I click makes like a transition, and then I click. And then a smart animate stars again so you can get smart, animate anything you want. And this is the most important animation tie for me E in fig, MMA or right? So this is more or less than basis off the basics off it. Let's see another kind of transition. Let's see that if we change these animation instead off smart, animate, we tended toe Instant three animation is coming to be kind off quick. So is yes, it pop. And then it comes here because we previously have the movie in animation. What? It does this off. You can imagine it blends 11 are off, one frame with the other. All right, so let's see what it does. We wait a little bit, and then it made, like, the kind of faith from one screen to out to the other. Okay, let's see what is marked on the Midwest eyes. Martin. Honey maid, we already know what it does. Moving as you can see. Ah, here. You can change. And you can see the kindof animations we have bean seeing here. The moving an amazing already. Okay, but let's see how it works here. So after one second, Theis plus page enters on the left. Okay? And these one, it is entering from there from the bottom. So you contains here. The kind off entering This is cool when you want toe. Maybe bring a menu or something to the to the page. Okay. And there is another thing here, these overflow behavior. We are going to see it, but we have some of examples later. So these are the pre bakes is to any made you can on something important. Important. I'm forgetting when you select on item in this prototype top selected. You see that these kind off, um, bounding box with this circle here appears so you can come here and then connected to any our body. One. All right. So, as you can see and when you have it connected, you can press and select the type of interaction you want on top on Dr whatever. Then select the animation. Um, most of the times, you will see yourself using a smart animate, some others you just want, like an eastern animation, some overseas off. I see myself pretty much using the smart money made for for almost everything. But it depends on the application you are trying to do. Okay, so let's go to the next chapter. See you later. 3. Types of animation: Hey, so here's like we reminder how toward we've prototypes inside Fatemeh. I have here a bra blank frame, and it's a good practice to start toe. Put your settings your prototype settings, so we're going just to go toe so prototype settings. And here you can see you have multiple devices to choose from. Seems I have thes into the same part. You can see the width and the height off our our our board or frame in prototype settings. I know it's an iPhone eight plus, so I have to use it, and then you can to some other. So you can change these all that. You can just put it in black you will desire. So for the second, just going to a with a super you get stays the background with your prototype. If you make four presentations or record some videos, and this is the important one thing is a starting frame. We could to send other frames over there, but for this particular case, we want animation and samples. Okay, so that's good. Let's go back to the sign and it's good. So I'm going toe, create a rectangle, yes, to see basic types off animation, and I'm going to duplicate this friend for that. You just know, Just select their frame. And then with the off key, you just move it on. We're going toe. I do these because in order to see Tom, some animations in particular, they're smart, animate. What we need is to have the same elements in the in the bowl frames. So this is the starting frame, and we have this rhetorical too. And here in the frame, renaming to animation samples. Those two Sorry, Um, we have the same breath angle, so that's a good practice to have the same elements. So we're going here into interaction and what we want. It's on up. When we click what we want, it's toe navigate. So we go to this screen. In this case, it's animated animation in samples to, and if we and what we want when we kick here, it's coming back here. You can just press in the circle to the left and create another animation. Okay, So in this particular case, as you can see as Martin inmate has bean activated by default, sometimes it will put instant or dissolved. But we're going to see them. All right. So for this particular animation on to see the transitions between one a screen on the other, I'm just going to since the colors yes, select their not so heavy color here. And we are going to change the border radios here so we can see the transition between both of them. So now if I can hear and I press, as you can see, it's making a transition, and it's marked animation between the safe on the color of the safe. We can do the same with with what she said on the screen. So if we click here as you can see, it moves. OK, so this is pretty straightforward. This is what it does. Is smart, animate? So let's go back here. We can increase the time. Let's put it like a second. It could be like 1000 milliseconds. So as you can see now, the transition when we tended here it's much. This is lower and this is good. Okay, A So we can see we have here. The scene is out is in and out and linear this are Let's see what it does as you can see here. We don't it's in. The animation is not organic isjust as then name say's linear. Um, well, it's in No sorry. So let's see what is in the US So it stars a slowly and then it kind off get much faster Motion of the end, though the opposite would be is out so it will start. It will start like first, and then it slows down. As we can see, it starts first and then slows down in what What I usually use is easy in and out, which means star faster than slows down, then goes faster again. For me is more, Ah, organic animation and then them most boring off all them is linear with It's just, I continues. Movement is no acceleration, no acceleration at all is just that. OK, so these are the basic, um, types off course off animation. And then we have Let's try another kinds of animation for, for example, the instant what it does is yes, you know, goes from one place to another. No transitional notions of borders chains off anything this off. It's just ah, faith between this screen on the other, so we don't have any animation between both off them if we go toe moving, Uh, let's see what he does. What it does is the screen enters from the left. We can change it on do it to enter from the from the way he was entering from the right, and then it's entering from the left so we can see it now. It's coming from the left and you can imagine what? What? This. That's so it's coming from the top and then from the border. All right, so and this is something interesting this you can smart, animate much in layers and as well you can check different types. Of course. In this case, I'm going to use you seen on out. So let's see what it does. So it's making kind off this the same. A smart, animate thing we have before. Okay, so for that particular animation, I could just go with a smart animate Okay, after after we have these move out, let me just go with and remove this so we can see what it does. So as you can see this kind of transition, this is good. If you want toe simulate some kind off kind of parallax effect, these move out and moving with work. We have Bush. What it does. Is it kind off the This frame goes up and this frame goes up to, so it's kind of a carousel instead off one frame, Um, going in front, off the other. So that's what pushed that and it's lining. It's kind of a similar effect. More subtle. Let's say so. As you can see there is can kind off a great Bagram when we do the animation here. Yeah, so it's kind off pushing the other frame, the first frame and then are being some kind of background. So this could be a slight in and slide out. It's kind of the same thing. OK, so you can see it comes from the bottom, but engaged and get these gray background. So this is brought very much of it, and we are going to see finally, Theo examples. Okay, all these kind off. Very so apply to some cool examples you can replicate for your portfolio and toe master These animations and prototyping features in Fichman. Okay, So see you in the first example 4. Toggle - Smart animate: So let's go and start replicating our for the light here. Okay? So for that, I'm just going to create ah ah, frame. Let's go to the sign moat. And it's to iPhone eight plus. Okay, so let me ask Close this part and then we are going toe create like, tango. And we are going just to put, like a Grady in, like with it there. OK, so to something around that instead of sorry, let's say linear in its case, it's going to be 100 and then we're going to put like, I'm going to change these colors and then we're going to put like an orange are something that he's okay. This is cool. So I'm just going to copy this text so I don't have to create it again. Just text. And then I'm going to create a talk about along, which is a pretty straightforward thing to go. Yes, create something that is. We put a book for the radios like 100 but this Dwight, I have some callers created already, and then we are going to put like a circle here and let's say yeah, that's cool. And the feel of the circle is going to be our prime medical, or this is good. Okay, let's make a little bit bigger. So we have, like, on and off next. Here. Okay. And I'm going to replicate this text and put like on, and it's put it with our primary color here, too. Okay, This is good. We have Ah, let's see if there place off this. And we were saying before that that we need to have in order to a smart, animate toe work. We need the same elements and going to make this a little bit tinier, something around up. And we need the same elements on the left than on the right. Right. So we need the good night text here, so I'm just going to cope it, and I'm going to put it like that and okay, it's good. And we need here like an off text as well. Because as we have seen here, we have like enough text that moves from the left to the right. You can see that they off is coming two. So we're going to put here like off. And as we can see, the color is something around that little bit darker. All right, so we're going to do this. All right. So for this screen, what we need is good night and off to be just We tear, okay? We need to eat. No, not present. Like, is there but is not there. Okay, so we're going to duplicate this screen. We have all the elements. We way. We need for two to make this animation. Let's say it's the menial filter. In this case, we're going to go for blue, Let's say dark blue and this yellow, let's say another blue here and for this one of the doctor. Well, this is not the same tutorial pot anyways. So what we need here, It's ah, are good morning texts coming down and gets toe zero. OK, so as you can see, I have my previous tex here, there. Ah, good night test. I'm just going to select it. And what we want off this desk is coming here to 100 and then I'm going to just, uh, allying them to the tops for the year in the same page and the same here. I'm going to align these to the bottom. So both test us our line and good morning is going to disappear. Okay, The on text we want to disappear and move to the right. I selected the off text, so I'm just going to bring it up. Okay, so I'm just going to move it like 30 pixels, some pictures there and what we are going to do its move the own bottle here, the own text because we want to want to May to make the animation that goes to the other side, and that's our circle is going to come here and is going to be sweets off. So we changed as the color is pretty straightforward. And then we're coming here and this next we are going to put it here and the on button, Let's say there and it's just but the capacity is 20 Okay, so we have our starting frame and we want everything toe move and transform into these, making some animations. Okay, so we have our tour scenarios or a starting point, our ending point, and let's see how this works. So we are going to select using we are going to prototype, and in this case, we're going to select the iPhone one plews one So it's our starting frame way seat here. Election. But we click and anything is moving. So what we want is when we click in this circle, let's just do it like here. It's on top. We want to navigate toe iPhone, plus two with his school. The animation we put a smart animate in order, everything to move. Let's start with this off. Let's see what it does. Okay? And let's apply here when we click on the button here, another dissolve transition. Okay, instead off. So let's see how this seems. As you can see, it's making like a fade super long fade. It's it's going is taking forever this. What's going on? Oh, it's two seconds, Let's say, uh to 200 500. And this another 500. Let's see what's going on here. Okay, it's making a transition, but as you can see, the battle is not moving. The total bottom. There's no bullion. Everything is kind off. It's not bad, but it doesn't seem natural, right? So here comes a smart money made to help us, and so let's just just activated a smart, animate Let's say 500 I select this in out and let's make the same with this instead of the salt. Let's go to Smart. Animate is in its out on 500. It's cool. So let's see him. How these words now, as you can see, everything is working. Let's let's put let's make the transition a little bit larger. So is going to be like in a slow motion is going to be TV years is going to be boring. We can see the effect going on here, right? So we now click. And as you can see, we have the school effect that you to start kind of fast in, slows down every you know, it slows down, then go faster than slows down again. And we can see all the transitions here. The on and off are going from one place to another, and we can see this circle is blending from Blue Ray and everything is kind of working. Okay, so that that's it. A smart. That's how a smart animal works. All right, so let's go to the next example 5. Contacts - Drag: Hey, welcome back in these sort tutorial we are going to see in swipe swipe interactions and how to animate these things. So I have these prototype ready here. And as you can see, what we want this, like a trip contacts list. And we want to, uh, Khobar. And then we have, like, two options here. Click again Stripe toe, Undo. So we have thes indirection or we can click and do it So this, um, pretty much it. But we have some cool features here, so we can do and replicate for our the science. And you see these kind off animations on our sweet Everything seems pretty organic. So let's see how to do this in a month. So let's try to replicate these, um, so we know how to do it. Okay. So for the time, yes, going toe duplicate this directly. So this is going to be so I went OK and imagine we only have this list. As you can see, it's a rebel. At least I created with with a component, but it's just at least made off another star title and everything, but okay, let's let's do used to warm from a scratch. So for these, what we do is just create like like an upper. Be by there. OK, so yes, she was a cooler, maybe to light. Then create the circle. It's put here like an about our with our about our plugging. So it's good. Let's put the text and it's pretty thin. Bolt, maybe six 19 schools in the field is going to be like a dark grey stuff like this. And then we can put here, like the date or or the phone number if we prefer. So do it. Okay, so that this could be their the number. And let's keep it like a lighter color. That's tonight. Anyway, this is yes, design for design, poor process. And what we want here is to create like, um, and going to put here like a background like a white background. I really like to do these like a best practice and all my designs, because here I can control the height off the air meant I could do it with another. We I'll put layout features and everything about four days to give it simple. Unless, yes, do it like that and let's create a component and this is going to be Plus, I think All right. So I'm just going to duplicate this and then press common D or control the if you are MPC Okay. So, yeah, we're good. Now I'm going to select all my photos, go here to plug ins and goto our water. It will change. I'm going to insert some names here. Run them names too. Well, yes. Like then have another plugging cone called Contra real. And here Yeah, very good. Everything is good. I want the full name. Okay, so let's apply. We have our names. We have are photos. We have everything set up here. Okay, so nothing we want to do is to create the delete button. So for that, what we need it's took over this whole row here. Ah, I think our our previous component is 9 90 in height, So we're going to create it. 90 hide component were not component the row for the real eat. I have a color there. So in this case, in this case, I'm going just to make it like night like 89. So it's between the great bars. Okay? Sent from separated from the D by there's and I'm just going to copy the text. So and the icon. So we have it here, and what we do is just make a group with this on Call it, deal it. So we know where we are and what we want to do here is to toe put this, um, delete battle inside this frame. But as you can see, we are in Swipe One. And when I move it here, the element it's ah, inside swap Swipe one. When I move it, it gets out offside. One. So what we want is to locate this here and put it inside. So so I bought. Okay, so you have to do it manually or move. Um, the properties on the X. You can see if I put it on zero, and we want it on 400 14. It depends off course. In the frame you have set up, I have the iPhone eight plus, Yes, toe make all their tutorials the same weight. So we have this here. So what happens is now we have the delete button outside thief frame of Swipe one, but it's included inside this frame. It's not like outside. Okay, so it's kind off interacting on the same way off this. So we're going to duplicate our design and what we are going to do here and just going to bring it a bit farther. Wait. Yeah. So what we want here? It's to do the same thing about just the opposite. OK, so we just speak everything and move it to the left. As we can see, since we have made this kind of this group, um, it's inside this. Decide them. It's inside this white too, so we don't have to worry about that. So let's prototype this part and let me take change their prototype settings in order toe be Tribe won the starting frame on Swipe one. We put these in a starting from set Swipe one we can see here. We don't have any interaction. We cannot scroll whatever. But we are interested in this part. So we are going to start a prototype. So we we have to think first what we want to do, and we want to do it when we click on here. When we start to drive here, we want toe come to these striped to screen. So we just, uh press this blue circle. Come here and then on on Swipe. Sorry on drug. We want to have a guy to strike two, which is this screen and as well we want that Mia's make this a little bit smaller. Things is to make. Okay, so, um, we want toe come to here, and it's marked animate. So we have the transition, okay. And the same thing when we swipe here, we want toe Come back to the initial estate. So in this case, I'm going to do with right through here. Ah, on drag Navigate to E in this case of stripe one, our screen. So let's see how it works. How this is working so far and we have on the way. Wait, Warren are swipe. You can see that this is all really working. And if you know it, he has, like, this kind cool effect. So we have made our first part. And what now what we want if is that if we swipe, we can do the's action. But if we click, we want to, um, deal it our contact and then thes one will come up. Ok, so we're going to duplicate this again remember all the elements has to be the same on there on the screens. Okay, In this case, I want this text that I have into these two screens to come to the right and these happier . So for these, I'm just going to put zero in the opacity field. And here what we are going to do, it's, um make it bigger and maybe put like for something like kindof Bolden massive on big. So we have these I call Mats Boulder and what we're going to do, it's duplicated screen again. And what we want here is to get rid off this and then move these contacts here up. So let's apply transitions here and the prototyping. So what? We want these When we click here, it goes here, So just do it. In this case, on top, Navigato swiped five. It's march. Animate. It fell 800 milliseconds and what we want it when thes enters when entering here after a while, automatically, it goes to these screen. So for that, what we do is select the friend and then after delay what we are going to put like a little delay here. We're going to use the same delay their 800 milliseconds. What we want is to navigate toe stripes. Six again is the older screen here. So let's see how this looks. Wow, this is working good and way for click. Wow, that's cool. So we have done these old transition lists restarted to see what he wa what we have created . As you can see, it has some kind off nice movements here, and it will click. Oh, that's cool. So that's our prototype we drug swipe. Ah, animations and interactions. Thank you. 6. Travelopia - Hover effects and Smart animate: Hey, welcome back. And we're going to see, like, on its Byzantine direction here. As you can see, we're going to create um, these design where we hope for one of these three parts here, we can see that it stands and you takes up year than up years thes called to action bottom . So, as you can see, it's a cool effect that you can integrate in your designs. Okay, so let's see, How can we do this? Okay. As you can see, I have four screens here is hell. We need to create this. And we have to to replicate Ah, our home estate where we have, like, three blocks. And we have to create these one where what it does is yes, increases its with then these texts. This bigger makes bigger than this text up years here. Like making like it appears from here. As you can see, I have it here like we've serial opacity like transparent. So what it does when it changes to these while harbor in this area. Ah, these the stay face these text becomes bigger thes test come up and sets its capacity to 100. So it's busy. Well, and then a bottle up years from here from the left. As you can see, this button, I have it selected now, which is this one? Discover Cambodia, as you can see, is the same us here. Discover Cambodia. So we have, um all the elements, um, from this screen in this cream. Okay, So for his martini made to work, it has to We have toe have the same elements in one on the screen on the other. Okay, so it's Let's go on. Replicate thes two screens. We won't go to replicate these ones because with making one example is going to be good enough. Okay, so forties and going just to duplicate this part. And I'm going just to yeah, created from zero. Okay, so for these half like a layout created here, just going to creator rectangle, I have to see if this rectangle is going to meet like, yeah, so something around that it's going to be cool. So we have, um, you know are free blocks. Let's make it so we can see there. Difference. Okay, so we have our separate blocks off 480 pixels. By the way, I for that stop the science. I usually use 1140 then 9000. It's my typical a set up. Okay, so, yeah, let's get on with it. So I'm just going to get rid of that is good. We are on the 480. Just bullet for here. So for decent going to use on a splash, Blufgan. So I'm gonna 30 or something. Random nature for Let's see. Well, that's cool. And we're going to feel here, and then we're going to put it like crop, so yeah, we can make some cropping in there. We are going to create another rectangle off the same size as this one. Okay? And we're going to put, like you can see here. I have some, uh, linear in your radiant on top with some opacity. So, gates, because if I put the text here, that's copy and paste. This test, if I paid, is basic Here in this photo, you can see it arrive, but sometimes, um a. So we can see sometimes it's not too reliable. So for that, we're going to create the S Theis, a linear Grady in here. So let's go for linear. Great aunt and and then these change the capacity to 102 and then we're going to up yester some nice. Well, I don't know if it's too nice, but yeah, we'll make it. So we have used the A paucity of Theis to 70% or 60%. You can play around whatever you want. Maybe you can just try as well some multiply or screen or something like this school. Well, whatever. I'm just going to leave it, like, normal for four days. Okay, So as we were seeing here, when we Khobar here, a text appear and then appears are like a bottom toe. So I'm just going to copy these two elements here in this design. Okay? And these bottom here and the bottom line going to place it here because I want when we get to the screen to be on the left or right. So if I just select this element and you can see it that we have it here things that he did you 100 sent this text to 100 to. So as you can see, we have all the elements from here. We have it already here, but We need to Ah, have these elements. Like, uh, he didn't with the opacity. You just move this around 20 and we're good to go. So what I'm going to do next, It's Ah, yeah, I'm going to something. I'm going to put this text down here. Okay, So later on, when we make our animations and changes here is going to be a wreck. So what I'm going to do is yes, group this, and I'm going to call it, um I'm just going to call item one so we don't get to too much stress about the names and everything. So we have, I think I think, too. Idea Three. Okay, so that's good to go and what we are going to do. It's, um you know, uh, these two elements put them with zero opacity, because we are going later on. Well, we can't leave it like this from now and then what I'm going to do is just saying this to photo so way are seeing something different. No, The palm trees could be nice to be in on on the beach now. Okay. This school, and then I'm going just to change this photo to and on this Plus, Blufgan said, really would want toe answer for us. That's just another nater want. It's really cool on something I want to do. It's an image. Just said it to crop so later on, it doesn't make were things. Okay, So when When when these photo gets bigger, we can we can control it and we can ingest it. So it's a good practice, depending what you want to set this to crop and we're findable. Okay, so we have our pre home pretty much set up, and what we're going to do is just duplicate this because, remember, we need the same elements here and there, even if we made changes here. So what we're going to do is created this Cambodia, uh, Khobar effect. So for these, what we're going to do, it's something like this, and we are going just to pick these two elements and let's bring our Gamba's here and what we are going to do its stretch it like this. Okay, I know it seems a little bit quickie but is going to work. So for this, we need a smaller text on, you know, let them run and this text. We are going just to put the capacity to zero. Because we're fine, then, Uh, something I shouldn't have done. It's too. It seems the size of thes, but it doesn't really matter honestly, because the important thing, it's this left part. This is going We're not going to see this element. So we put this to see you again to get rid of it will not give relate part, you know? And as you can see here we are having some kind off effects on the 40 So what I recommend is come again toe image, Um, put it to a feat, okay? Or to feel Yeah, feel is better than to grow up. And then we went to use the how we want this to behave. Same thing applies to Cambodia. Well, here to our photo. Then we put this to fit. Feel Yeah, crop it and then we twos, we can to another. That was school. This kind of to raise their So, uh, yeah, we're ready to go. We have to. These two elements already set up. Okay. And for these were we are going to do It's in this case. I'm not going to be so eso harsh Asai was here, so I was kind of a stretch in everything. I'm just going to go away with the photo in the linear. Ah, radiant. And let's make the same with the photo. As with the before express like feel and then crop. Okay, so we can select. Ah, the position of the photos we like. So the photo will make like a supercool transition. Probably like scaling in itself is going to be great. I think so. Let's move these to the right. And these text, these two texts, we want them. I'm in the center, so you select them and we want our test toe. Come here. Yeah, that's good. And we have this part already set up, and these ones are set up to and this is cool. We only need toe. Um, hide this. So we're going to put into Ciro. Capacity is one same thing, going to be syrup. See you again. As you can see, Super pretty basic set up. And now we're ready to prototype. Okay, so let's select our home, then go to prototype. Let's see prototype settings. Starting frame is Norway. We don't want that we just want Oh, yeah, home. I'm going to go at home and he's, like, less or right, So we have some different station here. So now if we auto our prototype settings, you can see here our devices custom size because we are using like that They stopped like it Just upset that. And as you can see here in the design panel, I use 1140 by 900. So we come here to prototype, improve the time settings and we guessed, put in custom size this size, if you are working with another sizes is pretty good too. You can put here decides you want Yes. Make sure it's the same size off your, um, off your frame. All right. Ah, Well, in this case, I mean, if you want tohave a scroll or it's ah, Long Page or something like that, you can just leave on prototype the's settings. And if you have more content here, it will scrolls. Okay, so for now, we are going to go and what we want. Here it's We have our prototype set, and what we need is toe put some interaction and animations into this So for these, what we do is yes, select. This group is hyping One is the one we want to make when we makeover with Select the's second screen plus. So what we are going to do is instead off on click. What we want is while hovering, we want these to navigate to class frame right instead, off instant with Let's let's make a let's make, Let's see how it works. As you can see, this is pretty rough. It's like I don't know, like 20 years ago. Only meet him. So we're going to instead of the's going toe, a smart, animate all right. And I want to use easiness out. So we have some kind of a slow than speeding up, then slowing, slowing down again so we can see here a little bit. And we are going to put here, like, 500 milliseconds. So it's like going half for half a second and see how it goes. Okay, well, this working pretty good. As you can see everything, it's moving good. Everything is working, so this is pretty much it. If you want a A, so you can see here. What do you need to do for the arrest off there off their frames is just do the same thing with it here. So for that, you just could duplicate these and then these. Ah, the ISS. This part, uh, tinier. And, you know, like scale these up and then moved these and it's pre must much the same. Okay, So the same thing we did here, we should do it here and then to the third frame, and we are ready to go. So that's it. We have far supergroup prototype while hovering. 7. Cards - Horizontal and vertical scrolling: Hey, welcome back toe these short tutorial about how to use horizontal and vertical scroll in the right way. Hearing Fichman, I have an example here off how to make leg thesis crawl and these verticals Carney in the right way. Okay, because I have, like, an example here, it seems the similar. But is this second screen on the left and you can see if we don't do it Good. We we have vertical on a recent times calling, Yes, but it's quiet. Quickie. So let's learn how to do it the proper way. Right? So we have these recent times calling here and these verticals calling here with works flawlessly or Okay, so let's create on iPhone eight plus screen here, and we're going to name it like class one. So we are on the same page here. I'm just going to duplicate this. Heather is not a big thing. It's not a big deer. Is just as you can see inside this group on going just on group this, actually and put this rectangle here. Yeah. Do you sing? Going to, uh, this is the icon, actually. And I have the title. We have the I can hear the arrow. We have the text and we have the expertise and background. We need it. So when we ask role As you can see, the text doesn't get behind in the data. OK, so we have, like, a white background just going to point yellow. So we see what's going on. And for the rest, I'm just going to copy this car I have here. Well, im going to replicate it. It's pretty straightforward, actually. So it's drovers tangle, something like this. Assemble the ratings, Let's say for its putting background like red. And I'm just going to copy and paste this text here. Okay, So this is the name. This is a great number. Okay? I'm just going to put this in white and our text. All right? Nothing fancy. Just get down to 12. Run the date. Okay, Easy. So what we're going to do with this is yes. Ah, make a group. Okay. So, yes, you first. Come on, Come, Andy. And you have the group, and what we're going to do is just duplicate this and since the background color yellow and we're going to make another copy, and we're going to put it in primary view. Okay, so we're good and four days we are going. We could make, like, a group or something like this, but for this when I have, like, for this kind off grouping what I like to do, it's actually up, um, out early out. Okay, so we press sift a or right click in at outlying out, so we now can separate the elements the way we won't need. And even at some, if we need to create some some space, some having a day Very, very beginning. And the end, it's going to be nice. So for this particular object, I'm going to create these one. I mean, I'm going to put, like, 20 here are supporting. We could put 30 but twenties. Fine. So it's going toe. Give us these space here in this space over there at the very beginning at the end. Off this off. This object. Okay. So even though it's putting here like friend 17 I still want to put this inside a frame. Okay. Ah, we will see. Well, I'm not going to put it right now. Let's Let's he would like that. Okay. As we can see, friend. 17 when Fichman puts the frame on the name of the group here is because it's outside the the the actual frame. So for that what We have to do it. Come here and just drag it to class one. As you can see now, the's parties, he even so what? We can go toe see it. It's select the frame and clip content, and then you will be you will be elbow to see it. Okay. And what we want to do again. Didn't he has collapsed this So we see clearly what we have here. We have our heather our background. So I'm going to put the background inside the heather, actually. So Okay. Here. All right, so now the background is inside the heather in these I'm gonna call. Call it like horizontal. We could for the another name a slight or whatever. You want a name. And these were gonna make like, we're going to use this frame selection. Okay. You right. Click over here and friends selection. Why is that? Because now we can change the size off the frame. As you can see before, I'm just going to undo We don't have the handles because It's an AL tryout. Okay, so we need to convert this to a frame to frame this election. It is going to be our fly there. And what we want is this'll either, Toby us with the frame off. This is lighter. We want to get to be from from the start from x zero, tow this point here. Okay. And why is that? Let's see, Let's prepare our prototype to work. So in this case is going to be class one. Okay, so we have a deal here already. So now you see, I'm trying to draw back to swipe, and it's not working. Let me just put this into white. Yellow is kind off too much. So you see, it doesn't work for these to work. What we have to do, it's ah, in prototype. You see, we don't need any interaction now, just the overflow behavior. We just need to put it on horizontally scrolling As you can see, we have vertical scrolling as well and horizontal or vertical. But in this particular case, we only want these three boxes toe come along from on on Lee on the horizontal axis. Okay. On the rest of the these least this These leaves will make like a vertical. It's going okay, but let's see later. So we already have created this and we take this toe horizontal scrolling and see. Let's see if it works. Well, now it's working. Working pretty good, right? So I'm going to work now to copy all these all these things. Yes. Let me get rid of this. I have like, um, this massive list, so I'm going to select the frame based it. And what I'm going to do, it's, ah, select all my elements and we're here. Do you see? It puts mixed. Just put it left on top. So when you re size thes, um, this frame, it doesn't ah, scale or make were things here, so everything stays in place. Okay, So, uh, yeah, So now if we scroll here as you can see, the vertical scrolling is working and they hurry. Sometimes Curlin is working as well. Okay, One thing interesting I haven't done here is we want our heather fixed. So how do you do that for that? Do you select your heather and you just click here fixed position when it's crawling? So right now he's going to stay in place. And us we had a sui did put like a white background under the heather. You can see all the text are now running this movie. Okay, see if if we guess put this transparent when we scroll is going to be like you know, Messi can be cool for some websites, but not for this one. So we already have it horizontally scrolling vertical Ascoli. Okay, so see you in the next tutorial. 8. User menu - Overlays and Swap with: Hey, welcome back to these last tutorial is going to be fast what we have here. It's brother type and we are going toe. Try three e overlay, as we can see here, the overlay prototyping tool and what it does is, as the name says, it's putting some overlay over the mainframe. OK, so as you can see, I have these sit up. So when I click out disappears when I come here, thes overlay appears. And when I make like a Khobar State, I know it's more while. But imagine you are working in a desktop application, so I'm going to replicate this. As you can see, this is a pretty straightforward descend, so we're going to create out drop down. So for that, we Drover tangle okay and apply Soundboard the radios, let's say for for eight. So it's a little bit more around there. I'm going to apply some effect in this case. I'm going to put just the subtle I have here and put this into white, the background color. So we have this. Okay, so we have out or are over late, more or less ready. It's at a couple off items here. I think one them to on I don't three and me. I'm going to apply out. Try out here. So they are all distributed the same. And what I want is to put some background here in both elemental. Let me Yes. Ah, got some pasty. So it comes to the front. I usually do it that way. And in this part, what I'm going to do is just put this into white, okay? Because just we have to adjust this thing here because later on, we are going to change this color. And instead of what, we're going to put this kind off great blue screen. OK, so in orderto make these overlays what we need to do, it's, ah, frame the selection. Okay? Because it's how it's it's how how they work. So we are going just to remove thes from our main frame. And as you can see, we have here now this frame to going to to toria overlay one, because we are going to duplicate this into the S okay on to apply this background when we Khobar or when we click in the item two. Okay, so we have all pretty much the top like this. And what in We are going to prototype mode now and remember, we have to change. Our are starting frame. We want to be this one way are going to make the tutorial with this one. Okay, And what we want this when we click here on the user, Um, by default feet Myers going to say in Arigato. But as we can see here, what's what's going on? If we do this, it navigates, but it's horrible. So this is not the fact we are looking for. And what we want is when we click here the overlays happier here but maintaining these friends. So let's do it. Let's open overlay and let's see. What does that mean? Yes, we start this when we do this. It appears here in the center so we can control where they overlay up years. So for that we sell it here, and, as you can see it says center center, it means he supplied tow. It applies the overlay to the center. The page we can make like quick adjustments and you can see where he goes. You can see here it's moving. What I usually do for these particle are overlays. It's always to Zeman. Also, I can position whatever I would it in this case. This position is good and what I want this went on hovering well or kicked. Let's say top, Okay, when we are, um, clicking on the item to this kind off background up years here. So let's say it. And what we want as well is to exchange this overlay with this older over overlay. All right, so we're going to put on overlay on top. In this case, we're going toe use struck with stop With Where it means Is it changes this frame with this other friend but maintains the overly over. Okay, so let's select again. This and we are going toe. Make it with tutorial. Stop, stop with tutorial to this, this one and the animation we want to be instant. We don't want some the soul for some kind off. We're thing we could put the smart, animate Let's see what it does. Okay, so it's it's working good, but let's see another other options that are here in the overlays is sexy. As you can see, we have position on overlay manually, and we have to nice options here that the first is close when clicking outside. That means, if I click outside is going to disappear, which is pretty good, because usually does the behavior you want in your prototypes that if you have on overlay in many, you would drop down. What do you want to spect or what respect is that when you click outside of it? Then he disappears and another CUF eater that feed my house, It's, Ah, these at background behind overlays. As you may know, when you are making, like overlays or pop up some pop up menus or some pop up cards When you click here, they get this kindof background Ah, a little bit darker in orderto make the element pop pop up. So I usually like toe really to be in contact, so I don't like. I don't push to forward go something around that maybe for a pop up or for a model window, it is good. But not for this kind off elements. Actually, for this kind off elements, I usually don't put it okay, because you have the sad Oh, so it's good enough to be in to contest. Maybe these satellite is not the best because we are losing a little bit our border here, but okay, that's that. Those things are designed things. And this is for prototyping and animation. Right? So we are pretty much done here, so you can see we have these transition. So you have to learn what you can do with overlays. So thank you for joining me and see you on the final video. Thank you. 9. Congratulations and Thank you!: Congratulations. You made it. You here. I'm just want to say thank you for going to the scores and off course. I hope that you have learned something interesting as well Are really good, like you toe try to make some examples asses we have been doing in the class on that. You put your prototype some video or link to your feet Now prototype. So if you have any doubt, I can help you to review it or how to improve it or whatever. You just put it on the discussion or comments panel, and I want you to encourage us well, to see all the figures I have. So maybe you find some of this interesting. Like you are interested in a smart outdoor out and Sigma. Or maybe how to create the science system from scratch. Do yes. Busy my mind profile. And you have more course or about fiqh mind sketch to. So maybe you found some of them. Interesting. So thank you for your enemy and how your day