Color Palette Practice

[00:00:00]
>> So, what you're gonna do now is go into your starter. Your project not my template, but your project and we've got these five rectangles here. You can hover over them you'll see them. We're gonna fill these with color. So if you double click these, you have to double click it cuz right now it's a group.

[00:00:18]
So it has a label, it has two labels or two texts fields and a square. So double click it, it'll highlight that square. Okay, so grab a hex value from your palette once you find it. If I'm talking too quickly or you need a reference, you can go find that, it's under creating a color palette.

[00:00:37]
So when you highlight that square, you're gonna come over here to this right side it says fill, okay, you're gonna paste in that hex code there. You can also double click this label and kind of just update that so it actually reflects the correct label. And I'm just gonna copy it over.

[00:00:53]
Let's just copy over some colors. Now if your shade is a little darker, like this one, you can see this black text is maybe a little bit too dark. Go ahead and change that to white if you would like. Okay, so once we've now got our color strokes and don't worry if I'm going too fast, you're gonna get some time to work on this right now.

[00:01:40]
Once we've got these, we're gonna turn them into actual assets that we can use to build our components. So what you're gonnado is you're gonna double click again on the rectangle, you can see I've got my fill here. If you look under fill to the right side, there are these four little dots here for this menu.

[00:01:55]
You can click that and oops, no I don't wanna add a gradient. So you click this little menu here, you'll see it says color styles and you add a plus. So I wanna create a new color style. I'm gonna call this, the same as my label. So primary 200, okay?

[00:02:10]
You create your style. You're gonna do that for all of these. So again, go to this little menu, hit plus. Just give it a name. Again, you can call this whatever you want. I'm gonna stick with the primary dash and then increments of 100. So add those in there.

[00:02:28]
And once those are added and make sure you do these down here too, so when you copy over these art boards I don't think it copied over the styles. I'm gonna give you time to work on this. And once you do that, the really, really cool thing is if I go over here, or I'll stay in colors, if I stay here and I press R and I create a new rectangle, I want to give this one of my primary colors.

[00:02:49]
If I click this menu, look, I've got all my colors here. And so I can change it to red. And now I can create another rectangle and I can set this to red as well. But now if I actually go and update this, let's make this I don't know.

[00:03:06]
What's a hex code? Let's do 4AB. We change the color of this. I'll just copy one from down there, 737581. Let's say I change this color, you can update the color style and it'll propagate now to all of your components. So, if you have gone through in creative color styles for all of these, on this right hand side bar, on this design tab here, you should see them showing up.

[00:03:31]
So you can see color styles and we've got all the list here. And if you haven't gotten through adding all those status colors or the neutrals, that's okay, it's not a big deal. You can work on that later. All right, so this is what mine looks. I'm excited to see what yours all look like in the chat.

[00:03:50]
And with that, I think we're ready to move on to the hypography.