How to find and use existing UI kits in Adobe XD

Hi there, in this tutorial we're going to get our page started here. We're going to go to page, get it to have a navigation. We're going to pull it from some of the templates that are built in from XD, and make it look like this. All right, let's get into it, and get started in XD. 

So we've finally got XD open. Now, first thing we're going to do is download one of the Templates that XD has helpfully made for us. We're just going to pull parts from that as we work because they've just made some pre-made Wireframes that we can steal parts from to help speed up our process. You can do it by downloading here, where it says 'UI Kits', there's an option that says 'Wireframes', or you can go up to 'File', 'UI Kits', and click on them here. This will just open up 'Behance', let's have a look at that. And in here, you can click on 'Download Kits'. Now I've already downloaded them for you, and put them in the exercise files. So if you download the exercise files, they'll be there, ready to go. 

Let's jump back into 'XD'. In here in XD, let's open up 'Wireframe', go to 'File', 'Open'. And the exercise files that we've downloaded, there's one there called 'UI Templates'. So I've downloaded this Wireframes here, and we're going to start with 'Web'. Now why are we starting with Web, and not Mobile? This is totally up to your project. Our brief is quite specific. Their main targets are going to be using Web, the Web Interface, but if you knew that your project was based primarily for either Mobile Web use, or maybe an App, you would start with Mobile, but we're going to start with Web, and just open it up. 

First things first, is navigating and zooming around. The easiest way is holding down 'Command' on a Mac, or 'Control' on a PC and tapping the '+' key to zoom in, and the '-' key to zoom out, nice and easy. A couple of other navigation techniques is holding down 'space' bar, gives me my 'hand', I get to kind of move around. If I zoom in a little bit, hold down the 'space' bar, click, hold, and drag with my mouse, and that allows me to move around the documents. 

Now two other little useful navigation shortcuts before we get started is holding down 'Command' on a Mac, or 'Control' on a PC and tapping the '1' key. That will zoom in to 100%. And this is where we should be doing most of our work. Two files zoomed out, and two files zoomed in and making kind of decisions on font choice and size. It's not that useful, because I use it only if I'm going to see it at 100%. So it's great to be at this size. So 'Command 1', or 'Control 1' if you're on a PC. 

Last one, I promise, is my favorite. It's, if I select this element here and go 'Command 3', or 'Control 3' on a PC, it zooms in, just kind of highlights that one area. I find that super useful. You can do it to the whole Artboard as well. Say you want to see this Artboard, you can click on the name along the top, 'Command 3', and it will center it in your view. So that's the basic navigation. 

What we're going to do is create our own document now. So we're going to go to 'File', 'New', there are some defaults along here. You hit this little drop down to find other options. It really depends on what you want to do. I like starting websites with this, this 920 across x 1080 high. You can type in a custom size over here, or if you're obviously working with iPhones or iPads, you can use those by default. I'm going to use this guy, click on it. We're going to save this one, go to 'File', 'Save', and we're going to put all of our files for this class on to our Desktop. I'm going to make a new folder. This one's going to be called 'InstructorHQ', and we're going to call this file, 'InstructorHQ prototype V1'. 

So the first thing we need to do, is let's name our Artboard. You just double click the words over here, we're going to call this one 'Home Page'. Now if you're a person like me who never names your layers in Photoshop or Illustrator you've got layer, like 57, it's got no name. Naming your Artboards here in XD becomes super useful when we start prototyping this later on. So, get in the habit. The other thing I'm going to do is, zoom out, and make my Artboard quite long. Now, because I had nothing on my page, and nothing selected, I just default to the Artboard. There is an Artboard tool that you can use, if you want to be official, but because I have nothing else on my page I can just easily update the Artboard. You'll notice, here is the dotted line. This is just a nice little visual guide here to show you what the initial view port is, or say, above the fold. This just means, everything above here is stuff that people are going to see first on your web page. Everything under here is going to be stuff they have to scroll for. 

So here is where the magic needs to happen. You need to do your selling, your main convincing, your Call to Action, all above this dotted line here. You can adjust this initial view point if you think that is too tall, or too small. So first of all we're going to go steal some parts of that Template. So we're going to jump to it. You can go to 'Window', and toggle between them here. So that's jumping between this one, and this one. It's up to you, I use 'Command ~' on a Mac. Tilde is the weird wave '~' key above your Tab key. On a PC, I think it's 'Control Tab', just toggles between them. So I do a lot of jumping between, that way. 

So what I want now is, I want one of these navigation elements. So I'm just going to pick the one that closest resembles my hand drawn mock-up. It's probably this one here, so I'm going to click it once, go to copy, so 'Edit', 'Copy'. I'm going to jump across to my design, and go to 'Paste'. What I want to do is, I'm going to use my 'Black arrow'. The nice thing about-- I'm going to try get it in the center, but you watch XD, it's clever. Kind of knows the center, you can see, that picks it. It's figured it at the top. Now, when we're designing this, I pick the size-- if I click on the edge here we click on the names the easiest way. Gives me my document settings, my Artboard settings. And we've picked 1920 across. I never want to design a site that big, especially for my Wireframes. I picked this size because I like to use the same size here, 1400 across to do my website but I like to have these extra edges here just so that I'm not trying to design within a tiny box. This is here as just kind of like a buffer area so that I can see what it looks like on potentially a larger screen. 

What I'd also like to do is extend my Nav along because it's going to be across the top. So what I'm go to do is, I'm going to ungroup this. Right click, and you'll see all the shortcuts here. We'll go through more and more shortcuts as we go along but 'ungroup', that shortcut is the same as a lot of other Adobe products. So, I've got this, I'm going to copy and paste it because I want this just as a-- I'm going to zoom out. I'm using this as kind of a guide here to show me where I should be designing inside of. And what I'm going to do with it, I'm going to grab the Fill and I'm just going to lower the Opacity of this, pull it right down, just so it's just as a hint in the background there to show me where my boundaries are. 

What I'm also going to do with it, I'm going to lock it, so I can't move it. With it selected, you can either right click and lock it. There's a couple of ways to get him to lock. There it is there, I use the shortcuts 'Command L' on a Mac, or 'Control L' on as PC. And you just get this locking icon, you can unlock it easily by clicking on it. So that's giving me my width, and it just means I can't move it now. I can select it, but I can't move it. 

One of the things I want to do is, it's actually above everything here, in my layers. So when I try and click on my Navigation, it's in the way, so I'm going to click, hold, and drag him, so it's at the bottom. And you can see there, in your Layers panel, it's locked. If you can't see your layers, click on this little icon here. So I'm going to click on this, and hold down-- a little shortcut, hold down the 'Alt' key on a PC, or 'Option' key on a Mac and drag one side. You'll see, it kind of goes up both ways. Doesn’t really matter how you drag it out. But that's kind of what I want to get started. I've got kind of a guide here to know where the center of my website is, and my Navigation goes all the way along the top because that's how I plan to have it on my final result, and it just looks kind of nice in my Wireframe. 

One last thing before we go. Over here, in my Wireframe, the Template, you might have noticed, and already fixed that, you might have fonts missing. Click on the button, and you can center the fonts using Typekit. It's nice and easy, don't ignore it. If you can't fix it, don't stress. It will work just fine with this tutorial if you can't find the fonts, no big drama, but if you can fix this up then we'll move on to the next video.