Manage colors

- [Instructor] Now it's time to work with colors. To illustrate a very cool functionality of Adobe XD, I'll create a new document and use the iPhone one. So let's say here I have three different elements with three different colors: one red, one green, and one blue. So three different colors, no borders.

I can then, of course, one by one add them to the colors here using the asset panel; or I can select the entire art board by clicking on its title and clear here in plus. Now it's, XD's going to look at the whole document and it's going to bring all the colors that I have here in my document; pretty cool. Now back to your project. Here we're going to have a chart going up; and let's design that using a rectangle, so I can select the rectangle tool.

I can then draw a rectangle here, select that pink that's in my swatches here. This is just global to the swatch panel. You can add them here if you want to. Cool, and no border. Now, if you zoom in a little bit, you can double-click on this rectangle and you can get to the edges; and you see that when I do that, this turns to my pen tool and I can click and start adding anchor points to my document.

I can do one here, another one there, another one there, and another one right there. So this is showing that if you take these classes, you're going to be awesome. It's going to keep growing, and you're going to keep getting a better and better and better. Then I'll do another one, so copy this, paste; and this will be a gray one, and I'll just move the points up a little bit to create this shadow effect.

I'll do that here, and the last one will be bigger. Then I can select both, right-click, send all the way to the back; and then this gray one needs to go behind that. Very cool, so now I have that nice background effect there. Interesting, so now if I need to add this pink that's available here; and if you zoom out, you can see it's also here on the bottom.

If I need to add it to the asset panel, I can select it and click plus so now that pink is right there; and then if I right-click on it and click Edit, I can change it and that changes throughout my whole document. You can even see the bottom there, it's changing . So this is very powerful, but we're cool with that pink.

Another tip here if you want as a bonus, you can select this guy here and you can add a border. Let's put that pink and your fill can be a gradient; and you can edit things here. You can make it transparent, so going from that pink to a transparent pink; and you can add thing on canvas as well. So I can play with this gradient on canvas.

I can do something like that, and my border here can be thicker; and if I make it larger, you see it's going to crop and it creates the nice shadow that goes there. Just a little trick, but we're going to stick with the material design format; so very simple, very solid very flat to go with our designs. So that's how we manage colors in XD. You can also right-click copy this for developers. You can delete something from your asset panel; and if you have an element that has different things, let's say if that's square, I can right-click and apply this color as a fill.

I can apply, let's say, this black one as a border; but this one is a fill. This one is a border, and you can see it's black right there. Now that you know how to work with colors in typography in XD, let's move on to icons.