Advanced prototyping using buttons & dropdown menus in Adobe XD

Hi there, in this tutorial we're going to look at ways of faking interactions by doing things like this, with our little drop down menus. We close it back up, all nicely faked in XD, plus in our apps, we can have navigation push in, push back out, and we can have nice little search boxes, click back out. Lastly we can add things to cart, and they appear in that little cart here. Let's go look now how to make these using Adobe XD Prototype. 

The first thing we're going to do is like a drop down menu. We're going to use this little account button here. When you click on it, it's going to drop down with different options to log in. So what we're going to do is, zoom out, I want to grab these three. And I'm just going to drag them so there's a bit of space. I'm going to grab this one. Holding 'Alt' while I drag it. So I've got this option here. So they look exactly the same, and the only thing that's going to change is the drop down menu. And then it's about the transition using the Prototype option. 

So first up let's build a little drop down menu on the second option. I'm going to grab the Rectangle tool and I'm going to draw like a little drop down thing that opens up. I'm going to work at 100% so that I'm not designing it all a strange size. Then I grab the Pen tool, and just draw like a little kind of pop out. Quote thing. I'm going to select this guy. I want it to be everything that's there so I don't want it to have a drop shadow. So, now I want to select both of these. So I'm going to click on this guy, the edge, and this guy, and what I'll do is, actually this guy here, I want to have a Fill. So I'm going to select both of them and then, over here, in my Boolean operators, my Path Finder, I'm going to use this first option, just to join them up. 

So that's going to be my little drop down menu. So nothing too exciting. We'll go and build this out in a second. I just want to give you the structure first. I'm going to zoom out. We're going to switch to 'Prototype', and what I would like to do is click on this, because it is a symbol I need to double click on it to get inside that symbol. You know you're inside because you're inside that green box. I'm going to say, you, I want to go to this page here. So when that is clicked, I'd like to jump to this page. It's all about the transition. So if I click on it, and this all is going to work nice. I'm going to use Ease In and Ease Out. To be honest, it could be either, any of these ones really. It's hard to tell the difference. And let's give that a preview, so hit 'Play'. And when this clicks, magic, we got a drop down. 

Now it doesn't go back, so what I'd like to do is close down the preview and say, when that's clicked again-- it's really common to click that and say go back to previous Artboard. Hit 'Play', when that's clicked, drops down, and you click it again, it pops back up. It's up to you how you want this thing to transition and whether you want to just change this just to be a jump cart. I might just do that. So it's got no 'Dissolve', no nothing, just a 'None'. And that will just look like this. So I click once, and it just appears. I still got Dissolve when they come back. Nice! When I said I've still got the Dissolve on, going back to the beginning, because I used 'Go back to the previous Artboard' not 'Go back to the Home Page'. If you use 'Previous', it doesn't give you the option of choosing the Transition, it will just use whatever it used to get to that page. It will just use that to getting back. In our case it was 'None', so it just jumped. I'm just going to add a little stuff in here. I'll get Jason to speed this up because you don't need to see me making this little box, and we'll get on to the next advanced prototyping. 

We're back, and I'm just going to move my button there to preview it and then go to here, close it back up so people will be able to log in with this option. This is a drop down menu from this little icon. Obviously it could be a drop down menu just as easily from say something like this. This is the button, and it has more than one category. You could easily make a button here, or a drop down navigation. So no border. Give it a Fill, give it some text. And this could just as easily be 'Course Option One'. And I'll get it a little wide. Awesome! And just use your Repeat Grid to go through and have like a drop down menu now. Repeat Grid, drag it down. I want, say these many options, you can count five. I want it to overlap, and when that's clicked, you just jump to this page here. It's going to kind of do the exact same thing. When this button is clicked, go to 'Prototype' and this is going to go to this page here. It doesn't really matter if it's a drop down that looks like this or a drop down like a proper drop down menu for navigation. Let's preview it, this one, awesome, or click on this button, you can see, drop down menu and then you could have—

When that's clicked, go to another option. So I'm going to bin that, thank you very much. What I'd like to do now is look at the next option, will be potentially fill, like a shopping cart up with different things. So let's go back to our Home Page, and make a little button. This site that I'm making is not really-- it's just a subscription site, it's not really a shopping cart site. So I'm just going to add some stuff in here just to give you an example. So what I'll do is, I've got an image to bring in, and it's called 'Bike'. Shrink it down holding 'Shift' in the corner. Let's say that the user has decided that, yes, they want to buy this bike. There's a button here that says 'Add to cart'. Here you go. So 'Add to cart'. Nice! You, drag it out, holding 'Alt'. Dragging one side drags both of them at the same time. So when they click on this, I would like there to be a shopping cart icon that kind of like fills. 

So what we need to do is, first of all we need a shopping cart icon. I've got one already, I've downloaded it from the Market. I just typed in-- remember, Assets Market, I just found one. Downloaded it to my CC Library. Then within Illustrator, I opened that up. Copied it, back to XD, paste it. I want it to match my little icon so I'm going to double click you. I want you to be-- you, you, you. Hold to get that green color. Shrink it down, and I'm going to add him to my Symbols menu. So I'm going to cut him. Double click it to go inside this symbol, paste it, move it up into an appropriate spot. And, nicely added out. Now hopefully it should be added to all of the menus, because it was a symbol. If you haven't done symbols, go check that earlier video out. 

So, we've got that now, and what I'd like to do is duplicate this page. We've done our drop down menu page. I want a little bit more space. I'm going to select you guys. You're away over here while we're doing our menus. I'll grab this Home Page. You can see the text, here you are. Hold down 'Alt', drag him across. Here you go. Cool. So this one is Home Page. This is actually 'Home Page - Login'. Well, spelling and typing not going well. This is going to be 'Home Page - Cart'. Well you don't really need for this one, but I want to show you how it works. So we're going to into here, and when that button is clicked we're going to have a little drop down. So we're going to steal bits from this last thing. So I want you. I want all sorts of bits. Copy. Over here, paste, and what I'll do is I'll have the menus appearing. So there is my little cart, hold that to drop down. I want to use the bike. Not this one. You, copy. I want to slide it around. Paste, there's a little version of it in here, so you're not seeing your cart. Double click it. Because they're not joined, you can double click them and do some editing which is really cool. And this one is going to be—

I've just got one of these inserted into my cart. So Top tool, click once. And I'm going to make sure the Fill is black, so we can see it. Font size is going to be 18, so it's easy to see. And not Bold, for no good reason. So there's going to be two, one of these is being added. I don't actually need this, I just want a little bit of text that says 'View Cart', so we'd be able to click on that. I'll use this option. Cool. All right, off. You, you, so both are graphic, right? What I'd like to do now is-- actually one last little thing. Like a little thing here, it says you've got one. So Fill wise, we'll do our to this. No border. And we'll put one thing in our just one. Size wise, it's probably going to be, should totally spread this up. So, it's just linking it up now. So it's very similar to this drop down except, we're just using different buttons. Sometimes this is nice to see. I find sometimes, and I'm like, "How did that happen?" And just need to kind of see it from somebody else. 

So here's my helpful thing, where you click on 'Add to cart'. I'm going to click on both of these, go to Prototype and I want to say, when this thing is clicked-- if you've got more than one selected, it won't work, you've got to group them. So 'Command G', or 'Control G' on a PC. And I'm going to say, when that's clicked I don't want any transition. I just want to jump to my cart. So let's go and preview it, let's hope it works. There's going to be a little problem with my demo here. It's that when I click on this, it works, but it appears at the top of the page. I guess it's a clunky way potentially so what I'm going to do is-- you can move things in Prototype mode, it doesn't matter. Let's just say that it's up here and it's one of the purchase options here, so we can see it. Then twist it, and then we can go 'Add to cart', and it's a bit nicer. 

What we'll also probably have do is, back here I want you, you, and you to be on both Artboards. Copy him. And over here, paste. That will probably make a better demo, so 'Add to cart'. Awesome! It just kind of appears there. Or you could use maybe a fade this time. I feel like fade would be appropriate now. 'Prototype'. And a 'Dissolve'. I'll just use these out. Preview. Add to cart, a bit nicer. That's happening way too fast. I promise I'm going to move out to the next one now. So, 'Duration', it's got to be a whole second. Craziness. 'Play'. Boom. Nicer. 

Let's look at doing some mockups for apps. Let's go back into here, and, like I don't want this stuff. So what I'll do is I'll do a 'Save As' and-- there's completed files for every video, right? You can download them, they're part of your exercise files. And what we can do is, I'll put a special one in here that has Cart in it. Just so that you've got a version that has it, because now, I'm going to go through and delete it. So wait till I delete it. I've removed my shopping cart. What I would like to do now is I want to work with the apps, and do some cool sliding across because-- the first one I want to do is I originally decided that when I clicked on this it was just going to slide over to this page. Now that's fine, but really not typical of lots of new app styles. So what I'm going to do is, I'm going to make a different version. So I'll duplicate him. He is going to be old version in case I want to go back. This is going to be the actual settings that I want. So what I'd like to do is bin all of this, and you. What I want to do is build a little side cart. And what I will do is, it's nothing fancy, so I'll get Jason to speed this up so that we'll meet at the other end. All right, ready, set, build. 

Okay, we're back. If you watched that in fast forward, you'll notice it was a bit painful. Made some design changes. I'm still not happy with that. So what we're going to do is-- so we've built this navigation that's going to slide out from the side, from left to right. What we want to do to make this believable is we'll grab this Instructor HQ bit, copy it. We'll bring it over here, and what we want to do is slide it so it's kind of off the edge here. It's still in this app settings. If you end up going too far, it ends up kind of being-- watch this. If I go out here, it's not part of this Artboard. So if I click off, you'll see it gets hidden and that's kind of what we want. A real magic happens here now, is that when I have this button clicked—

So let's go to 'Prototype'. I want you, I want that button that's clicked. I would like it to push. This is where I want it to go to, I'll just drag it. I want to go to here but I want it to push to the right, and that should work. And when that button's clicked I would like it to go back to the previous Artboard. I could use previous Artboard, but it would still use Push Right. And what I want to do is get it to Push Left. If you've used previous Artboard, remember, it just wants to do the exact same thing over. Let's give it a little preview. The other thing is, when we're previewing, it's going to go back to the Home Page. It's going to take a while to get to this particular page. So what we're going to do is, when we're in Prototype, you can click on the 'Name', click on the 'Home' icon, so when you preview, it will load this particular page. 

One thing I need to do when I'm prototyping this page, because it's so long is that, in 'Design', with it selected I need to make sure it's got vertical scrolling but the size is just a regular app size. At the moment it's showing me the whole-- like where it says 'Viewport', that means how big is this screen initially. At the moment it should be 667. So I can go in here and say, you need to be 667. And you see the dotted line, so that's going to be your initial view. It's still scrollable, your page should still be that height. But now if I go to 'Preview' it's going to preview the right size even. So it's the right Viewport, I can scroll up and down, and when I click on this, this is the magic, I click on that to go back. So it's got a nice feeling of this push/pull. Also, what we might do is, we might not need this arrow. I'll need to have a little look at other apps. This option maybe just closes it up as well because I feel like I want to click on him. Not totally happy with the design but the mechanics of this thing works nicely and looks good for testing on apps. 

Let's jump into the last of the awesome options for Prototyping. Let's close this down. So this option is kind of like using Search, either for Desktop or for Mobile. We're going to use Mobile. What we'll do is, we'll open one of the UI kits that I've given you. So in 'Exercise Files', go to 'UI Templates', open up. Use 'Google Material', you could use the Apple iOS because we're using the app version of this. I've got the sticker sheet, and in here there is some Search option somewhere. There's one there. So I want this thing. I'm going to ungroup that and hopefully get all these pieces as well. Copy. And I'm going to bring him into here and I'm going to move this space, put it in. Readjust it just a little bit, so there's room. Fits in with my design. 

What I might also do is, I might have to add a little bit of a border around the outside. That will do. So we've got some sort of Search box now. What we're going to do is, when it's clicked, we're going to get it look like it's working so it's a bit of a fake. So I'm going to select both of these. And I'm going to drag them over, I'm going to grab this one. Duplicate him by holding 'Alt' and dragging. This one here, 'Dashboard', this one is our 'Search'. So when they click on this, what I'd like to happen first up is I'd like the background to gray out. So I'm going to click on this, drag it out, cover everything. I'm going to give it a Fill of black. I'm going to give it No Border, and I'm going to use this Blur background. And by default, what is it doing? It's probably blurring too much, so a bit too blurry and maybe the Opacity is up just a little bit. I think it will remember the last thing I was playing around with. So I'm going to lower it down till we get it to, like it's still legible. Just mixed out in the background. You can play with the rest of the Opacity to get the darkness up depending on how washed out you want it to be. And this is the blurriness. It will blur everything underneath it. 

So what we need to do is we need to move backwards so that it's-- so our Search bar can be seen. So what I'm going to do is, with my Black Arrow, click off Black Arrow, is click on this gray box, and use 'Command [' to move backwards. If you're on a PC, it's 'Control ['. The square bracket's next to your P key. I'm just going to keep going down until that all comes forward. I'm going to zoom in at 100%. And that looks about right. What I also want to do is give that fake kind of look where it's being highlighted. So in here I'm going to select the text. Here you go. Crank up the Opacity so it's fully black. And I want to make like a little blue box, kind of like selected box thing. Move that backwards, give it a bluish color. The other one I mean, like—

We got the right color, right? This doesn't work. It's like a really ugly blue. Kind of washed out baby blue. All right. I'm going to try and grab it again. Get rid of the border. The kind of thing where it feels like it's selected. Do we feel like they're selected? You might have to go off and actually do a screen shot of actually selecting something the right color. So yes, I want that to happen. So, what I need to do is link these two, so when somebody clicks that button there. Under Prototype it goes to this screen here. What would I like it to do? I'd like it to not push left. I want it to dissolve. And that will be perfect, hopefully. And then if you click anywhere else in this document, it goes back to here. So not a full Search box, but giving you the illusion of an interactive Search box. Let's hit 'Play'. Click on this 'Search' box, and it looks like we've got highlighted text. Do you like it? It's another trick. 

Now XD is a pretty new product so these kinds of tricks are just stuff that I've seen other people do or I figured out myself. So if you've got some, I'd love to find out. Either take a screen shot, send me the XD file. I'd like to see ways of you fake things that I haven't show here because I'm about to build up a repository of ways of faking in XD. Hopefully in newer versions of XD three will be kind of more, less hacks, and more actual kind of defined things rather than trying to fake it to make it work. 

All right my lovely friends, that is going to be it for this video. What I'm going to do now, off screen, is just go through and add all the basics, kind of click the buttons, move to the next Artboard. So there's a lot of just dragging along, testing, dragging along, testing. What's useful, and what I use is, I've got a second monitor plugged into my laptop. So I can have the Prototype open all the time. You don't have to reactivate it for the changes to happen, so you can just have it on one screen. Interacting with it, making sure it works, and on the other screen having XD open, and just making the adjustments. So there's a bit of a trial and error working, clicking on things, do I need extra pages? Is this going to be enough for user test? So I'm going to leave that to off screen. 

I will see you in the next video. This was a super long one, this could have been the longest one I've ever made. A good old long one, some good stuff in there though. Hopefully, I'll see you in the next video. Bye bye now.