For those interested in web design, the user interface kit in Adobe XD is a great way to start a new design project. With these toolkits, you get access to a number of useful resources that you can modify and use for your website or app design.
If you’re new to the software and aren’t sure how to use the user interface suite in Adobe XD, you’ve come to the right place. In this article, I will show you how you can install the user interface kit in the software and then use the included resources for your project.
How to download the user interface kit in Adobe XD
First, let’s see how you can download the user interface kit 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.
Step 2: In the menu, scroll down to the Get UI Kits option and then click on one of the three available options.
For this article, I will choose the Google Material UI set. However, depending on your project, you can choose the Apple iOS or Microsoft Windows toolkit. That will open an official website from which you can download the free UI kit.
Step 3: Find the Adobe XD UI kit in the following website and download it on your system.
Step 4: Now open the downloaded file in Adobe XD and you will be greeted with a series of drawings containing UI resources for the respective platform.
You can hold down the Ctrl button and move the scroll wheel to zoom in/out to see all individual drawings.
If you want to download Wireframes instead, you can click the Wireframes option in the Get UI Kits menu.
You can also search for additional UI toolkits on Adobe’s website by clicking the More UI Kits option in the Get UI Kits menu.
The site has some great options to choose from, including this really cool Movie Magic UI set that looks like a display.
Now that you know how to download UI kits, let’s see how you can use them in your projects.
How to Use the User Interface Kit in Adobe XD
To use the UI kit 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 element using the keyboard shortcut Ctrl + C.
Step 3: Then open a new Adobe XD project from the menu.
Step 4: Here, paste the UI element using the keyboard shortcut Ctrl + V.
For this article, I will be using the Mobile Dark element from the Google Material UI set. This element includes instructions 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 delete the guide, click the lock icon in the top left corner and then tap delete. You can skip this step if you want to use guides to place more objects in the element correctly.
Step 6: Now go back to the UI kit to choose another element to add to this page. Again, click on the element’s title and copy it using the keyboard shortcut Ctrl+C.
I will create a basic greeting for this article that I will use one of the dialog boxes.
Step 7: Paste the new element into the previous element and then align it according to the instructions.
Step 8: Now to edit each element in the toast, double click in the text box and then enter the text you want to use. First, let’s change the title of the toast.
Next, change the content of the body by double-clicking on the text box and typing whatever you want to add.
You can also change the text of the buttons in the same way. Once you are done 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 on the toolbar to the right.
To change the color of the text, click the rectangle next to the Fill option, and then choose a new color from the color picker.
And it’s not just text that you can edit this way. You can also change the color and opacity of most dialog items, which is great if you want a unique color scheme.
When you are satisfied with the results, simply go ahead and save your file by clicking the Save As option in the menu or by using the keyboard shortcut Shift+Ctrl+S.
Perfect your designs with UI Kits
Now that you know how to download and use the user interface kit in Adobe XD, I’m sure you’ll start creating great designs in no time. These UI kits are definitely quite handy and get you straight into your project without worrying about designing each UI element.
Next up: Finished a project on Adobe XD and don’t know how to export it to HTML? See the next article for simple step-by-step instructions.
Categories: How to
Source: thpttranhungdao.edu.vn/en/
