Hello, my name is Jessica Henley, and in these lessons you will learn testing prototypes, exporting assets, code editing, commenting, and sharing specs and assets, getting started with testing prototypes. We're going to take this mobile app design and test out the prototype. We have three tabs at the top, which include design, prototype, and share. Under prototype, you want to make sure that you specify which artboard you want to be the home page for the actual start of the flow. Initially, your flow may be the actual wireframe, so make sure to switch it. For example, you can see that there's a little home button right here, depending on which ever home tab is the launching of your app. You can see that it's grayed out if it is not the home, but if you wanted to make it the home, you would just press that button. I'm actually going to turn that off because I do want this to be my initial starting flow. Now what I want to do is go ahead and hook up some of these buttons here. So here for this destination for package number one, I see that there's a blue icon arrow. All I want to do is just go ahead and click on that and also pull it to the actual artboard. Now that those artboards are connected by the button and then actually transitioning to this other artboard, we can go ahead and specify what we want for the interaction. For interaction over on the right hand side, we have the trigger. You can do tap or drag, add keys in gamepad or voice. For my situation, I want to choose tap, but you can choose drag too if you wanted to. Next under action, we have the type. So for the action, you can select an interaction, such as transition or animation. So here first, let's take a look at some options for that. We have transition, auto animate, hyperlink, overlay, scroll to previous artboard, audio playback and speech playback. So for type, I'm going to choose auto animate, the pick which one that works for your situation. Next under destination, we can see the name of the artboard here, is iPhone 14 Pro Max Dash 4. So if we check that connection, you want to make sure it's pointing to the correct artboard, which it is. There's two confirmations, number one, we actually see the blue line as it trails from the actual image down to the artboard, and number two, under destination, it's confirming its name. Next, under easing, we have a couple of options, which include none, ease out, ease in, ease in and out, snap, line up and bounce. So I'm going to try ease in, and then I'll show you what the other ones look like too. So here we go, we have ease in and out, and you can choose how much time. I'll choose one second, but you're welcome to choose, say, one point. You're welcome to choose 0.4 or 0.6, whatever works for your actual situation for your app. All right, so time to test it out. So up at the top, we have invite to document. We also have device preview, and we have the play button. I want to go ahead and preview my interactions for my design. Next, we can actually see that it has popped up on the screen, and assess the preview as well as the title of the document. Now what I'm going to do, as you can see, as I hover my mouse, it does actually have a little hand that starts to appear. So we know that it's working. Now if I hover over the other pictures, you can see that there's no hand yet, because the prototype testing has not been pulled up for those yet, but we'll get those all worked out soon. So I click on that, and as you can see, it auto-animates and it transitions, but no other buttons are working, and I seem to be stuck on this page. So what I'm going to actually do is make sure to create a back button. So I'm going to head over to plugins, and with plugins, I'm going to go to auto icon, start auto icon, and it starts for a back button. Perfect. So I do actually have a back button, which is cool. There's a couple of things to choose from, but how about if I just want to exit this package and go to the next page, I think I'll just have like an exit button. You can have exit or back, but I think I just want them to be able to press an X and it just close it out and they're back at the home page. So here I'm going to just go ahead and choose this right here, and then pull this over like that, and with my arrow on my keyboard, I should go to design, and I'm going to change that color there. Next, I'm just going to position it. I'm just using my arrow on my keyboard to go ahead and pull it where I want it to be. Great. And I can go ahead and duplicate that to the other artboards. So I'm just going to go ahead and copy and paste that over and paste that to the other artboards too. All right. So almost there, pulling this over like that, great. That's what I want to do is go back and continue testing this out. So I'm going to head over to prototype, and I'm going to click on this right here and just put it straight to the artboard. So I want to just go back to the original artboard, but not point to any object in particular, except for the whole artboard. So next I'm going to go to trigger, we can see that action is set to auto animate and it shows me the name of the artboard, which is great. Since I mentioned that I will show you different options for this. So how about we try the bounce this time? All right. So I want to go ahead and trust that out to make sure that everything is working properly. I'll go ahead and hit play. Click on that. Perfect. And does that work? And it does. And it sends me back. All right. Time to test out the other artboards. So again, I'm going to click here. This goes to this package, which is package number two. And here it's still set to tap auto animate or easing. I'm going to try snap so you can see what that looks like. Now also again, for the back, we just go ahead and put that there. And I'm going to keep the transition the same. So bounce. Now I do like to test as I go, not finish all of them and then have to go back and fix multiple areas. I like to work and then fix it before moving on to the next part. I'm going to go ahead and hit play. And as you can see, these are working. These are not yet working yet. But here I go. I go ahead and click there. It is working and it just pops me right back. Perfect. So you would actually continue this step to actually hook up and test out the following artboards. And don't forget to also set up the book now and as well as the call. You can also add other pages for such as hotel, flights and reviews. As well as profile and search. In the next lesson, I will show you exporting assets.
