Navigation Drawer and Bottom Sheet

There's two more art boards we need to create, one for the navigation drawer and 0:00 another for the fab that will help users take photos. 0:06 Let's take a look at the documentation for navigation drawers. 0:10 So I'll go to components here and find navigation drawer. 0:16 And I'm going to scroll down to usage. 0:21 So it says that navigation drawers should be used to access destinations and 0:26 app functionalities such as switching accounts. 0:30 So this would be a good place to put our higher level photo categories 0:34 like all photos, albums, people, and trash. 0:39 It would also be a good spot for the link to settings and the sign out button. 0:42 So let's scroll down to types of navigation drawers. 0:47 Similar to sheets, there's the standard approach which on a desktop or 0:53 tablet is often co-planar with the app content. 0:58 So you see there's no shadow here because it's on the same level of elevation. 1:03 On mobile, navigation drawers are always modal. 1:07 And they can appear from the side or 1:13 in the case of a bottom app bar, they can appear from the bottom. 1:16 Since we're using a bottom app bar, the option for 1:21 either one is available to us and I think 1:24 we'll just go with the standard modal one that comes in from the left side. 1:28 So let's switch back to our prototype and 1:33 select the art board we used for filters and 1:38 copy and paste it to duplicate it, and 1:44 let's rename it to Mobile Navigation Drawer. 1:49 Next, let's go inside here and we want to delete everything except for 1:56 the bottom app bar and the photo gallery. 2:02 So that includes the Skrim. 2:06 Delete all of that. 2:08 Then back in our UI kit, let's copy and 2:10 paste a side Navigation Drawer. 2:16 So remember this is alpha order. 2:20 So N is about down here. 2:22 Zooming into these Navigation Drawers, and lucky for us, 2:26 they've already got elements laid out here. 2:31 So this will a little bit faster than actually building out our side sheet. 2:34 So I will select this left navigation drawer, copy it and 2:39 you'll notice it even includes a scrim for us, isn't that nice? 2:43 We'll switch over to our other art board and paste it. 2:48 And because this is the exact same size as the Android phone art board, 2:55 we don't have actually have to adjust the positioning on this in theory. 3:00 It should just paste right where you need it. 3:05 And it should also appear as the top layer, but 3:09 if not just make sure you move it up above the app bar and the photos. 3:12 And finally, let's just make sure we unlink it, so 3:17 that we can make our own edits. 3:21 So let's open that up and see what's inside. 3:24 So we have the account switcher, the text labels, and 3:31 the actual surface itself, which includes a scrim like I said. 3:36 Now because this is an app where people need to log in, 3:41 a lot of the UI here is in default. 3:44 I'm going to drag a photo of myself into this 3:47 profile photo spot, so this little circle here. 3:51 And maybe we can change these headlines to give a bit more context. 3:55 I'll double-click this first one here and I'll type in my own name. 4:01 You of course can type in your name. 4:08 And then I'll add an email address, example dot com. 4:10 And these three pieces of information taken together, 4:19 will let the user know which account they've used to sign in. 4:23 And like I said, feel free to add your own details. 4:27 Next, let's relabel these items to all photos, 4:30 the next one should say albums. 4:39 People, Trash, 4:47 settings and sign out. 4:52 Now this element is using Adobe XD's repeat grid. 5:00 So to get rid of these last three items that we don't need, 5:06 all we have to do is just resize the grid to hide them. 5:10 Now let's get some better icons in place. 5:15 So go back to the UI kit and let's just zoom out here. 5:17 We'll go to this second row of art boards and zoom in to the very bottom. 5:23 This is where I've pasted some icons that are not included 5:30 with the default UI kit but are a part of material design. 5:35 So we're actually gonna need all of these except for 5:41 the camera icon which we've already used. 5:43 So just go ahead and select all of them, and copy them, and 5:45 then paste them into your art board and let's just start positioning this. 5:50 So first we can just delete this camera icon because we won't need it. 5:57 And for the all photos icon, I'll use this one that looks like a stack of pictures. 6:01 So I'll move that into place and I'm actually gonna zoom in a little more here 6:08 just to get some better positioning. 6:13 So I'll move that into place. 6:18 And then we need to grab the fill color off of that purple heart and 6:22 adjust the opacity to match. 6:27 So from the inspector on the fill color, I'm just going to grab the eye 6:29 drop tool and there's a little loop that will zoom in let's just make 6:34 sure we're grabbing the darkest purple color here just like that. 6:39 And we'll increase the opacity to 100%. 6:45 And then we just need to delete the old icons. 6:50 So let's try to find that one. 6:54 Looks like it's that there, and hit Delete. 6:59 Then we can move these others into place. 7:04 So for this one with a little bookmark, I'll use for 7:05 albums, so let's put that in place. 7:10 Make sure it lines up, this one will be for 7:15 people, picture of the face, good. 7:19 This one will actually be for a sign out down here at the bottom. 7:24 This will be trash and this one is for settings and 7:28 let's just adjust its positioning a little more so 7:33 it's a bit more precise. 7:39 We go, that looks centered. 7:45 This one can come up a little, looks good. 7:49 The trash icon here is also off center, I think these are all off center. 7:52 There we go, the settings just like that, and Sign Out just like that. 7:59 That looks good. 8:07 Okay, and now because this is a repeat grid we can actually just select this 8:09 single icon here under the repeat grid. 8:14 Hit Delete and it will get rid of all of those old icons. 8:18 Now, I'll admit in this art board, these layers are kind of a mess, but 8:25 we're moving quickly so that's actually okay. 8:30 If you'd like to organize them, feel free to do so. 8:33 But often when I'm making these quick prototypes, I'll prioritize momentum 8:36 over organization because I just wanna see if something works in the first place and 8:41 if it does, then I can start iterate and get organized. 8:46 But in the spirit of momentum, let's keep moving. 8:50 The last art board we need to make is for the fab. 8:54 So let's duplicate this latest art board and rename it. 8:59 And we'll call it mobile-fab, and then for 9:07 this one, let's get into these layers. 9:12 We'll delete everything except for the app bar. 9:17 So we also actually wanna get rid of this repeat grid 9:24 cuz we're going to replace it with something else. 9:27 This screen is going to show whatever the user's camera sees, and 9:31 allow them to save a photo. 9:35 We're keeping the app bar because it can change based on the context of 9:38 the application. 9:41 So let's add a background photo. 9:42 I had a lot of fun pointing my camera at this giraffe, so 9:45 I'm going to just drop in that nice big photo. 9:50 And I'll zoom out to resize it, 9:55 Make sure it covers the application completely, 10:01 there we go and I'll move it over, maybe down a little bit. 10:05 I think that looks good. 10:11 That seems like something I would see on my phone. 10:13 And now, we need to move that below the app bar, there we go. 10:17 And now, let's flip back over to our UI kit and 10:22 grab some icons because we need to change up this app bar. 10:26 So we've already used all of these icons, we don't need those anymore. 10:31 I'm going to go up to the top and zoom in on the field system icon set. 10:36 And none of these in particular look the best for our shutter button, 10:43 but I'm just going to use this one, the four little corners here. 10:48 So I'll select that, copy it to my clipboard and 10:54 paste it in, and then I'll adjust the opacity. 10:59 And let's actually put it in above the tab there 11:07 and we'll move this into place, might have to zoom in a bit to actually select it. 11:13 Oops, there we go, so move that into place. 11:19 And let's delete this old camera icon. 11:25 Oops, looks like it moved outside the layer there. 11:32 Let's put that back in, there we go. 11:34 And now let's try to align this perfectly with the circle, 11:37 it may already be aligned. 11:41 No, there it is, so equidistant from all sides. 11:42 Now, back in the UI kit once again, 11:49 I want to grab this X icon. 11:53 So I will select that, 11:58 there we go, copy it and paste. 12:02 And I want this to be where the menu is right now, 12:07 so let's move that to right there. 12:12 Not that the layer ordering really matters, but, 12:16 Helps keep us in check here, and now I'm going 12:23 to adjust this so that the opacity is 100%. 12:28 And I actually need to unlink this because I wanna change, 12:33 The color of it, change the fill color to white. 12:38 And then finally, we can delete this old menu icon. 12:42 And at this point, we don't actually want anything else in the app bar except for 12:47 our shutter button and this x, so we can get rid of these filters. 12:52 And we can get rid of the search icon. 12:58 And this is actually breaking the rules of the bottom app bar a little bit, 13:00 we should have more than just this one action here. 13:05 But I think in this particular case, it is okay to bend 13:09 the rules just a little bit for this one state of the application. 13:13 So that should be it for the actual layouts. 13:19 When you're done, go ahead and save your work. 13:22