4.1 Creating and Sharing Prototypes in Adobe XD

Welcome back to the course in this lesson, you'll learn how to create and share prototypes in Adobe XD. This is a very powerful feature that allows you to visualize how users can experience your website or your app. So let's begin. Right here, I have a couple of Artboards that I grabbed from the UI kit, I showed you previously, and we're gonna simulate how this app would work by using the prototype feature. So, to enter it, simply switch on to the prototyping tab. And the very first thing you would wanna do is set your home screen. So that's the screen that opens up first, when you're previewing your prototype. So we're gonna start with this. You can set the home screen by selecting an artboard and just clicking this little button here. Really easy, if you decide you want to use another screen just select a different one and that's gonna update automatically. So now let's say that when I click this link, I wanna go to the screen. Right so what I'm gonna do is drag a wire from this element to the screen, and in the inspector, I can choose the trigger. So when I tap this link, it's gonna open up this the screen, and I can choose the action. In most cases when prototyping, you would use a transition but you can also use auto animate more about this in the next lesson, so let's choose transition. Here the destination is the actual screen that you're going to and you can choose what kind of animation you want to use. By default, it's set to dissolve, but you can choose a slide or a push. So let's stick with dissolve for now. You can choose the easing duration and so on. So now, when you preview your prototype, notice that when I tap on Create Account it takes me to this bit. And then I can go into Create Account. I can choose this element, And I can click and drag back to Sign In. And again, I can choose the trigger as Tap, Transition, Animation. I can do another one, for example, slide left. And now create account and when I click x, it just takes me back to sign in. And I can then do the same, for the other screens. Let's say that when I completely filled in the information here. And I tap on the Create Account button. That's gonna take me to this screen and then skip here. It's gonna take me to this screen and then this will take me to this screen. Right, so now my prototype looks something like this Create Account, created. Skip, skip and I'm at the final screen. And that how prototyping works at the most basic level. You setup some triggers and some actions. Now, if you want to delete a wire or a link between two screens it's really simple. You just select the screen that's has the start of the wire, you just select it and just add delete and that's it. If you wanna do it again, just click and drag towards the screen that you wanna go to or alternatively select the element, click on this blue arrow. And I can choose a destination from this list, in my case, Create Account dark and the wire will automatically go to that place. XD also has a nice feature for when you wanna go back. So instead of specifying a destination here on the action you can just say previous outboard and now, When I click this it just gonna go to the previous outboard which in my case it's sign in. Now to preview the prototype you can do it right here on the desktop using desktop preview. And you can even record them using this functionality here. And you can also preview these interactions these prototypes on a device. So, on mobile preview, you can just click this. It works on both iOS and Android and on Android, you can download the XD mobile app on iOS. You can connect your iPhone via USB to your computer and you need to use the latest version of iTunes. Now there are some extra features that I want to quickly mention when it comes to prototyping in XD. The transition that you saw me use it just one example of an interaction. You can also do a timed transition. So for example, I added this splash screen artboard here, and what I wanna do is I want to create a time to transition so that after a set duration, we go from this screen to this screen. So to do that, I can select this Artboard. Let's make it our home screen. And I can click on this little + sign that says Add Interaction. Instead of tap, I'm gonna choose time. And let's say I wanna keep those on for three seconds. And then I'm gonna transition to sign in. So let's see how that's going. So let's preview that. 1, 2, 3 and there it is, that's a times transition. You can also do very cool things, like using voice triggers and speech. So you can enter a voice command here, and when you speak it out loud, and of course you'll connect it to a microphone, XD will actually recognize that and it's gonna perform the action that you tell it to. If you want a more detailed tutorial on that, and also on speech. Please check out the lesson notes I've linked to an alert tutorial that I made on the topic where I go a lot more in depth on the subject. But for now, know that you can add time transitions and also voice triggers and speech to Adobe XD prototypes. And finally, before we wrap it up, I just wanna quickly mention that when you share your prototypes, you can pass or protect them. So whoever gets a hold of this link will have to enter a password to view that, that prototype. There we go and that's how you can create and share prototypes in Adobe XD. Now, to end this course properly, I'm gonna show you one of the best features in Adobe XD which is auto animate that's coming up in the next lesson.