Adding Interactivity

Now for the fun part, or at least the part I enjoy the most. 0:00 We're going to link together our artboards and 0:04 create a clickable prototype, let's get started. 0:07 In Adobe XD, I'm going to switch from design mode to prototype mode. 0:11 Here I can select elements on the screen and drag arrows from them that point 0:16 to different artboards, indicating that when an element is clicked, 0:22 that it should bring the viewer to a different artboard. 0:27 So the first screen we created is going to act as a central hub. 0:32 So first, let's select the filters icon, so 0:38 let's just zoom in a bit so we can actually see that. 0:41 And let's select this filters icon, in the first artboard. 0:47 And if you're having trouble clicking on anything, 0:52 remember you can always do it through the layers palette. 0:55 And then, after you select it, you should see a little blue arrow appear next to it. 0:58 Let's drag that arrow over to the filters artboard, and 1:06 you can drop it anywhere inside the artboard. 1:10 And if you've never done this before, you might see a window that asks you to choose 1:14 some transition settings, and generally the defaults are fine. 1:18 Well, material design has a whole set of rules for animations. 1:24 We won't worry about that for this simple prototype. 1:27 In this case, 1:30 I like a quick dissolve between screens just to show that something is changing. 1:31 Next, select the menu icon and 1:38 then drag its little blue arrow to the Navigation Drawer artboard. 1:43 And I like the way all those settings look, so we'll leave that. 1:50 And then finally select the fab button and 1:55 drag its arrow over to the last art board labeled Fab. 1:59 So this will provide our lateral navigation, but 2:05 we need some reverse navigation as well, 2:08 so we can get away from each of these states and back to our default state. 2:11 So lets start with the Fab artboard because that will be very similar. 2:16 So lets select this X icon and drag that over to the Default artboard. 2:21 And for the other two, I'm gonna try to use this scrim as the clickable area. 2:28 This won't be perfectly accurate in this prototype because Adobe XD allows clicks 2:34 to bubble through all layers. 2:38 Meaning that even if you click on anything in the Navigation Draw or 2:40 the side sheet, it won't actually block the clicks onto the scrim to go back. 2:45 But, that's fine for now, we can use our imagination. 2:50 So, we'll select, let's see, this scrim here, and 2:53 that should be toward the bottom. 2:59 There it is, and we'll go back there, and then we'll find the scrim here. 3:02 There it is, and we'll go back to the Default there as well. 3:11 Finally, save your work, select the Default artboard, and hit the play button. 3:18 Here, once again we can scroll down and back up. 3:27 And the app bar should stay in place, 3:33 because we checked the box that said to fix position when scrolling. 3:35 Then we can click the Menu button to open the Navigation Drawer. 3:40 And then we can click to dismiss it, I'll pretend I'm clicking the scrim to dismiss 3:45 it even though I can click anywhere. 3:49 And then we can also click the filters button, show those, so 3:52 I will dismiss that. 3:57 And then finally we can hit the fab button to show the camera, 3:59 and of course the X will dismiss that, and that's our prototype. 4:06 This has been a basic overview of design systems. 4:14 As we've seen they're very comprehensive, not just in their components but 4:18 in their description of how an app should feel and flow. 4:23 I encourage you to keep prototyping, dig deeper into the documentation. 4:27 And look at other design systems as well, 4:31 because as always there is a lot more to learn. 4:33