For those interested in Design Websites, UI kits in Adobe XD are a great way to start a project. Design New. With these kits, you'll have access to some useful resources that you can modify and use for your website or app design.
If you are new to the program and are not sure how to use the UI kits in Adobe XD, you've come to the right place. In this article, I'll show you how to install UI kits into the program 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 to download UI kits in Adobe XD , directly from within the program. Just follow these steps to get started:
Step 1: Click the hamburger menu button in the upper left corner of the program.
Step 2: In the menu, scroll down to the “Get UI Kits” option, and then tap one of the three available options.
For this article, I'll be choosing Google's Material UI toolkit.
However, depending on your project, you can select Apple iOS or Microsoft Windows kits. This will open an official web page where you can download the UI kits for free.
Step 3: Locate Adobe XD UI kit is available on the following webpage, and download it to your system.
Step 4: Now open the downloaded file in Adobe XD, and you'll be greeted with a set of artboards containing UI resources for the respective platform.
You can hold the Ctrl key and move the scroll wheel to zoom in/out to see all individual artboards.
If you'd like to download Wireframes instead, you can click the Wireframes option in the Get UI Kits menu.
You can also search for additional UI kits on the Adobe website by clicking the More UI Kits option in the Get UI Kits menu.
The website has some great options to choose from, including a really cool Movie Magic UI set that looks like a heads-up display.
Now that you know how to download UI kits, let's look at how to 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.
Step 2: Now copy the item using Ctrl+C shortcut.
Step 3: Then open a new Adobe XD project from the menu.
Step 4: Here, paste the UI element using Ctrl+V shortcut.
For this article, I'll be using the Mobile Dark element from Google's Material UI toolkit. The element includes guides to help you layer more, but if you don't want to use it, you can easily remove it by following the next step.
Step 5: To remove guides, click the lock icon in the upper-left corner and then press Delete. You can skip this step if you want to use guides to position more objects more precisely on the element.
Step 6: Now go back to the User Interface group to select another element to add to this page. Again, click on the element's title and copy it using the Ctrl+C shortcut.
I'm going to create a basic character for this article that I'll use one of the dialog boxes with.
Step 7: Paste the new element into the previous element and align it according to the guides.
Step 8: Now, to edit each element in the toast, double-click the text box and then enter the text you want to use. First, let's change the toast title.
Next, change the text content by double-clicking on the text box and typing what you want to add.
You can also change the text of the buttons in the same way.
Once you're finished editing your text, you can change its color and transparency. To change its opacity, simply move the slider below the Opacity option in the toolbar to the right.
To change the text color, click the rectangle next to the Fill option and then select a new color from the color picker.
And it's not just text you can modify this way. You can also change the color and transparency of almost all elements in the dialog box, which is great if you're using a unique color scheme.
Once you are satisfied with the result, simply go ahead and save your file by clicking on the “Save As” option in the menu or using the Shift + Ctrl + S shortcut.
Make your design successful with UI kits.
Now that you know how to download and use UI kits in Adobe XD, I'm sure you'll start producing stunning designs in no time. These UI kits are definitely useful and help you get straight to your project without having to worry about designing every single UI element.
