Transcript from the "Styler Plugin" Lesson
[00:00:00]
>> There are a bunch of plugins that will take a whole bunch of layers and make styles for you, right? So for instance, Styler is the one I use, and you can go ahead and you can just hit Install and then it's instantly available. And then you can use it, so that's kinda your cue to go and install it right now while I talk.
[00:00:23] You can install Styler, and what it will do is that it'll take a bunch of layers and it will just automatically create color styles for you out of those layers. Then you're like, neat. What are they called, right? Well, that's where, so you're not out of the woods yet.
[00:00:44] It names them after whatever the name of the layer was. So, if you select all of these, and you go in, and go to plugins, and you go to Styler, and you go Generate Styles. You can see if I go now in here, I've got a bunch of colors called circle and whatever number Figma gave it.
[00:01:13] That's not what I wanted, I could go hand by hand and rename them. And the one thing you'll see is that if I give it a slash like a directory structure, It will create folders that I can organize stuff with, but still I don't wanna do this, so I'm gonna delete all these cuz these are gross.
[00:01:42] I'll select Shift and just get all of them, delete them, I don't want them. What I wanna do is I want to rename all of these in bulk, right? So there's a bunch of ways that I can do that, but there's one kind of built into Figma that's super useful.
[00:02:00] I can select a bunch of these, let's take all the brand ones, and I can hit Command+R, you'll see I get this bulk rename, right? The one thing I have to check is depending on which order you select, they're slightly different. So circle five is the lightest one, that's the one I want to be 100.
[00:02:19] And then it means circle 1 is the one I want to be 500, so I'll show you how to do this. You select a bunch, you hit Command+R. And you can do a regex in here if you love regex and that's the way that you wanna live. I don't need to in this case, so I'm gonna say Brand, so this would rename them all Brand.
[00:02:39] Still not great, there are a bunch of variables that I can use here. And so if I do $n, you'll see that it is giving me a number, right, in incremental order. Capital N will give me in descending order. Two n's will actually just pad it with a zero, so that way, you don't have to figure all that out, so on and so forth, right?
[00:03:05] What I want is kinda the opposite. I wanna say that the one that is circle 5 which should be 100, and the one that is circle 1 should be 500, so I'll just put two Os at the end myself, and then that slash in there. And I can check, and you could see that I got it wrong.
[00:03:25] So there's a bunch of ways you can handle this, you can do a replace, I'm just gonna undo and will hit Brand, $n. And now all of these are renamed the correct way, right? So again, as you saw the input field above that, there's pattern matching, right? You can literally just type in a string, you can put in a regex, and then you can use that value, then you can do everything after the value.
[00:03:53] There's a whole bunch of nuanced things that it's really hard to come up with a fictitious use case for why I would wanna do that, so you have a bunch of ways. The other way you could theoretically do this is, I could grab a bunch of these, I could rename them all 200, right?
[00:04:09] And then, I could theoretically match it and then fill in the other piece. I like the initial way that I did it, so you can go through and rename all of them one at a time. So here we'll call this one, was this Information, was that Success, or was it Danger?
[00:04:27] Danger/ Warning/, might grab that real quick and not type it again. Still like not tedious, but ideally you're doing this once. It's kinda like setting up Webpack, that's gonna get me in trouble. And then we'll call this grayscale. Awesome, and so now I can select all of these, I can go back into Styler and I can say Generate Styles.
[00:05:12] And now you can see, I didn't rename that one properly. At least for the other ones, I've got my entire color palette that I can now use throughout the rest of my day as we go through, I do need to undo that last one though. All right, and go ahead, and we'll just try it one more time.
[00:05:46] Generate Styles, and now I have, oop, I got an extra sticky note in there, you can just delete them. And now I have all the colors is that I need, so you can create a scale. The other thing is super interesting is, neat, you've just moved the problem forward, right?
[00:06:03] Yes, now you're a designer, which could be you or it could be somebody else, or it could be you trying to just figure out all the colors in a design, has a bunch of well named styles. There's another one called CSS Gen, which again, you probably just don't wanna use wholesale, but you could theoretically take the styles from a Figma file, and this is another plugin.
[00:06:23] And you can go in here and we'll go to CSS Gen and we'll say, I want CSS variables, you can choose your color mode that makes you happiest, you can choose your casing. You hit Generate, and it will give you a bunch of variables that you can just use, and so you're not porting them over one by one.
[00:06:44] So now you can set up the colors and again get the accessibility right. A lot of times what I'll do for both typography and colors is I'll make a bunch of just random buttons and divs and headings, and do even just a very loose mock up of what I think I'm gonna do, get the line spacing right, and stuff along those lines.
[00:07:04] Then I will delete all those things, I'm not gonna actually use them, but that sets up my styles, now I have them ready to go in both my CSS as well as in my design, right? You might not just use this as a class name, you could choose, if you're using SAS, you might make a mixin.
[00:07:22] But it at least gives you the starting piece here for all the styles that you might choose to use in your application.