Let us now start with the prototyping phase of this project. And before we get started, I just want to make something clear, I went ahead and remove the one extension from the names, same thing, like we did for the design part, if you remember, just to cut some time short for this course. So what I want to do now is select the home and make two copies of it. So simply hold my Alt key and drag it down below and do is do the same one more time, like so. So why I did that because I want to make a drag trigger for this section as well as attract trigger for this section. So people can drag and see a different elements inside of this section.

So how we can do that is we're still inside of our design tab. So that's where you do all your design. And when you are ready to start prototyping you then simply click Berg tab, and then move on to it. And you can always switch back and forth between the two. So to get started, we are on the second screen, so home second. And maybe you can even name them like that.

So home too, and then jumping right here and then select home three just so that you can know what you're doing and where you are. So on the home too, we can select this most popular section and click image 123, hold Shift, and then simply move them right here until they meet with our guide on the right. And once again, this is where our why our guides are so powerful and so important. So we can jump back and go to Home three, and then do the same for the room combinations. So selected, locate the room combinations, image 123 and then simply move them all to here. And now we can start prototyping so you can click on the home number one jump inside prototype.

And what we want to do is click on this first object, so Milan lamp in our case, and then simply drag it down here. And for the interaction, you can use drag, you can use auto animate, home two is the destination and for the easing, maybe we can use ease out. And let's click on the name of the airport, click play right here, just to test it out and see how it looks like so you can see that is the drag trigger. And now to go back, simply click right here on this first one, drag it back it will look exactly the same interaction. And if I click right here, then play and use the drag trigger once again, as you can see, now we can go back to it. So it's a really cool little animation with the easing out so when you let go, it kind of flows into place.

Now as you can see because this airport is extended down, you can also scroll down and locate our process. But what we want is move on to the second section. So for the home three, we want to do the same with the room combinations. So jump back to home one, select this first one, you can zoom a bit and then simply drag this arrow down, use exactly the same settings as you did before, and do the same as before. So why the first one, why not the second one? Well, because on the second one, you can see that we have this state, so it's moved right here for the most popular section.

And on the first one, they're all in their original state. So that's what we want to create. So if I jump right here, hit play and do this. You can see it works just fine. And I can also do this and it works just fine. Next up, let's quickly jump ahead and do this.

Do the same for some of these icons. So for the Menu icon, we can jump back and click right here. So instead of the trigger, we want to use the tap. So instead of the drag, we want to use the tap. Instead of action auto animate, you want to choose overlay, because you want this screen to overlay on top of this screen. And now you might want to go back, so when you click this X icon right here, drag it to here, tap only home dissolve, so it will go back and let's quickly test it out.

So hit play, hit right here. And as you can see, it will overlay on top of this screen, and when you click x, it's going to close it back again. So you can quickly do that for all of these screens if you want to, but we are going to jump inside that part a bit later. And now let's quickly animate these ones so you can click on this one And it will take you to the search right here or right here. You can choose however you want to organize these. So let's quickly go to the filters because I want to search by filters.

Now this is a tap, it's not overly, it's a transition. And you might want to choose this nation. It's this one animation, you can choose to dissolve, or you can choose slide left, slide out, maybe we can slide up for this one. So let's test it out. See how it looks like hit play, click right here, and it will slide from the top. And I like how this looks like.

So you can simply click right here close and it will take you back out to some of these other ones. So let's use that one. Transition home slide up or maybe slide down. So click right here, hit play, click right here, and when I click right here, it will do the same and jump back down, so it came up and jump back down. And one final thing that's left for us to do for this screen is click right here on the cart icon, maybe you can zoom in a bit closer like this, and then simply drag it out to your cart. So to your order details, that transition or the details and instead of the slide down, maybe you can slide right, for example, just to see how that looks like.

So when I click right there, it will slide right. And I like how that looks like. And one final thing to do, you can choose so most popular, and you can maybe click on the CEO, and it will take you to this section. So tap and instead of slide right let's choose dissolve. And finally, wrong combinations. Maybe we can choose this first one because it is our first one.

And because we cannot go from there, maybe we can choose SEO because We used it for this part of the animation, we can choose to click right here, it will take us to the living room, tab transition room combination. And maybe we can choose slide left in this case. So let's test it out quickly. So all of this works properly. And if I click SEO, you can see it takes us to the living room. And when I click back on this icon selected, it can take us to this screen once again.

So instead of the slide left, let's choose a slide right? So once again, home, click right here. Wrong combinations. So see all okay, I like this and I can go back to the home screen. And that's it for this first video. In the next video, we're going to move on to category screen search filters and so on.

So I'll see you there