How to import Google material icons and screens into Adobe XD

Sök

Senast uppdaterad den 2 maj 2021

Adobe XD improves and simplifies the workflow for creating interfaces thanks to the UI kits import function. Learn how to import elements belonging to the design system of Google to quickly start creating your UI.

Italo Sannino is in touch with digital creativity for over 20 years, since graduating from the Academy of Fine Arts of Naples, where he now teaches UI design. He established "Geko", a small New Media agency in 1997, which has become his personal field of experimentation. Thanks to the Adobe Guru Project and being an Adobe community Professional today, he has been closely involved in the methodology, design, and planning of usable interfaces and relevant Adobe tools and recently become one of the Wacom Ambassador members.

You can check out his unleashed creativity here!

Prerequisite: Activate the right fonts

Google Material is a design system developed by Google mainly for the Android OS. Typography plays a fundamental role in using design systems. To ensure that the designs works accordingly, activate the reference fonts from Adobe Fonts libraries.

Obs!

Google Material is more than just a set of button icons and styles. It is a design system, and as such it sums up not only general best practices on UI/UX but also on the use of imported interface elements. For more information, visit Material Design.

Follow these steps to activate the right font:

Visit the Roboto page on Adobe Fonts.
Use the Activate All Fonts slider in the upper-right corner to active the font family.

The Roboto page in fonts.adobe.com

Preparing to import UI kits

Launch Adobe XD. You are welcomed by the splash page that offers different possibilities. Choose to start from a classic preset like iPhone 6/7/8.
After selecting preset and creating a document, select the menu item: File> Get UI Kits> Google Material.

Get UI Kits menu
You are redirected to the Google Material download page. Click the download link for the UI kit in Adobe XD format.

The download page for the Adobe XD file format
Open the newly downloaded Adobe XD file.

The file containing the Google Material UI Kit

Once you have the file with the Google Material UI elements, you can efficiently import it into your design or a new file in two ways, depending on your specific needs. You can import a single item at a time or all the artboards that in turn contain all the elements (including components).

Importing individual items into your design

This method has the undeniable benefits of keeping your file slim and having total control of your assets.

Identify the UI element (or the interface elements that interest us).
With the Select tool (press v) and select the UI element.
Copy the chosen item by pressing command + c (on Mac) or ctrl + c (on Windows) and paste pressing command + v (on Mac) or ctrl + v (on Win).

Paste pressing command + v (on Mac) or ctrl + v (on Win).

In this case I decided to take the mail icon to integrate it to my design:

The operation of copy and paste between the file of Google material and our design

Obs!

All the elements in the Google UI kit are in vector graphics, so you can edit them as per your preference.

If there are many individual elements, taken one at a time from the file with the Google UI, you face a process that could be time consuming and tedious. The ability to copy and paste one or more artboards is an interesting feature of Adobe XD that you could use to your advantage.

Importing multiple artboards into your design

Reopen or bring back the Adobe XD file containing the Google UI.
To select all the artboards, press Cmd + a (on Mac) or Ctrl + a (on Windows).
Copy pressing command + c (on Mac) or ctrl + c (on Windows) and paste by pressing command + v (on Mac) or ctrl + v (on Win).

Using components to import multiple artboards

The process of pasting multiple artboards is convenient and powerful, but since the last release, Adobe XD uses the model of the linked components. It is not possible to edit those parts of the UI that have been converted into a component in the Google file, unless you unlink a component from the source or edit the components from the source file. In this case, try to disconnect a component from its source.

It is not uncommon today to have more people working on the same project and sharing their files. This, of course, also applies to your Google UI kit XD file. In circumstances like these linked components show all their true power.

Linked components allow you to have only one source file (a style guide or a design system, like in this case) with all the elements in the UI of your project and to use them in other Adobe XD files.

When you use a linked component in your XD file, that comes from the source file, you will always be notified when one of these components is changed, you will preview the changes and at this point you can decide whether to accept or reject them.

This powerful feature not only streamlines your workflow but guarantees the consistency of your UI / UX, which is probably the most critical aspect of this kind of work.

Using make local component command

Activate the Assets panel by pressing command + shift + y (on Mac) or ctrl + shift + y (on Windows).
Select the component (or components) you want to convert and with control + click (on Mac) or right- click (on Windows) select Make Local Component from the pop-up window.