There's two more art boards we need to create, one for the navigation drawer and

another for the fab that will help users take photos.

Let's take a look at the documentation for navigation drawers.

So I'll go to components here and find navigation drawer.

And I'm going to scroll down to usage.

So it says that navigation drawers should be used to access destinations and

app functionalities such as switching accounts.

So this would be a good place to put our higher level photo categories

like all photos, albums, people, and trash.

It would also be a good spot for the link to settings and the sign out button.

So let's scroll down to types of navigation drawers.

Similar to sheets, there's the standard approach which on a desktop or

tablet is often co-planar with the app content.

So you see there's no shadow here because it's on the same level of elevation.

On mobile, navigation drawers are always modal.

And they can appear from the side or

in the case of a bottom app bar, they can appear from the bottom.

Since we're using a bottom app bar, the option for

either one is available to us and I think

we'll just go with the standard modal one that comes in from the left side.

So let's switch back to our prototype and

select the art board we used for filters and

copy and paste it to duplicate it, and

let's rename it to Mobile Navigation Drawer.

Next, let's go inside here and we want to delete everything except for

the bottom app bar and the photo gallery.

So that includes the Skrim.

Delete all of that.

Then back in our UI kit, let's copy and

paste a side Navigation Drawer.

So remember this is alpha order.

So N is about down here.

Zooming into these Navigation Drawers, and lucky for us,

they've already got elements laid out here.

So this will a little bit faster than actually building out our side sheet.

So I will select this left navigation drawer, copy it and

you'll notice it even includes a scrim for us, isn't that nice?

We'll switch over to our other art board and paste it.

And because this is the exact same size as the Android phone art board,

we don't have actually have to adjust the positioning on this in theory.

It should just paste right where you need it.

And it should also appear as the top layer, but

if not just make sure you move it up above the app bar and the photos.

And finally, let's just make sure we unlink it, so

that we can make our own edits.

So let's open that up and see what's inside.

So we have the account switcher, the text labels, and

the actual surface itself, which includes a scrim like I said.

Now because this is an app where people need to log in,

a lot of the UI here is in default.

I'm going to drag a photo of myself into this

profile photo spot, so this little circle here.

And maybe we can change these headlines to give a bit more context.

I'll double-click this first one here and I'll type in my own name.

You of course can type in your name.

And then I'll add an email address, example dot com.

And these three pieces of information taken together,

will let the user know which account they've used to sign in.

And like I said, feel free to add your own details.

Next, let's relabel these items to all photos,

the next one should say albums.

People, Trash,

settings and sign out.

Now this element is using Adobe XD's repeat grid.

So to get rid of these last three items that we don't need,

all we have to do is just resize the grid to hide them.

Now let's get some better icons in place.

So go back to the UI kit and let's just zoom out here.

We'll go to this second row of art boards and zoom in to the very bottom.

This is where I've pasted some icons that are not included

with the default UI kit but are a part of material design.

So we're actually gonna need all of these except for

the camera icon which we've already used.

So just go ahead and select all of them, and copy them, and

then paste them into your art board and let's just start positioning this.

So first we can just delete this camera icon because we won't need it.

And for the all photos icon, I'll use this one that looks like a stack of pictures.

So I'll move that into place and I'm actually gonna zoom in a little more here

just to get some better positioning.

So I'll move that into place.

And then we need to grab the fill color off of that purple heart and

adjust the opacity to match.

So from the inspector on the fill color, I'm just going to grab the eye

drop tool and there's a little loop that will zoom in let's just make

sure we're grabbing the darkest purple color here just like that.

And we'll increase the opacity to 100%.

And then we just need to delete the old icons.

So let's try to find that one.

Looks like it's that there, and hit Delete.

Then we can move these others into place.

So for this one with a little bookmark, I'll use for

albums, so let's put that in place.

Make sure it lines up, this one will be for

people, picture of the face, good.

This one will actually be for a sign out down here at the bottom.

This will be trash and this one is for settings and

let's just adjust its positioning a little more so

it's a bit more precise.

We go, that looks centered.

This one can come up a little, looks good.

The trash icon here is also off center, I think these are all off center.

There we go, the settings just like that, and Sign Out just like that.

That looks good.

Okay, and now because this is a repeat grid we can actually just select this

single icon here under the repeat grid.

Hit Delete and it will get rid of all of those old icons.

Now, I'll admit in this art board, these layers are kind of a mess, but

we're moving quickly so that's actually okay.

If you'd like to organize them, feel free to do so.

But often when I'm making these quick prototypes, I'll prioritize momentum

over organization because I just wanna see if something works in the first place and

if it does, then I can start iterate and get organized.

But in the spirit of momentum, let's keep moving.

The last art board we need to make is for the fab.

So let's duplicate this latest art board and rename it.

And we'll call it mobile-fab, and then for

this one, let's get into these layers.

We'll delete everything except for the app bar.

So we also actually wanna get rid of this repeat grid

cuz we're going to replace it with something else.

This screen is going to show whatever the user's camera sees, and

allow them to save a photo.

We're keeping the app bar because it can change based on the context of

the application.

So let's add a background photo.

I had a lot of fun pointing my camera at this giraffe, so

I'm going to just drop in that nice big photo.

And I'll zoom out to resize it,

Make sure it covers the application completely,

there we go and I'll move it over, maybe down a little bit.

I think that looks good.

That seems like something I would see on my phone.

And now, we need to move that below the app bar, there we go.

And now, let's flip back over to our UI kit and

grab some icons because we need to change up this app bar.

So we've already used all of these icons, we don't need those anymore.

I'm going to go up to the top and zoom in on the field system icon set.

And none of these in particular look the best for our shutter button,

but I'm just going to use this one, the four little corners here.

So I'll select that, copy it to my clipboard and

paste it in, and then I'll adjust the opacity.

And let's actually put it in above the tab there

and we'll move this into place, might have to zoom in a bit to actually select it.

Oops, there we go, so move that into place.

And let's delete this old camera icon.

Oops, looks like it moved outside the layer there.

Let's put that back in, there we go.

And now let's try to align this perfectly with the circle,

it may already be aligned.

No, there it is, so equidistant from all sides.

Now, back in the UI kit once again,

I want to grab this X icon.

So I will select that,

there we go, copy it and paste.

And I want this to be where the menu is right now,

so let's move that to right there.

Not that the layer ordering really matters, but,

Helps keep us in check here, and now I'm going

to adjust this so that the opacity is 100%.

And I actually need to unlink this because I wanna change,

The color of it, change the fill color to white.

And then finally, we can delete this old menu icon.

And at this point, we don't actually want anything else in the app bar except for

our shutter button and this x, so we can get rid of these filters.

And we can get rid of the search icon.

And this is actually breaking the rules of the bottom app bar a little bit,

we should have more than just this one action here.

But I think in this particular case, it is okay to bend

the rules just a little bit for this one state of the application.

So that should be it for the actual layouts.

When you're done, go ahead and save your work.