Creative Cloud Libraries can store colors, character styles, bitmaps, and vectors, allowing users to share them across teams. Use Photoshop or Illustrator to create these items, and consume them in XD, keeping the link.
- [Narrator] We created Adobe XD to be a hub for the UX designer to create amazing experiences, amazing designs, but it will never be Photoshop, it will never be Illustrator, so any time we need more complex bitmap editing, you go to Photoshop, any time you need more complex vectors, then you go to Illustrator, and the way you bring those assets back into XD is via CC Libraries, Creative Cloud Libraries. So now let's learn how you can create Creative Cloud Libraries in Photoshop. So I'll jump here in Photoshop, and you can go to "Window"... "Libraries".
Here I have a couple libraries, to create a new one, you can click on this little icon, "Create New Library." Let's call it "New App." You can create that library, I'll move this panel to the side so you can see it better, and as of now, I have nothing here, it's an empty library, I can add colors, character styles, and bitmaps. Here, to add a new map, let's say I wanna add this map image, to add this map into the library to be used in XD, all I gotta do is click on the layer, or a group, or anything here, and drag into the library.
Once I do that, I can double click to give it a name, and you can see now it has information saying it was created in Photoshop. Nice, so this is how I can create a library and bring bitmaps in, in Photoshop. Now let's jump into Illustrator, and let's say I wanna add this photo icon, here, into the library. So, first of all I will select the library, my "New App," so far I only have the map, I can then select this entire icon, and all I gotta do is drag him from my panel here into this panel, the library panel.
I can then change its name to "Photo Icon," perfect. Now I have a vector and a bitmap. Another way you can bring assets in is via Stock. So if you have Stock, you can search, for example, for anything, and I'll search for "learn," and if you like something, let's say I like this little image here, I can then hover, and say I wanna add this to my library, and my library will be the "New App." So now it's adding that image, it's not licensed yet, it's just adding the preview there to my library.
At any point if you need to manage your libraries, you can go to assets.adobe.com, and click here in "Libraries," and you can see all the libraries that were shared with you, all the ones you deleted, but in this case, the one we just created is this "New App." So far, you notice that you have the image, you have the icon, and you have the bitmap, right there, ready for you to use. Next, let's learn how to consume them in XD.
- Understanding all tools in Design mode
- Bringing files for Photoshop, Illustrator, and Sketch
- Working with text, vectors, image fills, and masks
- Repeating elements with the powerful Repeat Grid tool
- Resizing multiple elements with responsive resize
- Using the new Assets panel to manage symbols, colors, and character styles
- Sharing symbols across files, with text and image overrides
- Creating and consuming bitmaps and vectors from CC Libraries
- Extending the power of XD using great plugins