Join Demian Borba for an in-depth discussion in this video Official UI and wireframe kits, part of Adobe XD CC Essential Training: Design (2018).
- [Narrator] As a designer you can always go here and design every single piece of the UI. You can do your status bar, your buttons, your icons. But actually there are tons of UI kits out there that can help you move faster and I'd like to highlight a couple of them. If you go to File, Get UI Kits, all of these things are linked to a website where you can download a very good comprehensive UI kit. So for example, if you click on the Apple IOS one this will take you to the official Apple website where they're hosting all the guidelines for designers and files for their UI kits for different apps and you can see here that XD produces the smallest file for you so just click here and you download that.
When you download that file, it's a zip that has not not only the fonts used by Apple, San Francisco Pro, but also different files with different templates and buttons and patterns and everything you can use. So just to show you that in action, let's open this iPhone 10 UI kit. Here I have all of the colors that are used in this file, the text, all the different UI elements like the top bar for the new iPhone10, the status bar, everything in one single file and for you to use the components, the pattern libraries, select the element you want, copy, and paste into your projects.
You have views, and a lot of things that can help you move forward. One thing that helps you a lot are the templates so you can start from this template in your project and just change the title, change the icons to your project and go from there. If you go to the Google Material design one, the second link there, here the file size difference is even bigger. As you can see, the Adobe XD file has only two megabytes so let's download that file.
Once you download that file and open that in XD, you'll see that all the components for the Google Material design library are here and for, some reason if you don't have the Roboto font, this is the link where you can get it. You have the colors, the icons, lots of components that you can use. Just copy and paste into your projects. Cards, buttons, scrollers, tabs.
Again, copy, paste, change the text, change the image and you can go from there. So this will save you a lot of time. Now let's look at the Microsoft ones. If you go to file, Get UI Kits, Microsoft Windows, this will take you to the Windows page where you can download the UI kit for Adobe XD. If you select that file and you open in XD, you'll see it's very comprehensive for Windows apps now.
You have all the components, sliders, for light and dark UI. All the Pickers, Type, all in one place for you to copy and paste and edit in order to create Windows applications. Very rich UI. Now let's look at the last option there for Wireframes So this is a Wireframe kit created by Adobe, hosted on Behance where you have hundreds of items as wireframes to use in your projects.
So here we have mobile templates and web templates. So let's download it and see that in action. Once you download those files, let's open them in XD, and as you can see, I have a web one. Very comprehensive, very complete, with lots of UI Elements, your colors, icons, character styles, nav bars, footers, cards.
Perfect for wireframe design Here you have some connectors. You have some little things that can represent models or pages or app screens in your projects and you have use cases so I have sections, for example, for landing pages. I have sections for content. I have sections for blogs, if you are working on a blog design portfolio.
So this will save you tons of time when you need to start designing the wireframe. So you need to validate fast, you need to learn as fast as possible, this will help you a lot. Charts, pricing. So this is the web one. We also have a mobile one that's even bigger that has UI elements and lots of UI cases for mobile: sign-up forms, activity feeds, profiles, messaging. So as you can see here you can have a whole set of components for you to create a messaging app wireframe to validate as fast as possible.
Menus, Pop overs, Maps, Location, Checkout. So as you can see, you have lots of options, lots of assets, amazing components, so now go ahead and make your magic.
- Setting up artboards
- Using square and layout grids
- Creating and editing vector shapes
- Working with masks
- Using symbols with text and image overrides
- Visually repeating elements with the new Repeat Grid
- Using the new Assets panel to manage colors and character styles
- Creating and consuming bitmaps and vectors from CC Libraries