Join Demian Borba for an in-depth discussion in this video Consume colors and character styles, part of Developing a Design System with Adobe XD.
- Now it's time to use this new Creative Cloud Library in your xd project. You can see that while in Photoshop, you can see your library here, and this library is also available in your website there. So, if you go to assets.adobe.com/assets/libraries, you can see all of your libraries, and the library you just created is here. So, it has that blue here and the two character styles. All right, so let's go to xd, and let's see we can import those pieces.
First of all, you got to go to File, Open CC Libraries. And CC Libraries is something that is global, so you can open this panel and apply items in different xd documents. So it's not static to a document like the asset panel. The Creative Cloud Library is something global. So, let's come here and select the one we created. Here's my color and here is the text.
So, let's see how we can bring these things in. So, the first thing you're going to do is bring this color. One thing that I can do is add something, like, anything, and click there. Now this is the fill, so I just clicked, and I got that fill. I can now click plus and that blue came in. Now that that blue is here, I can delete this square, this temporary square, and I can then right-click here, copy the hex code, and I can right-click on the pink one, say Edit, and if I paste the color here, that blue here, look what's going to happen to the entire project.
Everything changed. This is probably a different pink, so we can click there, it's a little darker. I can right-click, say Edit, it's not going to be a gradient anymore, and it's going to be the same blue. Perfect. I can close it right now, and you can see here that I have all of my elements changed very fast, very quickly.
Now my whole design is blue, and I have variations of the same blue so I can clean up my panel by right-click, Delete, right-click, Delete, so I only have one. Nice. Now let's see how it can bring the copy style. So I can go to File, Open CC Libraries, that's already selected. I can select this title, and I can click on the CC libraries, and it's now applied. I can then do the same thing with my body text here.
Select it, click here, oops, that way, that's not exactly what I want. So how can I fix that? So let's go back to Photoshop where I created it. I'll write just the text here to Helvetica 22, and the character here will be, this will be 32 for line spacing, and this will be 0, and I can now add this character style to it, and I can delete the old one that was the wrong one.
Nice. So if I go back to xd now, I already have that new character style in, and I can then just select it and click here, fixed, it's all good, ready to be used. So this is how you bring colors and character styles from Creative Cloud Libraries, created in Illustrator or Photoshop.
- Managing your project
- Managing typography and colors
- Pattern library with symbols
- Creating a CC Library in Photoshop
- Consuming colors and character styles
- Using linked and unlinked bitmaps
- Exporting assets
- Gathering feedback