Select elements and add their colors to the Assets panel. Apply the color with one click or right-click to pick an action: apply as fill or border, copy the color code, delete it from the panel, or highlight on canvas. Edit it and the colors will change on canvas.
- [Narrator] We learned that you can use the color picker here to edit a color of one element. And here I can play a different value to get a different result. But sometimes, what I want is to come up with a way to, let's say, change the entire green to something else. Imagine if I had to do that one by one. So there is an answer, there is a better way. Let me introduce you to the assets panel. So if you got to the bottom left here, or you go view assets, here's a place where you can manage your colors, your character styles and your symbols at a document level.
So here is that symbol that we created, you can also see elements here on a grid view, and you get a better preview of that. From here you can add instances to get more, instances on your canvas. But now let's see how we can use the assets panel to manage colors. And think of this as the beginning of your design system. Where you can manage your color, character styles, and symbols. So first of all, you can select one element, and say hey XD, give me that color.
So now I add that color to my assets panel. If I then select, let's say, more elements, this entire set of elements, and I say, hey XD, give me all the colors that are used there, one thing that I can see right off the bat, is that this gray and this gray are very similar. Let's go back to the list view here, and you can see that they're pretty much the same hex code, the only change is the number. So this is probably a design bug. I can right click, say copy, so now I have this zero zero in memory.
Now let's say I want to edit this one to have that same value. I click edit, paste, and as soon as I commit, now those two get merged, and it's only one here. So now I'm resolving that bug. If I wanna change, let's say, the entire document here from this green style to let's say, a blue design. I can go here and say, let's go with this one, right click, edit. Then I can pick a blue, let's say this is gonna be my blue.
Then I'll add it here to get a blueish design like that. And it's a gradient so let's edit both stops. So as you can see, with a couple steps, I'm changing my entire design, very very easily in XD. So another example here is, let's say I have the wires here as a UI kit I have downloaded. Imagine if your company, for example, doesn't use blue for the color. Let's say you needed to change all the elements here to more like a gray scale behavior.
I can then open the assets panel, the wires already had the colors there. And this is just a matter of, right click, and say edit. Okay this is gonna be black, this is gonna be a gray like that, and this is gonna be a lighter gray like that. So with less than five clicks, I was able to change the entire design here from the blue to a gray scale scenario. Going back here, another thing you can do is, let's say, this guy here, now needs to be orange.
With this guy selected I can use the asset panel to just click there, and get that color, click there, and get that color. So as you can see I just can apply that here. If I have, let's say, a basic shape here, with, let's get a bigger border here so you can see it in action. Any color here, if you right click, you can do apply as a fill, or apply as a border. Let's apply this as a fill.
And the last thing that I wanna show, is that let's say, I have this orange, but I don't know exactly where the color is. How can I find this element here. I can right click here and say, hey XD, highlight on my canvas where this orange is. So when I do that you see that he adds this blue decoration around, showing me where I have that color. I can do that the other way, so let's say, I have this orange star here, I can right click and say hey, reveal this color in the assets panel.
So I can go there, and it's now highlighted, and I can right click, and apply, copy, delete, highlight, rename, and all that from the assets panel. So this is how you can manage colors using the assets panel in XD. Next, let's learn how you can manage character styles, with the power of 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