42 - Shortcuts & Cheat Sheet for Adobe XD


Questions & Comments

No comments

ALL ACCESS: $19.95 per Month + Cancel anytime   

Video Description

Click here to download our printable Adobe XD 2018 Cheatsheet!

Free Adobe XD 2018 Cheatsheet

 

Video Transcription

All right, time for some shortcut cheap sheet goodness. The first one is 'Control Tab'. Now that's 'Control Tab' on both Mac and a PC. The only shortcut in the world that is the same. So hold down 'Control' on your keyboard, tap 'Tab' and you'll jump between Prototype - you see that at the top here - and Design Mode. 'Control Tab', super nice. And we're back to Design mode, using my handy dandy shortcut.

 

The next cheat is going to be the 'Alt' key on a PC, or the 'Option' key on a Mac. 'Black Arrow', and it does a few things. If I have this button selected, and I start dragging, then I hold down the 'Alt' or 'Option' key it makes a duplicate. Not super exciting, but quite useful. That same key has another use, when I click on an object and I want to drag it from both sides, not just one great for buttons, if I hold down 'Alt' or 'Option', drag one of these sides, it does it on both sides. Nice! Still not that super-duper.

 

The super-duper one is, if I have this selected and I hold down the 'Alt' key, you'll notice, it gives the measurements. Just really handy for measuring things. Watch this. The distance between the two, it all pops up, 91 pixels away from each other. Click on this guy, the height and width in relation to the thing I have selected, I click on this, then it gives me the relationship from the top to the bottom. All just holding down the key, don't have to do anything else.

 

Okay, enough of the Alt key. Quick bit of zooming around. If you hold down 'Command' on a Mac, or 'Control' on a PC and tap the '1' key, on the top, goes into 100%. You should be doing lots of your designs at 100%. '2' goes into 200%, I never use that one. One thing I do use is 'Command 0'. It goes into the full, everything on your paste board view. And the last one, probably the best one is if I click on this 'Rectangle' here, if I go 'Command 3', it zooms into that specific thing, and fills the screen. It's a great way of moving around. 'Command 0', click on something. Go 'Command 3'. I zoomed in a little bit too much there. All right, that's some easy zooming.

 

Next super shortcut, is if I make a new document and you are a good person that loves your developer, you’re going to work with 12 columns, and a new way of doing it is just click on the page name. So you got your Artboard selected, and this new thing, where it said-- it just used to have squares, now it's got a Layout, turn it on 12 columns, you can adjust how many, the spacing, the spacing from the edges is something that I do quite a bit just so I narrow my navigation into the center there. You can set what you love as a default. And every time you make a new 12 column grid, that there, and it's really easy to turn on and off. We're into more drawing rectangles with spaces.

 

Next shortcut is 'Command' on a Mac, or 'Control' on a PC, and the 'Y' key. Just turns off that panel on the left hand side there. It actually just opens up your layers, but I use it to turn off layers so that, especially if I'm at full scale view, so I hit 'Command 1'-- it's really hard on my MacBook Pro here to actually see the whole width. That actually opened up. 'Command Y' again, with that open you can see, I'm just missing lots of details. I want to stay at 100%, but it's hard.

 

The other one is 'Command-Shift-Y'. And what it will do is it will jump to Assets, 'Command Y' 'Layers', 'Command-Shift-Y', 'Assets', and either of them twice, and it will turn them off. Really handy if you're working with a smaller screen like mine.

 

All right, next short cut. Let's jump back to this other project here. It's got lots of-- if I jump to 'Prototype' shortcut is, that's right, 'Control Tab', the one shortcut that's same on all of them. You can see, I've actually got interactions in here, loads of them. Now to preview, that's fine, hit the 'Play' button, but there's a shortcut. You just hit 'Command' on a Mac, or 'Control' on a PC, and hit 'Return' key on your keyboard, the little 'Enter' key. And that will load up your preview. Great. Do some stuff, close it down, do some changes, 'Command Return'. They stole that one from Flash or Animate. It's a really handy one, and easy one to remember if you remember good old Flash.

 

Next shortcut, back to Design view. It can be really painful if you want to drag these Artboards. You kind of click on the edge, grab the Artboard tool, you try and be official, it's a little bit weird. Just use the names along the top here. If you zoom out far enough they turn into little dots. It doesn't matter if you grab the dots or the name but these are the easy way to drag these, so I can hold down 'Alt' and drag it, I get a new one. It's just the easiest way to select an Artboard. Thank you very much. This shortcut is just helpful when you're exporting. So I've got all these images here, you can see them. Because I duplicated them, and made them with the Repeat Grid they've just got the same name all the way along. So I want to export these, and that will have the name of course1, course1, course1… big pain. So if we name them here in my Layers panel, it means, when I export them they're going to export with the right names. That can be painful. So I'm going to type in this, and this one's for Illustrator. Then you got to click on this one, double click on it, then do this one, and do InDesign.

 

What you can do is, instead of using the mouse to go and double click on them you can just hit the 'Tab' key, it just goes down, we can type in After Effects 'Tab', it's just a nicer work flow and quicker to go through. It means that when I start exporting these, select them all, export, they'll all have the correct names when they come out. Great! That trick also works in Photoshop when you're trying to be all tidy with your layers. Just 'Tab' through them. Small, but useful little work flow cheat there.

 

So the next one is Paste Appearance. It has got two kind of uses. Say I've joined this box here, but I want to actually match this now. I decided I'll style it like this, the color, the liner around the outside or the lack of it, and a Drop Shadow. What you can do, with it selected, is just copy it, so 'Command C' or 'Control C', just the regular old copy. And on a Mac, instead of just 'Command V', you go 'Command-Option-V'. On a PC, it's 'Control-Alt-V'. And all it is, you can see it there, it is 'Paste Appearance'. It's really handy for working with buttons. You decide down here, you've got something, you can draw out a button you want to 'Control C' or 'Command C' to copy, and then 'Paste Appearance'. Really handy for getting everything nice and consistent.

 

The other nice option it has is that when you're in Design view, it does Appearance but when I go to Prototype, that same thing does 'Paste Interaction'. So what it means, I can click on say this Marketing one here. I've got this interaction where it slides over to this other Artboard here, but I can just go 'Copy', like I did before but over here I don't have that done yet, and I can just use that same shortcut 'Command-Option-V' or 'Control-Alt-V'. And I paste the interaction rather than the style. Just a really handy little shortcut. I found that I tongue twisted to go, and picked the actual shortcuts but there they are there, both on a Mac and a PC, under Edit. On a PC, it's a little stripy burger menu there. So that's copying and pasting with a twist.

 

The next shortcut is just locking and hiding. Let's say I want the navigation at the top to lock it. It's 'Command L', or 'Control L' on a PC. You get this locking icon, you can click it to unlock it or just 'Command L' will toggle it on and off. Hiding it is 'Command ;' which on most keyboards is right next to the L key, not on all of them. This becomes even more useful when you have gone into Design view, and I've got all of these guys, let's say I want to lock them or hide them. You can see they're over here, you can't swipe down at the moment. I want to swipe down, and lock them, or unlock them. So when you've got them all selected in one big group you can hit 'Command L' to lock it or 'Command ;' to unlock it. And when I say 'Command', that is for a Mac, and it's 'Control' for a PC. So 'Control L', 'Control ;'. I really want to swipe on these. I can't.

 

This next one is 'Convert to Path'. So this here is editable text, I can change it but let's say I want to destroy it, or change it or turn it into a logo type. If I hold down 'Command' on a Mac, or 'Control' on a PC and type the '8' key, next to 7 and 9, and that will destroy it, it's no longer a font but I can double click it to get inside of there now and you can see I've got all the lovely anchor points and I can totally, totally wreck this font for someone. Fonts don't seem to run into any problems in XD but I sometimes just like to have the option, and convert them into paths. Just because. So that's converting to paths.

 

The next shortcut is the Direct Selection Tool. If you're from other Adobe products we've got the Selection tool, we don't have the White Arrow, where is he? Just hold down the 'Command' key on a Mac, or 'Control' key on a PC. Why is it useful? It means that, say this thing here is one big group. I could either ungroup it or there's a kind of weird double clicking action to get into stuff, but let's say there's groups within groups like, I want to change the font size here and I know, because I made it, it's a group, double click it, still inside of that group. I want just to get straight in there whether having to dive inside isolation mode. All you do is hold down 'Command' and click on it and it dives right in there. I can go in here and decide, it's no longer bold, it's going to be light, come back out, it's still a lovely group. It could be really useful for these guys as well. I'm going to zoom in to this fellow. I made him with the Boolean tools along the top here. It's kind of made up of editable shapes, which is cool, but do I need to make a little bit more wider for some reason? When I click the circle, instead of having to double click and try to find it all in there hold the 'Command' key on Mac, 'Control' key on a PC, and I'm going to make him a little bit wider, holding the 'Alt' key down. Click out, I've gone straight in there, fixed him up, and totally wrecked him. That also works for symbols as well. If you've created a symbol like my menu along the top here, it's part of the bigger group, just 'Command', click, and it goes straight inside. I'm not sure how useful that one is, but the next one you'll love.

 

This is the last and final shortcut. Holding you to ransom, this particular video, I'll share all over the place, social, YouTube, across all of the markets, Bring Your Own Laptop I'd like you to leave a review, share, like, subscribe. Whatever is possible in that platform, I'd love it, it helps me continue making videos full time, I love it, and this is the last one.

 

Selecting these guys here, now this is kind of a weird combination. If you're on a Mac, it's 'Command Control'. That key, you never use on a Mac, hold those two down. It's easier if you're on a PC, just hold the 'Shift' key down, all by itself. Then tap these keys. We are looking for the arrow keys. On your keyboard, the up, down, left, right. So, clicking the right arrow, right align. Awesome, huh! Left arrow, left align. Select all these, same keys, up arrow, down arrow, lining. So those are easy except for the weird Command, Control keys that we don't hold down. It's a little easy on a PC, holding 'Shift', it gets better. If I hold those two keys down again, and if we hit 'M' for the middle-- Why is it M for the middle? Because this one here for realigning them vertically is 'C'. 'C' does it vertically, and 'M' does them horizontally. I can never remember, I always do this. I go, 'M', undo, 'C', you'll do the same thing.

 

Last but not least, it's distributing senses. You can see the gaps aren't quite right in here. It's hard to do in XD because it does really want to separate them out evenly. Happens all the time though, those same two keys. 'Command Control' on a Mac, hold 'Shift' on a PC. These are easy to remember, because it's 'H' for horizontal, and 'V' for vertical. Love those.

 

One thing before I forget is that I've actually made a PDF version of this that you can print off, jump over to bringyourownlaptop.com, go to the 'Home' page, then click on 'Resources', and in here, a bunch of shortcut sheets that I've made for all sorts of different products from Adobe. It's not here yet because I'm just about to go and make it after this video. It will be right there, you can download it, it's free for everybody. Download it, print it off, stick it next to your computer, be more awesome.

 

That's going to be it for the shortcuts. We're going to move on to the next video in the series. If you happen to be watching this out of context this is like video 40 of a longer XD course. Go check it out, it's awesome. There'll be a link in the description or on that downloadable PDF. You can check it out, sign up, and do the course. If you are doing the course, we're nearing the end. Yeah! All right, let's go and finish off the last few videos now.

ALL ACCESS: $19.95 per Month + Cancel anytime