How to Create a Popup Modal in Adobe XD

How to Create a Popup Modal in Adobe XD


Hi everyone, in this video
we are going to… talk about Popup Modals
or overlay boxes. Remember in the last video, when you
clicked the Start Trial button… you ended up at a new page. We’re going to do something, when you
click this button, you’re ready for it? Just kind of like pops up over the top,
fades out the background… and we don’t have to jump pages,
it feels a little bit more fluid. That’s the word, not very
popular at the moment. So we’re going to close it down,
open it up, close it down. So we’re going to learn how to do that now
in our prototype in Adobe XD. First thing to do to
create a modal… is we still need this artboard but we
don’t need a lot of the stuff in it. Plus we’re still in Prototype Mode
from when we’re working in the last video. So switch to ‘Design’, and we are
going to say goodbye to the Nav. I’m going to click on that,
goodbye to the footer. So I’ve just got this last chunk left. And where should it be? There’s stuff up there too, make sure you
get rid of everything you don’t need. So what we want to do is,
I just want this chunk. I’m going to have to– make sure
you got a white box in the background… or something to overlay over the top
of the Home Page like you saw in the intro. Let’s just give it a try as is. There’s a few other things
I want to do to it… but let’s just, let’s just cut
to the chase, Dan. So we’re going to go back
to ‘Prototype Mode’… and we’re going to say… when that button is clicked,
what’s going to happen? Instead of going over here,
and go into this Tap Transition… we’re going to go to Tap still,
but we’re going to say ‘Overlay’. And that’s the magic source. What’s going to happen is,
it’s going to overlay that page… over at the top of this one… excluding the background. So just the physical
things on this page. Let’s just give it a preview
to see what it looks like. Give it a preview.
Cool, huh? You’ll notice, by default if I click
anywhere it gets rid of it. So that’s something that
just happens by default. A couple of things happen there, one is
I did a shortcut to open this preview. So it is ‘Command Enter’ on a Mac,
or ‘Ctrl Enter’ on a PC. So click down your keyboard, the Enter key,
sometimes it’s the Return. Sometimes it’s got just
a little arrow on it. So hold those down, that launches
the preview, which is cool. And let’s say I have a little
look at this thing. You’ll notice it’s a dotted line. So the solid line shows our transition,
this one here’s an overlay. The other thing that’s happening in here
is that it’s going to that page. It’s dissolving, which is fine,
it’s got everything else, that’s perfect. What ends up happening
to this page… if I click on it you’ll
notice this little icon. This little icon here says whenever– when anything else is
clicked just go back to… not the page next to,
but whatever page you got it from. So, what’s it called?
Return to Previous Artboard. So if I click the Start Trial button
on like one of the hundred other pages… it’s going to load this page… and when I click off it’s going
to go back to that original page. Do you get what I mean? So it’s not going
back to Home Page.. it’s going back to wherever you
came from, which is really cool. Sometimes that can be
turned off though… like I’ve broken it where it’s just
disappeared like that, and I’m like… “Hmm, how do I make that happen again?”
So you click on it, and you say ‘Tap’… which is perfect. And you go to this one
that says Previous Artboard. Then it turns into that
little return button, then goes to that. A couple other things I want. I want the little cross because clicking
anywhere is a bit weird for people. It’s going back to that wires UI kit
for the wireframes. I’ve closed mine down;
where are you, wires? I’m looking for the cross,
I could go to Adobe Market, or Materials… but I know it’s going to be in here,
it’s going to be easy enough to find. Cool, there’s a cross, there’s a cross.
I’m going to break it apart here. So I’m going to right click it,
‘Ungroup Symbol’. Grab that cross, jump back
into my other documents. I’m going to put it in the corner here. And because I’ve used that blue,
like the way we had in that first one… it’s just made it easy, I don’t have
to recolor everything every time. I’ll show you a trick for recoloring
it all at the end, if you are like… “Man, hit that blue.” So hold ‘Shift’ down,
make it a little bit bigger. Now it’s going to be my little cross. Even though you can
click anywhere… I still feel like you need a button,
that actually click. So I preview. What’s the shortcut?
‘Command Enter’, or ‘Ctrl Enter’ on a PC. Click on there, cool, huh?
Close it down. Nice. One of the things I like to do
to close it down is – I zoom out. – is I’m going to grab
a big rectangle… because you saw at the beginning
it kind of grayed out the background. There’s an easy way to do that,
just grab a bigger rectangle… give it no border,
give it a fill of our black. Then just lower down
the opacity of this thing. Then go back to your ‘Arrow Tool’,
black arrow, right click it, send it back. So we’re going to
give it a preview… and there’s going to be a couple
of little issues we need to fix. So previewing, and the weird thing is
it previewed from this page. You might already run into this… where sometimes it’s previews from the
Home Page, and sometimes from this. So what ends up happening is
if I have nothing selected… so my black arrow,
just click in the background. It’s going to default to this Home Page.
Why? Because if I go to Prototype… and if I zoom in, in the top corner here,
can you see this little Home icon? That just indicates that if XD’s not sure
which page you mean… it’s going to start from this little
Home icon; you can change that. You could say,
Start Trial could be my home. So that’s the default,
but it’s a bit weird. I’m going to go back here. The way to override that,
and what we did there by accident… is if you click the artboard name,
‘Start Trial’… you’re kind of telling XD,
just preview this one for me. Even though I haven’t set it
as the Home. And if I click it, it’s going
to start from there. If I have nothing selected,
it will start from the Home screen. So what’s wrong?
Let’s give it a click, kind of half works. It’s kind of in the middle there… you’re like,
“What happened to the top bits?”… the middle bits,
it’s all a little bit weird. So let me show you the two things
that are wrong. One is, it’s the– This first option here,
if I go back to Design… remember, when we were doing
my crazy cell phone footage… we changed the Viewport height. We should probably just switch it back
to matching both of them… because that’s the line that I need
when I’m previewing. So I’m going to copy it
and go back to this. It’s up to you, they just have to match. Doesn’t really matter
if you’ve gone for… the shorter or the taller
of the Viewport heights. I’m just going to go back
to that original one… where we’re dealing with
the 366 wide and 768. Just so I’m aware that that’s the– that’s the line that
I can’t design underneath… or at least a lot of people won’t see
what I put under here unless they scroll. That’s going to get rid of part of it.
Let’s preview that. Back to my kind of skinnier model,
but that’s okay. If I click on this… kind of works, but they’re still
that top chunk. See this bit here. I’ll show you why that is. So if you go to Prototype… and I click on this,
and I click on ‘Button’… and you can kind of see it here,
there’s a big green thing. It’s going to grab
that and jam it… and start it wherever the
top of the green box is. So what I want to do is close it down,
can we close it down? I’m just clicking on the blue box,
and grab that, and just move it to the top. So instead of being kind of
half part the way down… I’ve just dragged this
center bit to the top. Now if I preview, and I click on this,
kind of covers the whole thing, here we go. Cool, huh? I love pop-up modals,
you might not like them. It’s definitely a phase that
the internet is in, and I’m in. It’s just a way of, instead of
jumping through like 20 pages… it allows you to kind of jump– you’d still be able to see where you are,
you can go back to it. And you don’t have to have this… like completely separate
page to jump back and forth. It feels like a less extra step. Even though really it’s not, just a trick. Especially for login screens,
just something that’s quite small. Definitely great for,
like help boxes. If you click on the little question mark
to give yourself a little hint. It can be helpful. And the trick we did today, is we put,
under Design we put a big black box… and we just lower
the opacity down… and kind of covered it up to make it
really stand out against the background. All right, friends, that
is it for this video. I will see you in the next one. Hi there, I hope you enjoyed the video. My name is Daniel Scott. If you would like to do the full course… there will be a link in
the description for that. Please give this video, on YouTube here… a thumbs up, really helps me
in what I’m doing. Also, consider subscribing to the channel. I release a video like this every week,
for your viewing pleasure. All right, bye.

6 comments

  1. One question…I'm prototyping a mobile website and keep getting black borders either at the top or sides, it's so frustrating, all the layout is according to the mobile modal but I'm lost, please help

  2. I have 3 artboards

    the parent(home) has the landing page, second is the homepage, then the last was the modal, which will trigger whenever there's a button that's being tapped.

    The problem is that, the modal will have a background of the home artboard rather than the homepage artboard.

  3. how about making it so that the pop up remains in the same position when you scroll down, and instead the previous page you were on scrolls down. Sometimes there's info on the actual page that you might need in the pop up? so that helps see the info without having to exit the pop up to look again?

Leave a Reply

Your email address will not be published. Required fields are marked *