Creating Styles

[00:00:00]
>> What you're going to do for a quick second is try that out, I have some typography down here. You're gonna grab the textiles generator, these are in the your case already named, if you don't like the names. If you don't like the fonts, if you, I don't wanna look at these font is I implemented my own components, go ahead tweak some of the line spacing tweak some of the fonts.

[00:00:17]
If you wanna change the colors go ahead you can do that as well and kind of get yourself a set of styles that you're gonna use for the day. Ready to rock and roll as we begin to implement some kinda reusable buttons and input fields and drop down menus and stuff along those lines, put together a color scheme that pleases you and then you can use that one I'll use mine and we'll figure stuff out together as we go on.

[00:00:43]
So now we can use basically the same technique for generating the typography. As we saw it's just a different, plugin in this case, does basically the same thing. I did make a second one whether or not named specifically and that's going to, sure should work. So let's grab all these and I'm just gonna select them all.

[00:01:08]
And then if you have the textiles generator plugin, you can just go and generate those as well. It does like rearrange stuff it's basically applying whatever the name of the style was to the text. In this case and you can see now that I've got a bunch of headings and paragraphs that I can use as well.

[00:01:31]
All right, so let's actually look at like how to reverse engineer this, from this page that we saw before. Now, I have some color swatches here, that I mostly just kind of ,what I did was I selected this entire section. What I did was I basically I looked at all of this and I tried to figure out okay, what are all the colors here and as you can kind of see.

[00:01:54]
If you need to unlink a style any point you just hit detach and you go back to the hex code, if you wanna break from your system went through like what are all the general colors here and laid them out. There were nine shades of gray in this case.

[00:02:07]
At temporarily use tailwind as the kind of the basis and so that's kind of where I started with the whole numbering system that we use in the previous example someone asked like, what are the numbers mean? Usually, I kind of took them from the ones that the color palette comes with tailwind, we go 50 for a very light color all the way up to 900.

[00:02:30]
So we've got nine different shades of gray. There's one here it's just roughly the same as the background of the page itself. You can see it there. Also you can change the background, the page if you want. And so I've got these colors, so I took the other colors that existed and just tried to roughly I like lining them up in this case, right?

[00:02:53]
And you don't have to in this in this particular case like you don't need this color palette, but if I wanted to go ahead and turn this into a color themes, I can change different pieces here. I could do that pretty easily. So I'm gonna grab these, I'm just gonna ungroup this.

[00:03:12]
Am not gonna mess around with the colors. The gray is too much. I'm just gonna grab these colors, which again I have named and I will probably end up deleting this at some point so you don't have to follow along particularly. But this is how to like reverse engineer.

[00:03:27]
If you have a bunch of designs, and you want to figure out, hey, cool, they use text values everywhere. And I want to do the thing that I learned about in that course that I watched. How do I get us there? This is kinda how you would reverse engineer that a little bit.

[00:03:43]
So in this case, I did go ahead I named them all. I called it just like primary, secondary, and then tertiary. I don't know Mark probably knows better what the actual like names of the color in the CSS are. But I was reverse engineering this and not going through the source code.

[00:04:00]
So I took a screenshot,, that's all I had to work with in my case. So you can see I have all these colors here. I could use that plugin that we saw before and I go ahead and this case I'm just going to do the, which one styler hit generate styles.

[00:04:16]
And now I have these new primary, secondary and tertiary. Now there's a little bit of like bespoke pieces here where I kind of need to go ahead and turn any given one of these colors, right? So this is selecting the entire frame if given me everything that is that shade of blue, which looks to be, this one is I think that dark blue right there.

[00:04:44]
So I can go ahead and just pick this one And I have those colors I just made, cool. Now, if I go into this right here, you can see this now that we've linked it up to that style. There was one thing of that color, but the cool thing about this is I can select all, I can be, all right, neat.

[00:05:02]
What I would like you to do now is go ahead and let's grab me say this one's easy, right? That's going to be get everything on the page that that's color and make it the secondary color, right? Grab the darker one, we'll make it the slightly darker version of the secondary color.

[00:05:22]
This looks like. That one. And I could read the hex codes too as well. Go ahead and let's see, that looks like the medium one. See I got yep, that one looks slightly wrong. You can see a change on the page because they're all that color now. So maybe it's the slightly darker one, there we go.

[00:05:51]
This should be the medium one. I think that was most of the colors the rest of them all grays. So now see? Yep, so now if I wanted to, I could go ahead, and like rebrand the front end masters colors really easily. Or the masthead I missed, too.

[00:06:09]
So let's grab that it was just a darker color. So we'll go ahead and We'll go ahead, and we'll say that that is now. This color. So now if I wanted to quickly rebrand this entire site, I could cuz that's that's what Mark brought me here for right so we could say like let's grab this color and let's adjust it.

[00:06:38]
What's this we'll get that I can hear the groaning. I can kinda say multiple things as I change all the buttons all at once and kind of re theme and restyle this page and my styles will update everything across the entire applications. This works for one frame. But imagine you have like multiple pages of every flow.

[00:07:03]
Going into the front end master site, you can basically change all the colors incredibly easily, reverse engineering it from just a few pages, and then applying it all the way through, right? Yeah.
>> So once you've made all the color styles, how can you quickly figure out what the expo was if you'd like forgotten?

[00:07:19]
>> Yes, It's a great question. So if you need to kind of figure out cool, I've now made this code now I see primary 500 everywhere. I just go ahead and first of all, I go into inspect. It's still there in this case. So I will always have the hex code somewhere.

[00:07:36]
I even get the RGBA or whatever style you prefer. And then you can also go to edit the style and you can change the hex code there as well. So it could work the other way. I want to get the hex code or someone came in with, here's the new hex codes for our new branding, right?

[00:07:51]
You could also go to edit style and paste in the hex codes as well, right? Or make a bunch of layers the same way I generated styles to begin with, you could also just adjust those watches again, and then regenerate styles a second time, right? One of things we also referenced is in some cases, there's a whole big color theme, right?

[00:08:12]
If you wanna get is you can see I just grabbed just the shades that were on this page, right? And so let's say hypothetically well. Let's go back to the normal colors. I was, all right let's grab at least these kind of middle colors here. If I wanted to there's another plugin that I'll drop a link to which there's a whole bunch of these honestly called UI color palette which will take a set of colors.

[00:08:40]
And then generate the entire pallet for you. So you can hit create color palette and then from here, you can say update local styles and it will push up all 50 through 900 of those color styles for you. All right, so if you only have a few colors to work with and you're again like in my case of reverse engineering that one page, I'm cool but now I do need a lighter blue.

[00:09:04]
I'm not good enough for color theory myself to figure it out I can at least have some help and generate a full palette of all the basic colors, right? And that'll kind of get you can then update the local styles you'll get. Let's just hit the button, see what happens.

[00:09:23]
Create local styles. And now not only do I but I also have a full, so it has some slight little issue there, but I have a full set of colors that I can also use as well generated from those other ones. But I'm gonna delete all those in a second anyway cuz now I have way too many colors and I will just get confused later.

[00:09:47]
But we've got those ones. So you can just generate a full color palette with a few colors. If you have one, wherever you work, you can kind of turn it into a set of Figma styles, you have a bunch of options that you can use for getting stuff in place.

[00:10:01]
And that's kind of the basics of styles. We'll revisit styles a few more times as we look at the components and layout grids and all the other stuff that styles can do that we just haven't covered yet. But now we have the basis of at least some amount of a typography system.

[00:10:14]
We've got some amount of a color scheme that we can use for all these things and we're not hand selecting colors every time. They have a roughly a semantic meaning that we can use and we've got most of the kind of pieces in place.