Links for shopping views

- [Instructor] Now let's get started working on our animations and interactions for the shopping experience, which are the first three views at the top of our workflow. If you had any issues copying and pasting the files or reconstructing the designs in Framer X feel free to grab the file from the 0201 start folder in the exercise files. The where we'll work on our interactions and animations by going from the big interactions in animations, like linking in between views, to the smaller ones such as button animations and so on, so forth. These smaller interactions are sometimes called micro-interactions. And in the process, we'll also explore overrides for a specific use, which is this section here. All right, so let's get started. So right now, we have our first three views here. So we need to link them somehow so when we click on something here, get to the next screen, and so on, so forth. So right now the experience is going to be from clicking on one of these cards to going to this view. And for any screens if we click on the top-left here we're going to get to the user area. And if we click back to the H Sport, we're going to get back to the main view. So we need to create those interactions. So let's go ahead and do that. So let's click on tools and then click on link. But before we do so, we want to make sure we click on the right items before we click on link. So what we want to do is go to shopping view. And the cards are the ones that we want to create a link from the screen to the item detail. So let's go ahead and click on all the cards. And we have two. And then what we're going to do is create a frame for those. So what we're going to do is create a new frame by right-clicking add frame. So these two cards are going to be part of one frame. And when we're clicking on the frame, we're going to get to this item detail because if we were to do this for each card and then get to this, it's going to be a lot of work for the same results. So let's go ahead. We have the frame selected. Now we can go on the plus, either click on link or type L, which is the shortcut, and then go to this page. So if you feel like we're not doing this right it's because the item is actually close to the end of the last card and that's why it looks like we're actually linking it to itself but we're doing the right thing. Now, the next thing I want to do is make sure that once I click on this card, I'm getting back to this view. So let's go ahead and click on the card here, type L, and then click back here. Now that we have those interactions, if we want to get to the user area, we need to do so by tapping on the user button at the top. So we need to create for each one of 'em. Well, let's go ahead and select that. And we need to select this graphic here. So this graphic, L, go to this page. Again, let's go to the item detail. Do the exact same thing. It's in the background. It's in the top menu, the graphic here. Type L, go to this screen. And the final one we want to do is tap on the H Sport and then get to the main page. So let's do that one as well. And this is the logo. So let's grab the logo from the item detail, L, go here, and then let's the same on the user area. And this is in the top menu. Logo, L, and type here. So we have a lot of interactions. Before we move on to the next interactions want to make sure that we have nailed the top ones. All right, so if you want to test this let's go ahead and save. And hit the play menu while we have the shopping view selected. So now if I tap here, I'm brought back here. If I tap on the card, I'm brought back here. If I tap on the user area, I'm brought to the user area. And then if I tap H Sport, I'm brought back here. So let's do that again for the item detail. And we have all our interactions covered. So now that we have the major interactions covered let's move on to the micro-interactions.