How to Use UI Kits in Adobe XD

Pranob Mehrotra

For those interested in web designing, UI kits in Adobe XD are a great way to jumpstart a new design project. With these kits, you get access to some handy resources that you can modify and use for your website or app design.

How To Use Ui Kits In Adobe Xd Featured

If you’re new to the software and aren’t sure how to use UI kits in Adobe XD, then you’ve come to the right place. In this article, I’ll show you how you can install UI kits in the software and then use the included resources for your project.

How to Download UI Kits in Adobe XD

First, let’s take a look at how you can download UI kits in Adobe XD, right from within the software. Just follow these steps to get started:

Step 1: Click on the hamburger menu button in the top left corner of the software.

Use Ui Kits Adobe Xd 1

Step 2: In the menu, scroll down to the Get UI Kits option and then click on either three of the available options.

Use Ui Kits Adobe Xd 2

For this article, I’ll be choosing the Google Material UI kit. However, depending on your project you can select either the Apple iOS or the Microsoft Windows kits. That will open up an official web page from which you can download the UI kits for free.

Step 3: Locate the Adobe XD UI kit in the following web page, and download it on your system.

Use Ui Kits Adobe Xd 3

Step 4: Now open up the downloaded file in Adobe XD and you'll be greeted with a bunch of artboards containing UI resources for the respective platform.

Use Ui Kits Adobe Xd 4

You can hold the Ctrl button and move the scroll wheel to zoom in/out to see all the individual artboards.

Use Ui Kits Adobe Xd 5

If you wish to download Wireframes instead, you can click on the Wireframes option in the Get UI Kits menu.

Use Ui Kits Adobe Xd 8

You can also look for additional UI kits on Adobe’s website by clicking on the More UI Kits option in the Get UI Kits menu.

Use Ui Kits Adobe Xd 9

The website has some great options to choose from, including this really cool Movie Magic UI kit that looks like a heads-up display.

Use Ui Kits Adobe Xd 11

Now that you know how to download UI kits, let’s take a look at how you can use them in your projects.

How to Use UI Kits in Adobe XD

To use UI kits in your project, just follow these simple steps:

Step 1: Zoom in on the UI element you want to use in your project and click on its title to select it.

Use Ui Kits Adobe Xd 12

Step 2: Now copy the element using the Ctrl+C shortcut.

Use Ui Kits Adobe Xd 13

Step 3: Then open up a new Adobe XD project from the menu.

Use Ui Kits Adobe Xd 14

Step 4: Here, paste the UI element using the Ctrl+V shortcut.

Use Ui Kits Adobe Xd 15

For this article, I’ll be using the Mobile Dark element from the Google Material UI kit. The element includes guides to help you place more layers, but if you don’t want to use them you can easily remove them by following the next step.

Step 5: To remove guides, click on the lock icon in the top left corner and then hit delete. You can skip this step if you wish to use the guides to place more objects into the element accurately.

Use Ui Kits Adobe Xd 16

Step 6: Now head back to the UI kit to select another element to add to this page. Once again, click on the title of the element and copy it using the Ctrl+C shortcut.

Use Ui Kits Adobe Xd 17

I’ll be creating a basic toast for this article for which I’ll use one of the dialogs.

Step 7: Paste the new element on the previous element and then align it as per the guides.

Use Ui Kits Adobe Xd 18

Step 8: Now to edit each element in the toast, double click on the text box and then enter the text you want to use. First, let’s change the title of the toast.

Use Ui Kits Adobe Xd 19

Next, change the content of the body by double-clicking on the text box and typing in whatever you wish to add.

Use Ui Kits Adobe Xd 20

You can also change the text of the buttons in the same manner. Once you’re done with editing the text, you can change the color and opacity of the text. To change the opacity, just move the slider under the Opacity option in the toolbar to the right.

Use Ui Kits Adobe Xd 21

To change the color of the text, click on the rectangle next to the Fill option and then select a new color from the color picker.

Use Ui Kits Adobe Xd 23

And it’s not just the text that you can edit in this manner. You can also change the color and opacity of almost all items in the dialog box, which is great if you’re going for a unique color scheme.

Use Ui Kits Adobe Xd 24

Once you’re satisfied with the outcome, just go ahead and save your file by clicking on the Save As option in the menu or by using the Shift+Ctrl+S shortcut.

Perfect Your Design Using UI Kits

Now that you know how to download and use UI kits in Adobe XD, I'm sure you'll start churning out amazing designs in no time. These UI kits are definitely quite handy and help you get straight to your project without worrying about designing each UI elements.

Next up: Completed a project on Adobe XD and don't know how to export it to HTML? Check out the next article for a simple step-by-step tutorial.

Read Next
How to Export Adobe XD to HTML
Also See
#adobe #website

Join the newsletter

Pranob is a staff writer at Guiding Tech whose love for technology and gaming is the only thing keeping him from pulling an Into the Wild. In his free time he enjoys playing online multiplayer games or lurking on Reddit for some dank memes.