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!
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.
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.
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).
This method has the undeniable benefits of keeping your file slim and having total control of your assets.
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.
The component paradigm is a powerful universe. For more information, visit Work with Linked Components.
- 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.