Hi everyone, in this video we're going to make this...

we're going to click this button, and it's going to have this...

like little pop-up overlay, we can close it, open it again, close it again...

let me show you how to make that in Adobe XD.

All right, to get started, I did a couple of things...

I added a button to our Product Details page, I moved this thing off...

because it was just kind of in the way, and I created this...

this is going to be that pop-up you saw at the beginning...

it's just a bunch of rectangles and circles...

and text, so it can be anything.

So you need something that's going to pop up...

and you need a button that's going to activate it...

so those are the two things to get started...

and the way this works is, this button...

or text, anything that activates it...

it wants to call an Artboard and overlay it.

So this thing here is not going to work...

it's just in the paste board, just hanging out by himself...

so what we need to do is, convert it into an Artboard...

and we don't really convert it into an Artboard...

we just kind of click off in the background...

if you have nothing selected, and grab the Artboard tool...

you know, like we were doing before, we've been, like adding Artboards...

I just click once then, I can actually drag out...

a custom Artboard over the top...

because it kind of snaps to the right size...

voila, we've turned our little graphic here into an Artboard.

I'm going to name it, I'm going to call this one "Modal Cut"...

and now I can connect them up.

So the way to connect them up...

click on your button, this is not a component, it's nothing...

it's just, anything can trigger it...

I'm going to select both of those and say...

actually, under 'Prototype', when this thing is clicked--

what we've been doing is we've been - under 'Prototype'.

- is we've been dragging things, so you can click on this...

actually just click on one of them or group these two...

so I'm just going to click on the green box.

We've been dragging them to connect to pages...

you can-- we'll do it the other way...

so with it selected we're going to add an interaction...

it's going to be a Tap, and by default...

it wants to go to auto animate or transition...

depending on the last thing you did.

The magic happens under here, under Overlay...

so when this is tapped, 'Overlay', what Artboard?...

oh, the Modal Cart one, please, and that's the big change...

can you see, this appeared, it wasn't there a second ago, now it's there...

let's give it a test run, as is, and let's see what it does.

So scroll down, my button...

hey, look at that...

and I can click it, close it, look at that.

The cool thing about it is that you don't actually need to action the close...

it just wants to revert back by default...

so even though there's a cross there on my mock-up...

it's just a circle with a cross in it, I haven't rigged it up...

you can actually click anywhere and it just goes away...

this works, but I haven't had to do anything.

So that's the basics of it, there's going to be a couple of things...

you're like, "Hey, didn't he have a Drop Shadow?"...

well, he probably didn't even see the Drop Shadow...

I spent ages crafting my Drop Shadow but it's gone...

and it's really hard because you can't really see the background.

So a few little things that happen...

is, so over here, I'm going to go back to Design mode...

'Option 2' on a-- 'Option 1' on a Mac...

on a PC I think it's 'Alt 1', sorry, PC people...

so what I want to do is, the Artboard...

and the white box in the background...

are actually separate things, this Artboard, white box...

did you get the idea?

White box, see the white box and the Artboard, separated...

so the problem with it, can you see...

there's my lovely little Drop Shadow...

but because it's kind of over the edge of the white box....

it's getting cropped out, so you can do one of two things.

You can make your white box smaller so you can see it...

or you can grab your Artboard and make that bigger so you can see it.

So now let's give it a preview...

let's go back to this guy, let's go to you, here...

and he's got a Drop Shadow now, yeah, kind of works, kind of...

I think my white box is a bit too big to fill the screen...

but yeah, we probably need a duller background...

we'll do that as well, we're getting a bit advanced, but hey.

One thing is, can you see...

by adding that overlay function to this...

what it did to this Artboard was actually...

disable the appearance of the background...

you can do that manually, but it does it automatically...

so that you can see the Drop Shadow...

but see the rest of this page underneath...

rather than being a big white box.

So what I want to do is have that kind of...

you saw at the beginning there, had that kind of...

like dark fade in the background...

actually, before we do that there's one bit...

that often gets my students confused, so I get you confused...

let me try and unconfuse it, is with it selected...

I'm going to switch back to my Prototype mode...

and give this a click, is where this appears.

So let's say that I put it right above "RICH", that word "rich" there...

so it's right above that, so if I go to 'Play'...

and I go down here and I say, you know...

so it should appear right above "RICH," boom...

it appeared in the middle of my thing, that's weird.

What's happening? Basically, this thing here, this overview...

I keep saying overview, overlay, is referencing the...

what's called the viewport, the viewport is the top of the document...

to this little line here.

So remember, we've been kind of talking about that throughout the course...

so it's looking at the bottom there...

not what's underneath in the content...

it's kind of fixed positioning, so if I move it down here...

not above "ORGANIC," but really close to the bottom of the page...

it's going to be at the bottom of the page...

and probably be in the way, watch this, click it, there you go...

so that's what that references.

Can you get it to pin to actual things, not that I know of right now...

if you try and use fixed positioning on it...

it ends up fixed positioning the button, not the overlay.

So let's get into the slightly more inception-ey bit...

where we will dull the background, it's kind of a trick...

it's currently not an option in here to kind of...

like fade out background, so what we do is...

we just put this on a different size Artboard that covers the whole thing.

So at the moment my Artboard is this size...

what I want to do is kind of move it over here...

I want to make it the same size as the viewport for this...

so it is how wide, if I go to my Design view...

I've clicked on my Artboard, I know that it's 375...

so I say, you are now '375', paste...

and how high should it be?

Click on this, so my viewport is up to this...

so 667, or, they're all 667...

so it doesn't matter which one I get it off...

you, going to be a height of 667...

and then I say, you are going to be kind of in the middle...

can you kind of get what I'm doing?

Use my arrow keys just to kind of pop it over the top...

I need to make it smaller, huh.

It's one of those times where responsive resize...

is actually brilliant, most of the time it's brilliant...

you saw it a couple of times, you need to turn it off, but that was great.

What I did was, so I grabbed the edge...

and if I just grab it, it works, but if I hold down the 'Option' key...

it does it from both sides at the same time, that's 'Alt' on a PC.

So I've got that, I kind of want it to be up into the middle...

and now what I want to do is just add a background...

of black with no border...

I want to lower the opacity of the Fill...

and I want it to be at the back.

So I've got an Artboard, it's got a black faded background now...

that matches the viewport...

if you were like, "Ah, you kind of had me at overview, but now you've lost me"...

it's okay, this is kind of advanced stuff...

if you're getting it, high five, you...

are you ready? I hope this works...

talking a good game Dan, come on.

Oh, it didn't work...

I know why now, but I was...

I was pretty confident that was going to work straight...

what is wrong? The positioning...

we positioned it when it was just a small little rectangle...

so if we go to 'Prototype' view now, and we click on this...

it's doing exactly what we said in relation to the viewport...

can you see, it's kind of overlapping the bottom...

so I want to say, you come to the top, there you go...

now let's do this...

ready?

Even though you don't have to click the X, you must click the 'X'...

all right, that's kind of cool, I love the little pop-ups...

and that is how to make them in Adobe XD...

all right buddies, I will see you in the next video.