Styles & Typography

[00:00:00]
>> Now, you'll notice that for a lot of this, we touched on styles when I answered a question before. But for a lot of this, we've been manually typing in stuff. And that, generally speaking, has worked as we've been figuring out some of the concepts around layout. But generally speaking, in the same way that we want to be able to reuse code in various places, it would be nice if we could reuse some of our styling and various places as well, right?

[00:00:31]
Cuz you can imagine right now, I've been pretty easygoing on the colors, right? But if I needed to change all of the buttons from one color to another, from blue to a more different blue, then that would be very tedious. And so there are two major kinds of ways of sharing values across Figma.

[00:00:59]
There used to be one and now there are two, and it's kinda like a weird Venn diagram, right? So you used to just have this idea of styles. And as we saw with the layout grids before, we had a layout grid style. We hit Save, and was then a layout grid that we could use multiple places.

[00:01:18]
You can do that for colors, you can do that for typography. You can do that for effects like box-shadow. I think those are the four, right? We will also later on talk about variables. Variables, you can store strings, and numbers, and Booleans, and colors, right? You'll notice that there's a little overlap there.

[00:01:39]
Variables are in beta, and so they don't support things like typography which is another thing that styles currently do, right? But they will eventually support stuff like typography as well. There are more features that will come to variables as well. So there is some overlap. And one of the things to think about and as we kinda go through both of these is that a variable normally holds one value, a given color.

[00:02:06]
A style can be a linear gradient or multiple color values, so on and so forth. Variables have some other features. Where it gets a little tricky or two is variables are great and wonderful for a number of reasons, but they're also a new ish. Means that a lot of times a lot of the tooling is built around styles, right?

[00:02:29]
And so which use one is both a nuance that we will talk about, but also slightly moving target since more features will come to variables so on and so forth. But we'll kinda talk about each of them and kinda get a little more concreteness around this vague notion of they have some overlap and when to use each and the trade-offs as we actually see them in practice.

[00:02:51]
But kinda to initially see that there are two concepts that have some amount of overlap. They are different and kinda the same. Simultaneously, we will dig into it, but let's start with styles. And for our purposes, we'll use variables where we can. Presently, you cannot use them at all in anything involving typography.

[00:03:09]
There are a number of variables. Can you use that as a font size? No, you can't, right? There's just not an option to use in typography. They will eventually be. So maybe if you're watching this later, they are and seems like If I'm wrong, but I was right when I said the words.

[00:03:24]
That's how recordings work, right? Cool, so there's a bunch of reasons why we can and might want to create a bunch of styles. One of them is stuff like typography. We can joke about changing a button color from one thing to the other. But having a known set of, this is the typeface we use in our app and this is the font size and the weight of it, right, that becomes something you one, as the receiving end as a developer, do not want a whole bunch of random fonts, right?

[00:04:00]
And then two, as a designer, you'd like to be able to just say, hey, here's the style for a heading. And then if you wanna change the line height across all of the headings throughout all of your designs, you can do that. So there's both advantages for the designer, and then all things that help designers become more consistent help us implementing them as well.

[00:04:23]
So let's go kinda take a look. So one of the things you could do is you can literally just take some text. And we say, Some Text, and you can change the font with font that we like. Papyrus, I agree. Great, and there's no bold Papyrus? Today, I learned.

[00:04:53]
Let's make it size 48. Sure, all these seem fine. And so let's say I'm like, this is our brand, right? This is absolutely what I want everything we do to look like as we go forward with our new company logo. And so what you can do is once you have your text all the way that you'd like it, you can go ahead and you hit those little, I don't know, something, and you can hit this plus sign.

[00:05:27]
You can say, New Company Logo, Please pay me a lot of money. And now, at any given point, we can style any piece of texts, have it be Papyrus in size 48. Apparently, not bold cuz there was no bold papyrus, which we all learned together and apply to anything.

[00:05:54]
So I can go ahead and it will use the last font that you use. So let's go fo something else instead. And I can go take this, and I can say, you know what? I would like to make this a new company logo. And then should we go ahead and decide that we wanna tweak the new company logo to, what's the most ridiculous found, this is terrible.

[00:06:21]
You can see that they all change to the new company logo. Now, that is great for setting up a typography system and then your designers and you can then use those everywhere. There are some questions about, how does one do this in bulk, right? So for instance, over here, I have stolen basically all of the classes or fonts in Tailwind, right?

[00:06:53]
So they have everything from extra small to small to base to large to extra large up to nine, XL, and then basically you have all the different font weights, right? And so let's say that, okay, these happen, I think they are what font? Source Sans Pro, right? And so I swear if I get one more design where it's some random size 57 font, I'm gonna lose it, right?

[00:07:24]
So in this case, by giving them styles that match to what we have in our CSS classes, we can hopefully keep everyone on the same page. But if you think you are going to hand this list to anyone and, I guess whether they're nine font weights across nine Excels.

[00:07:49]
No one's doing 9 times 14 or whatever it is and making those by hand, right? And that's why sometimes you don't have a lot of these styles and designs. Now, I think it's Larry Wall, who's Creative Perl and one of his famous lines, the traits of a great programmer are laziness, and patience, and hubris, right, and we tend to like to automate things.

[00:08:14]
So there are a whole bunch of useful plugins for creating styles and a type system. The one that I use so much that I somehow managed to list it twice in here, cuz it's my favorite is this one called Styler, right? And so let's go in here and get rid of that other library that was in here so that I have no real dtyles around.

[00:08:39]
What you can do with Styler is basically take a whole bunch of selected layers and bulk create styles, right? There are some caveats. One is it will use the name of the layer to name the style, cuz what else is it supposed to use, right? Two, Figma has a very loose definition of organization hierarchy, which is if you name thing with slash, it will group those things together, right?

[00:09:18]
So these are named like this for a reason, which is that this'll then take all the font, thin, extra light, regular, normal, medium, blah, blah, blah, blah, blah, and it'll group them all under text nine xl. And again, these effectively are named after the Tailwind. If you don't use Tailwind, name it whatever you use.

[00:09:38]
Name it heading, prose, I don't care, right? I happen to use Tailwind at work and I didn't feel like coming up with a new naming convention, honestly. So the caveats here is that, one, the layer should be named after whatever you want the style to be. By default, for text, Figma gives the layer name the content.

[00:10:02]
So that's why also that just makes sense, right? And so it has to be named if you want the styles to be, and it has to be styled like you want it to be. And what it'll do is it'll look at all the layers you selected. It'll look at their styling properties, create styles named after the layer.

[00:10:19]
That's a lot of words that could be much more easily solved by just showing you, right? So I'm gonna do this in the sidebar, cuz it's just easier cuz I think I can hold Shift and just go all the way to the bottom of my, however, many font faces.

[00:10:33]
Now, as we're not talking about the implementation of a design system today, I would say that maybe you don't need all of these. Hypothetically, maybe you and the design team sit down and you pick [LAUGH] a subset of these that you actually plan on using. Because for both engineers, we're all like, this is why you got to limit the number of icons and stuff like that.

[00:10:57]
Engineers will just grab every random spacing class, and designers will too. We're both also broken in the same ways. We can select all of them and then we can go up here, and you don't need to necessarily have a given plugin installed, you can just run them kinda on the fly.

[00:11:12]
So we're gonna look for Styler and we're gonna run it. And the one that we want right now is generate styles, right? And you can see it runs, and it created 116. So we got an answer on how many, I guess maybe, it's 170 cuz that one was updated.

[00:11:36]
We'll go ahead and create them now. If we go into local styles, you can see that under text-xs. We've got a whole bunch of font weights, and these are all of in the font that we want for our design system. I picked Source Code Pro. It was the first non-ugly one I saw when I was scrolling through.

[00:11:55]
We use Enter, which is the default Figma ones that felt not fun, and you might use a different one for headings. You can do whatever you want here. And so it went ahead and it created all of those styles for me. So now, I have a consistent typography system all in place, and that works for fonts.

[00:12:15]
It will work also for colors and anything else. One thing to point out is, let's say you had all these fonts, but they were not named with the slash or whatever you wanted in order to name it. Figma has a really, do not go through 117 of these, 116 of these, whatever, and name them one by one.

[00:12:32]
Again, we are lazy and it is our virtue. So what we wanna do, as you can select all of them or any given one, and you can always hit Cmd+R or Ctrl+R, I'm guessing, and you can do a bulk rename. Great things about bulk rename is one, you can bulk rename things.

[00:12:53]
Two, you can bulk rename things with a number that either goes up or down. Again, we use Tailwind at Temporal, you don't have to, you can do whatever you want. There's nothing Tailwind specific other than the fact that I didn't wanna come up with new names for things, which for colors it's 50, 100, 200, 300, and 400.

[00:13:11]
So I can select them and then have a number that's going up with two zeros at the end. To get that 100, 200, 300, 400 by saying number ascending or number descending, you can take the current name and prefix it or suffix it. So if these did not have the /text 9xl, I could grab the first nine of them or whatever, prefix it.

[00:13:33]
The other part is regex, right? And so you can also If so use at least the match part of regular expression, I think you can do a full regex in here. I've done horrible things in this box that I blocked out of my memory, but I think you can write full regex in here.

[00:13:51]
If not, click learn more and figure it out. So if I wanna change all the font dash to something else, let's do font dash and let's change it to typography, maybe I can spell. Okay, and so that will rename all the layers. It didn't rename the content, but life's hard.

[00:14:19]
But it did rename it here. And the cool thing is if I run Styler again through some magic of annotations, knew that they already existed and just renamed them, right? And so I didn't create duplicate ones and have to delete it, so on and so forth. And so now, if I go in here, they are all typography, whatever.

[00:14:42]
If I wanted to not have them all in a different hierarchy, I could get rid of that slash, they would not be in those kinds of subdirectories. You could use seven slashes, but Figma is only gonna really help you out with like the first one. It kinda knows that there's grandchildren, but it doesn't really display in any useful way.

[00:15:00]
So staying to one level of hierarchy is about all you're gonna need to get away with. So yeah, theoretically, I think that Tailwind, because it's general purpose, needs all of these fonts. But one of things we did in our code base is start to shrink the surface area.

[00:15:17]
Cuz you know what happens when we have 116 fonts, we used not 116, but more than we needed to. So having a smaller set definitely behooves you. But for what works for the biggest number also works for the smallest number. Styler is great if there is an existing typography system.

[00:15:38]
So for our website and stuff, there's a much smaller set of fonts that we use that the design team came up with on their own first, right? Perfect, and so you can take that smaller set and just generate the styles based on that. And I will show you in a second where this gets really interesting for us.

[00:15:57]
I'm gonna show you right now.