By Gary simon - Feb 05, 2017
With Adobe's second Experience Design update for Windows, we now have access to 3 different UI kits from the menu:
These UI (User Interface) kits are there to give you quick access to commonly used UI layouts and elements for the 3 most popular mobile platforms. This negates the necessity of creating these UI elements from scratch, which can be a pain.
Go ahead over to our youtube channel and subscribe! I'm putting out content constantly.
Accessing the UI kits is straight forward. Simply visit the hamburger menu on the upper left of Adobe XD and choose your desired kit (Apple IOS, Google Material or Windows).
Let's open up the Google Material UI Kit from the menu:
As you can see, we're presented with a variety of different artboards (31 to be exact). These contain everything from typography, to dialogues, and basic layouts.
There's nothing especial about these kits, they're just regular XD files that someone created for the purpose of allowing others to re-use artboards and elements.
So, how you use them will depend on what you're trying to do. Let's say for example you're designing an Android app that has a thumbnail gallery.
Select the artboard titled "Mobile - Dark". You have to click on the actual title to select the entire artboard. Then hit CTRL-C to copy it.
Now hit CTRL-N to create a new XD document and paste it in with CTRL-C.
Great! You've now just made use of the Google Material UI kit for the first time! But we're not done yet.
Let's get rid of those pink guides. Select one of the pink lines and click on the lock icon on the upper left corner of the selection, and then hit the delete key.
Switch back to the UI Kit document and in the "Grid" artboard, select the thumbnail gallery and copy it.
Paste it in the other XD document and position it as shown below:
The white background doesn't look quite right, so let's get rid of it.
Simply double click on the bottom portion of the white container until you notice that the panels on the right of Adobe XD show a white fill color. Double clicking will select the layer even though it's a part of a group. Hit the delete key.
Now, with the gallery selected, simply drag the bottom of it to the bottom of the artboard as shown below:
Select the artboard by left-clicking the title, hit CTRL-C and then CTRL-V to paste:
Select the duplicated artboard's gallery, right click it and choose Ungroup. Then click the Ungroup Grid button on the upper right of Adobe XD.
Delete all of the thumbnails with exception to the bear photograph. With it selected, hold shift while dragging one of the transform handles to enlarge it to 100% width of the view.
It's horribly pixelated, so if you wish, you can save this photograph of a bear (you're free to use this) and drag it on top of both instances of the thumbnail in both artboards.
Now, with the bear selected in the second artboard, decrease the vertical height to around 50% of the view.
Then switch back to the UI kit and copy the typography section.
Paste it in the second artboard of our own document. Right-click on it and ungroup. Then delete all of the text layers with exception to the layers titled, "Title" and "Body 2 / Menu". Select both and make them white (#FFF).
If you select the "Body 2 / Menu" text, you will notice it's the Roboto font at size 14. If you also switch back to the UI kit artboard and read the typography spects for dark backgrounds, the secondary color is #FFFFFF at 70% opacity.
This type layer however was just for reference, we're going to create our own type layer with the type tool by left-clicking and dragging a square as shown below. I've put some lipsum.com generated text as the content, and set the opacity to 70%.
Great! So, let's say we're happy with this and want to create an interaction. Click on the prototype tab, then choose the gallery on the left and Ungroup it a couple times until you can select the individual bear thumbnail. Then drag the blue picker to the second artboard.
Ungroup the top toolbar of the Artboard to the right and select just the arrow and drag it to the left Artboard.
That's it! Now, click the play icon in the upper right corner of XD. Click on the thumbnail, and then click the back button.
That's how you can create rapid prototypes in minutes with the help of the Adobe XD UI kits. Awesome, huh?
