Now for the fun part, or at least the part I enjoy the most.

We're going to link together our artboards and

create a clickable prototype, let's get started.

In Adobe XD, I'm going to switch from design mode to prototype mode.

Here I can select elements on the screen and drag arrows from them that point

to different artboards, indicating that when an element is clicked,

that it should bring the viewer to a different artboard.

So the first screen we created is going to act as a central hub.

So first, let's select the filters icon, so

let's just zoom in a bit so we can actually see that.

And let's select this filters icon, in the first artboard.

And if you're having trouble clicking on anything,

remember you can always do it through the layers palette.

And then, after you select it, you should see a little blue arrow appear next to it.

Let's drag that arrow over to the filters artboard, and

you can drop it anywhere inside the artboard.

And if you've never done this before, you might see a window that asks you to choose

some transition settings, and generally the defaults are fine.

Well, material design has a whole set of rules for animations.

We won't worry about that for this simple prototype.

In this case,

I like a quick dissolve between screens just to show that something is changing.

Next, select the menu icon and

then drag its little blue arrow to the Navigation Drawer artboard.

And I like the way all those settings look, so we'll leave that.

And then finally select the fab button and

drag its arrow over to the last art board labeled Fab.

So this will provide our lateral navigation, but

we need some reverse navigation as well,

so we can get away from each of these states and back to our default state.

So lets start with the Fab artboard because that will be very similar.

So lets select this X icon and drag that over to the Default artboard.

And for the other two, I'm gonna try to use this scrim as the clickable area.

This won't be perfectly accurate in this prototype because Adobe XD allows clicks

to bubble through all layers.

Meaning that even if you click on anything in the Navigation Draw or

the side sheet, it won't actually block the clicks onto the scrim to go back.

But, that's fine for now, we can use our imagination.

So, we'll select, let's see, this scrim here, and

that should be toward the bottom.

There it is, and we'll go back there, and then we'll find the scrim here.

There it is, and we'll go back to the Default there as well.

Finally, save your work, select the Default artboard, and hit the play button.

Here, once again we can scroll down and back up.

And the app bar should stay in place,

because we checked the box that said to fix position when scrolling.

Then we can click the Menu button to open the Navigation Drawer.

And then we can click to dismiss it, I'll pretend I'm clicking the scrim to dismiss

it even though I can click anywhere.

And then we can also click the filters button, show those, so

I will dismiss that.

And then finally we can hit the fab button to show the camera,

and of course the X will dismiss that, and that's our prototype.

This has been a basic overview of design systems.

As we've seen they're very comprehensive, not just in their components but

in their description of how an app should feel and flow.

I encourage you to keep prototyping, dig deeper into the documentation.

And look at other design systems as well,

because as always there is a lot more to learn.