Subscribe or Login to watch video

Login or Subscribe to watch video

31 - How to make a popup modal in Adobe XD with a blurred background

Questions & Comments

No comments

ALL ACCESS: $19.95 per Month + Cancel anytime   

Video Transcription

Hey there, in this video we're going to make this page, where the background is kind of faded out and dark, and this little popup nodal appears. Let's go and learn how to do that now in Adobe XD.

So first thing is, I'm going to duplicate this page here. There's loads of ways of doing this. You can select the word 'Homepage', copy and paste, and put some other one next to it. You can hold 'Alt', and drag it across. You can go to your Layers panel and right click 'Homepage', and say 'Duplicate'. Everything leads to a new page. Thank you, XD. I'm going to separate mine out because I like a bit of a gap in there. I'm going to rename this one here, this is going to be my 'Popup Decision'.

So what I want to do is, I want people to click on this Preview button and then have our options to say "Would you like to see it as a student, or as an instructor?" And what I like to do, like you saw at the beginning there, I want to select all of this and do nothing. Actually what I want to do is grab the Rectangle tool, and draw a box over it all. I'm going to draw it over the whole thing. All the way down to the bottom. I'm going to have no border, give it a black Fill. And I am going to go to 'Background Blur'. This cool option.

So Background Blur, the tick on, just blurs everything behind that box we made. Now, it was black, and obviously it's disappeared now, so what you do is, CSS Opacity, you just kind of, like at the moment, it's completely see through, so you can make it a bit more opaque and decide how dark you want that to be in blurring the background. It's a really quick way of, like this little popup's going to kind of just like fade the background out. And then it's kind of like an Ajax popup. So what I'm going to do is zoom out a little bit. I'm going to select it all now. And I'm going to lock it, so 'Command L' is the shortcut. Everything is locked, so that when I'm working on my little popup nodal it's not going to have trouble. So I'm going to do a little popup nodally thing. It's going to be this, it's going to have a Drop Shadow. It's probably going to have a larger Drop Shadow than normal. So I'm going to do 6x6 and a Blur of maybe 16. And you see, it's just that bigger Drop Shadow.

I'm trying to get really obvious, and stand out. In terms of the cross I can either pull it from a Wireframe or the sticker sheet from Google Material. There's some really nice stuff in this top left part here. So I'm just going to grab him, copy him, move him across, not to this one, to this one. Paste him, there he goes there. And make sure I'm working at 100%. And you realize, that is a big nodal, Dan, a bit big. I'm going to pull some text from here, from what student sees, what you see. And I might grab all of this. Copy it, move it across, and just stylize it. So our text is going to be 16. Back to 'Assets' and I'm going to go to '16'. These buttons here are going to be from-- I'm stealing from here. So I want you. Maybe you can do 'Edit', 'Copy'. Then select this fellow and go, 'Edit', 'Paste Appearance'.

Now that didn't work because this is actually grouped together, so you got to ungroup it, and just select the Blue box because I had both the text, and it didn't know what to do. 'Paste Appearance'. I'm going to do the same to this one. This is already separated apart. 'Paste Appearance'. I'm going to change this one to green. Now I'm just messing around. Aligning these up, trying to make them look pretty. So, in here, looks okay, maybe a bit higher. A bit smaller, and you go up in the corner here. That's all I want. Made the background, made a little popup thing that's not quite in the center. The cool thing about it is, even though these are all locked and I select at them, looks like I've got everything selected, if I just start dragging this, you can see, they just stay locked. So I'm going to group this thing. If I group it, it gives me like the options you see, that purple line that appeared. So I know it's in the center. All right, that's going to be it for this video. Let's go and make the Dashboard for the Instructor page.

ALL ACCESS: $19.95 per Month + Cancel anytime