Adobe Xd How To Install Ui Kits

Working with UI Kits

In Adobe XD you take access to a series of UI (user interface) kits for Apple iOS, Microsoft Windows, Google Material (Android), and wireframes. UI kits and wireframes tin can relieve time when you're designing for different device interfaces and platforms. They are XD files that include mutual design elements such as icons, keyboard layouts, navigation bars, inputs, buttons, and more than. You lot tin use a UI kit as a starting point or copy and paste elements into your own design. These resources can help you create a pattern that matches a specific design linguistic communication (like iOS).

Downloading the UI kit

In this section, you'll download and unzip a UI kit from the developer.apple.com website. Y'all'll then open an XD file from the downloaded files and copy a few elements into your design.

Choose File > Get UI Kits > Apple iOS (macOS) or, on Windows, click the menu icon () in the upper-left corner of the awarding window and choose Get UI Kits > Apple iOS.

The UI kits listed in the bill of fare you see are links to the websites that they can be downloaded from. By choosing Apple iOS, the developer.apple.com website is opened in your default browser to a folio (developer.apple.com/design/resources/) where you lot can download a UI kit specifically for Adobe XD.
On the web folio that opens in your default browser, click Download For Adobe XD. A DMG file is downloaded to your calculator.
Find the DMG file that was downloaded and double-click information technology. Afterwards you accept an understanding, you can view the contents in a window. Double-click the iOS thirteen Adobe XD folder to view its contents.
Salve the UI Elements + Blueprint Templates + Guides folder to the Lessons folder on your hard drive so yous can easily detect the contents.
On macOS, in the aforementioned window that you double-clicked the iOS xiii Adobe XD folder, double-click the file "Download San Francisco.webloc" to go to a web page in your browser. On that page, click the push button to download the SF Pro fonts.
After the DMG for the fonts is downloaded, locate information technology and double-click it to view the contents. Follow the installation instructions to install the fonts.

Opening and copying from the UI Kit

With the UI kit downloaded and the San Francisco Pro fonts installed (macOS only), now y'all'll open up one of the downloaded files and copy content into your Travel_Design.xd document.

Back in Adobe XD, on macOS, cull File > Open From Your Figurer (macOS). Navigate to the Lessons > UI Elements + Design Templates + Guides binder. Open the UIElements+DesignTemplates+Guides-iPhone.xd file in that folder.

On Windows, click the card icon () in the upper-left corner of the application window and cull Open up From Your Computer (Windows). Open the UI_kit_content.xd certificate in XD, located in the Lessons > Lesson04 binder. Press Command+A (macOS) or Ctrl+A (Windows) to select all of the content in the certificate, copy it, and paste it into the Retention artboard of the Travel_Design.xd file that is still open.
Press Command+0 (macOS) or Ctrl+0 (Windows) to see all of the content.

The content in the UI kit is very well organized, and content is grouped together to make selections easier. You volition detect, however, that information technology can exist challenging to select private objects since at that place are a lot of groups nested within groups.
With the UIElements+DesignTemplates+Guides-iPhone.xd document open (macOS), in the Layers console (Command+Y [macOS]), type status bars into the search field () at the peak of the Layers console to filter the list of content that appears in the panel (circled in the figure). Click the name "Status Confined" (with the folder icon to the left) to select that content in the document.
Press Command+3 (macOS) or Ctrl+three (Windows) to zoom in to the status confined.
Click the X to the right of the search field () (circled in the effigy) at the summit of the Layers console to articulate the filtering. You should at present see all of the content for the UI ELEMENTS - BARS artboard listed in the Layers panel.
Click the folder icon () (circled in the following figure) to the left of the Condition Bars object in the Layers panel to come across the contents of the group.

You need to select and copy a dark version of the status bar and a low-cal version.
Click the "Status Bar" name to the right of each folder icon until you see the top, black text status bar selected (see the figure).
Click the folder icon for the selected Status Bar to testify the content (circled in the following effigy).
Click the name "Status Bar" to the left of the remaining binder icons until you lot encounter the meridian, white text status bar selected (see the effigy).
Click the folder icon for the selected condition bar to show the content.
Press the Control key (macOS) or Ctrl fundamental (Windows), and in the Layers panel, click the blackness condition bar and then click the white status bar to select both (run into the figure for which to select). Right-click either of them and choose Copy to copy them.
Choose File > Close (macOS) to close the file and return to the Travel_Design.xd document.
Back in the Travel_Design.xd document, press Command+V (macOS) or Ctrl+V (Windows) to paste the status confined in the center of the certificate window. Drag the pasted content higher up the Memory artboard for at present.

When you lot elevate the pasted content, you may wind up deselecting it instead. In Adobe XD, yous cannot only elevate from within the bounds of the grouping; you demand to drag from the content in the group. You may want to zoom in to make it easier to drag.
Press Command+S (macOS) or Ctrl+S (Windows) to relieve the file. If you plan on jumping to the next lesson, you tin leave the Travel_Design.xd file open up. Otherwise, for each open document, choose File > Close (macOS) or click the Ten in the upper-right corner (Windows).