Access official UI kits created and maintained by Apple, Google, and Microsoft. Also, access numerous free UI kits recommended by Adobe for you to start your XD projects for mobile, web, or any screen size, including wireframe components and high-fidelity ones.
- [Instructor] In order to speed up your design process, we allow you to access some amazing UI kits, free UI kits by going on File, Get UI Kits, then you can access UI kits created from Apple, Google, Microsoft, and also wireframes, and allow more UI kits here. These are all links to websites so if you click here on Apple iOS, this will take you to the Apple website where you can see the UI kits that they provide and maintain and you can see the XD version is right here.
You can download and then open that in XD. If you go back and you go to the Google Material Design one you can see this takes you to the Google Material Design website where you can see the different formats that they provide. The XD one is right here and one thing to notice here is that the file size for this entire UI kit is two megabytes. So again XD is really good at optimizing the file size for you.
Then the Microsoft one is available here. Again it's just a link where you can download the one here for XD. And then we have one created by Adobe with wireframes and here you can access the Behance website so if you're doing wireframe design you can download these guys that is one for web design and one for mobile app design. And it has hundreds of templates that you can use and its just a matter of copy and pasting it into your code.
And I'll open this one in XD. I went ahead and I downloaded it so you can see that in action. So let's open the mobile one in XD. So here you can see that you have not only pattern UI elements for example if I click here I do command three to zoom in to this selection you can see that I have my pattern library here, the icons here again just copy and paste into your project and start creating your wireframes.
Here you can see I have top bars, I have cards like if I'm redesigning something like Instagram. Then you have some sliders, some connectors here, some modal displays if you're doing some user flow or user journey maps here you can copy and start using. But this guy has also some use cases so you have entire sign up screens here activity feeds.
Alright then the next thing that you have access to is more UI kits and this takes you to a new section on our adobe.com website for XD, the tab resources and here its pretty much the same thing. You have the UI kits that we just saw for iOS, Google Material Design, or Microsoft apps. The wire one that we just saw and then we have also access to amazing ones for watch design, some transportation apps, dashboard design so for example here in our community folder you can see that if you're doing dashboard design you can see this guy in action.
And he has a lot of very good not only the pattern library there for you, but also a lot of use cases. And then you have the inbox scenario there. You also have some customer feed so this is very good for dashboard design, a calendar view and then of course in any dashboard you have a lot of charts so all the components are here and you can just copy and paste and start working.
Another one that I really like is the Navigo UI kit and you can open that in XD and this is an app that tries to simulate a transportation app. So it starts with a guide separated by components, little cars, and then you can have the main app, all the screens here all separated in different elements and then you can just copy and paste and start creating your own projects. Really well design, really good as inspiration and also as a resource for you to start creating your projects.
Alright so that's how you access the UI kits. You can get it from XD directly here, Get UI Kits under File or you can go to XD.adobe.com, click on resources and here you can download the same XD files and start working right away.
- Understanding all tools in Design mode
- Bringing files for Photoshop, Illustrator, and Sketch
- Working with text, vectors, image fills, and masks
- Repeating elements with the powerful Repeat Grid tool
- Resizing multiple elements with responsive resize
- Using the new Assets panel to manage symbols, colors, and character styles
- Sharing symbols across files, with text and image overrides
- Creating and consuming bitmaps and vectors from CC Libraries
- Extending the power of XD using great plugins