By the end of this video, the student will know where to find a wide array of UI kits.
- [Instructor] Okay, now that you're maybe sold on UI kits, or you've actually thought about them before, or used them before, where do we find them? Well, if you're industrious, you're going to go out to the internet, and you're going to start searching and you're going to find a billion. There are a lot out there, and a lot of them actually have XD file formats that you could just download and start working with. But Adobe actually has access to a series of UI kits right from within Adobe XD and if you just start up Adobe XD, and you see that Welcome Screen, or the Start Screen, with the File New, you can also do that as well, you'll most likely see access to a few of them, but once you open up a file, if you come up to the File menu in XD, you're going to see Get UI Kits right here.
Now, we got a lot, and there're only a few in here, or accessibility to a few here, we have, if you're working on, for instance, you know, an app design, let's say, you have Apple iOS, for iOS Kit Content, Google Material, Microsoft Windows, if you want to do Android, if you want to do Windows, you can access those. And those will actually take you out to a website that you can then download typically an XD file, you can then open within Adobe XD, and start copying, or dragging, or working with content.
Now we also have Wireframes. This is a great one. I would take a look at this because this actually has Wireframe content, or Wireframe Kit content for apps, and websites. And it's a great starting point, or jumping off point. If you're looking for design ideas, maybe to start laying content out, starting to figure out the user interface, or the user experience, you can use this Wireframes UI Kit to be able to copy, paste content. You're also going to find more UI Kits here. Now I want to just preface this by saying that Adobe has actually changed this menu up a couple different times, or its location, and things like that.
So, don't be surprised if you're looking at this, and things might look a little different, or maybe these UI Kits are local, or maybe they're on a different website than you see where I go to. But, what Adobe is trying to do is it's trying to actually take all of the content, all the kit content, template aid content, and things like that, and pull it into a single location, a single website. And that's where you'll go when you click on more UI Kits. So go ahead and choose that. Should take you out to your browser. And I've got a bunch of kits open, I just want to show you a few of these. And it should take you to a Products page for Adobe XD.
If it does not take you here, you can always go into your URL up here, and try and put this out there. So type this into your browser, and see what you get. You can always back it up, and just go to Products XD, or the XD Product homepage, and see what you can find from there. You'll see right here that we have a list of resources. And we have all these kits, these are the same kits we just saw inside of XD, we have iOS, Material Design, and Microsoft. And this is where you can come if you want to, if you were to click Get the Kit, it would actually take you out to that website, for instance, to the Apple Developer website, and this is where you could go.
If I scroll down here and take a look, this is where I could find the iOS Kit, and there's the XD file you can just download. Now we're going to talk later about fonts, but some of these kits are going to require that you download certain fonts, and the Apple iOS one is no different. All right, I'm going to go back over to that website. So we can see the kits here, and if I scroll down you're going to see that we actually have kits that are complete designs. So you're going to find Adobe has put a bunch of them out here, including Amazon Alexa which has a UI Kit created for Amazon Alexa, it's front-end framework.
And you can see it's actually voice-prototyping which is really cool. So if you're looking for a starting point you can jump into one of these kits. There's that wireframe kit that is also in the menu in XD that we talked about for a minute. And Smartwatch, Navigo, a lot of different things in here. And you'll find that, you know, as you go through you'll see a lot of different things that you can't get to now. The one thing that I didn't see as we came in here was this menu and here it is right here. You're actually going to see that on this resources page somewhere, you'll probably find you also have access to now plugins in Adobe XD, app integrations as well, which are pretty amazing, and this is one of my favorites, these are Icon Kits from designers that were created specifically for XD that you can use.
These are the original files, original content that you can copy, paste and bring into your design. So, there are a lot that Adobe is offering straight out of the gate. But like I said, if you go out and search, you're going to find there are tons of kits out there. I mean, this is a Bootstrap Four UI Kit, and this is a website called xdresources. Great place to go find different content. If you just do a simple search, like here's an old Bootstrap Three Kit, or an older one.
Here's an XD UI Kit from ui8.net. There's just a thousand of them out there you're going to find. All I did was I did a quick search and I said, just show me UI Kits. And another thing you can do is you can actually go up to Behance, so behance.net, and there are a fair amount of kits up there for XD, and others that you can use. Even if you get a kit that is not XD, that maybe it's Photoshop or Illustrator, you can bring that content right into Adobe XD, so that's pretty cool, and easy to do.
Copy, paste, drag, drop, place, coming from a Library's panel, et cetera. This is another UI Kit that's found on Behance called the Responsive Resize Kit. This is a newer one, and it's awesome. There's a lot of great kits out here, so check out Behance, check out just a search, do a search for UI Kits XD, and you're going to find a whole bunch of them out there. And they serve different purposes, like I said, you can start a whole design if you want to from an entire kit. You can grab icons and small elements like UI Elements from a kit. You can grab sections from a kit, like a slideshow section, or maybe a contact information section, or something like that.
So a lot of great things that we can do with UI Kits and a lot of places that you're going to find them. Next up, we're going to jump in and we're going to start to use some of the UI Kits I'm going to have you download.