Making text styles

- [Rik] So at the moment in Figma we have our styles with our colors, we have our logo mark and logo type as components. There's one more thing I'm just gonna quickly do which is the same thing with our type. Because when we add this to our website, we want to make this really easy to change, too.

So what I can do is click on my type and I can actually add this as a style, too. Here it says text, I'm gonna click this and what I'm gonna do is just quickly add a new text style. Now I'm going to call this one heading dash one, the kind of biggest heading on the page. Similar to what we had with blue mid.

So this is just going to add Heading 1. Gonna do the same thing with Heading 2. So I'm just gonna add this in as heading number two, and this one I'm just gonna call this one like the body text. So I'm gonna add this one in as the body text. So what this means is if I just quickly add some text, just quickly underneath there, (typing) "Hi there. This is Rik." So what I can do just quickly apply this in the same ways above.

I can just click here and I can quickly just change these text styles to be whatever I want. And if I change any of this, this is the kind of like raw version of this, again I can just right-click here, I'm sorry, click here, right-click, edit style, and just change this all in one place. For instance, if I want to make this a little bit bigger everywhere - 48.

Obviously this is number two, so I'm just gonna change that forty- 48 everywhere. Again, just gonna select that, right-click and edit. If I just change this back to 40, it will change it all in one place. So this is a really useful tool. So we can add styles not only to colors but also text as well, and make everything a component.

This makes when we go into making a website, everything really, really easy, because everything's now set up ready to go. All I need to do is set up my web layout, which I got from my wireframes, and place all of these things in place, of course.