Hi again, we are here learning how to use Figma as a product person.
We have our pro teacher Lauren here ready to teach us all
about styles and variables.
Yesterday we learned all about components, building on top of the knowledge we had
about libraries, about structuring our file, and now we're going to go much
deeper into styles and variables than we did when talking about libraries.
So Lauren, are you ready to start styling some things?
Yes, let's do it.
We're going to pop still back into our lesson three over here, just because
we've got some stuff going on in here.
And we're going to start out with, again, why would you use styles?
And this is very handy that it's coming right after our component lesson,
because it's a very similar idea.
If you're going to use something, More than once.
like a color.
If you're going to be using this color a lot, say this is your brand's
main color, you're going to want to create it as a style or a variable.
We're going to focus on styles right now.
We'll talk about variables at the end, but they're super similar.
so usually there's certain hex codes.
So that's just like the label of the color here.
This is our hex code that we're using.
And if you have to keep remembering this hex codes, it's annoying.
It's very annoying to trying to have to keep remembering it and applying it.
So if we can have styles, it's going to allow us just like we could
grab components and pull those in.
It's going to allow us to grab these colors and pull them in
and apply them to certain places.
So.
couple of different ways that we can create these styles.
We can start out right from when I'm not selected on anything in my file.
We can see right over here, local styles.
And there's no local styles created, so I have this option
right here just to click plus.
So I'm going to click plus.
And I can decide, there's four options of styles really.
There's text, colors, effect, and grid.
Text and colors are the ones that I use most often.
I'd say...
95 percent of the time it's going to be these two.
So, let's start out with color.
We're just going to hit, we hit the plus.
We're going to hit color and this is where we just put in our information here.
So if we have a name of the color, we're going to call this one purple.
And what's it for?
We can put a description of say, this is our brand color.
This is only to be used in certain aspects of certain things or whatever.
If you want that additional description, kind of similar to how we had that
component description we talked about.
So we can put in that description there.
And then the properties are where it's going to come in.
that's where the main thing is.
This is where we're going to change our color.
So let's.
Let's say we're just going to grab this color or we can
grab any color that we want.
Let's grab this purple right here.
I'm going to X out of here and I'm going to create my style now.
So now we can see we have these, our color styles, our local color
styles, which just means it's in the file, have been started here.
So now we can apply that to something.
Say we have a rectangle right here.
Let's start a fourth column.
So now I'm going to go to my style options over here, and I can see
my local one that's bubbled up to the top, and I can apply that now.
And now I'm knowing I'm using the correct color.
I also saw in here though, that there's a bunch of styles.
I didn't see them when I was selected on nothing, all I could
see was this one style I have.
But I can see now when I'm going to select the styles,
there's actually a lot in here.
And that's because those have been pulled in from those libraries that we turned
on, which we talked about the other day.
So yeah, if you do have certain colors that you're pulling from like
these foundation libraries You're just gonna want to make sure that
library is turned on and then from there you can apply those colors.
Can I ask a question here?
So, when I'm on that picker and I have those options that are the
styles in our libraries, what if I want a color that's not a style?
Yeah, so I often, sometimes feel like I get stuck in that option.
What, how do I get out of that?
Totally.
if a style's already been applied, like if you have applied this style right here,
you're going to have to break the style.
And basically that's similar to detaching a component.
So you're going to go right over here and you'll see this little detach style icon.
And now you have the option to choose whatever color you want.
This is where, if it's not in the library, like if you're looking for something
that's not in the library, you're probably going to have to create it yourself.
It's not going to obviously automatically add that to the library.
This'll be just you creating your own, but you may want to create
some local styles for yourself.
So if something's already been applied, you'll just detach it.
If nothing has been applied, then you can pick some colors from over here.
And this isn't creating a style, but this is just allowing you to pick
those random colors that you want.
Makes a lot of sense.
Thank you.
And again, by breaking the sound, I'm not breaking it.
Just like the detaching an instance.
I'm not changing anything for the style itself.
It's just for that application.
Exactly.
Yep, exactly And then so that was how to create them just from a blank
page of going over here I actually way prefer to see all of my colors
out So like let's looking at just these ones that I have here I like to
make myself little color swatches and then create the styles from there.
So how I would do that is a couple of different ways I can Go ahead
and select this little color.
This is just a rectangle that I've created.
I've renamed the rectangle because naming is going to come in key here.
So I'm going to select on this, and I'm not going to hit the plus.
That is by default what I always think I need to do to create a style,
because when I hit the plus, it's actually adding on another layer here.
Like it's adding on.
A different, grouping of colors on top of each other.
What I actually want to do is select those four dots again for style.
I'm going to go up here now and create, it says new variable, but you're
actually going to pop over to style.
We can still create styles this way.
And here I'm going to do red 100 and create the style.
Now we have that new created style here.
You'll actually see two, if you take a look at these, this one the
name purple is right next to it.
But this one, the name red is on top.
And the difference of that is because I added in slashes here.
So, We had just named this purple versus this one.
We named red 100.
And why that's really helpful is because we can group colors together.
So if we had red 200 right here, I'm going to go create a red 200.
So I'm going to go to style.
I'm going to call this one red 200.
create the style and now they're grouped together and it's just a lot easier
to be able to see Oh, I can expand or collapse all my reds together.
If you have, like primary 100, 200, 300, it's just nice to be able to kind of
expand and collapse your groupings there.
And that's what putting that slash is going to do.
Now, the other reason that I also named these before, cause that
naming, even though I named these ones, It didn't super come in handy
when I was creating a style there.
It just let me know what I wanted to call them.
But, if you had, say, a full page of styles here, you have, a hundred or
so colors, doing that manually every single time is a pain in the butt.
So, I've renamed these what I wanted.
Blue 100, blue 200, green 100, green 200.
I'm going to select these and I'm actually going to use a plugin now and
we're going to go into plugins soon.
But basically, I'm going to go up to my resources.
I'm going to go to my plugins here and I'm going to use the Styler plugin
and I'm going to generate styles.
And we can see that created four styles.
You can see all my styles are right.
Oh, wow.
That green, that blue.
So you can see how that could be really, really handy if
you have a bajillion styles.
Very helpful.
No kidding.
And so that's how to create the styles and setting up our styles for colors.
It sounds like you can also do them for text.
Can we just look at an example of that.
Absolutely.
So you can actually do it, very similar ways, both by creating
a local style right up here.
So I can create a local text style and we'll just call this, let's see, body.
regular.
And this is, and again I did those slashes so that I can group them if I
had body bold, body regular, body medium.
Um, put the description here.
This is where I'm just going to change the text style, we're
going to keep it as regular.
And let's make it 12 feels right.
Create the style.
And now you're seeing your text styles are showing up here.
And we only have one body, so there's only one under here, but if I created,
I hit T, I created a text style here.
I'm going to change this styling right here.
Let's make it.
Let's make it super fun.
Let's do that font.
let's make it a little bit bigger.
And from here, again, same way I can go right up into these four
dots, the styles, I'm going to hit the plus to create a style.
We'll call this body, uh, I'm calling it body fun.
Create style.
And now we have my two body options, regular or fun.
And if I now select on this, I'm selected on the body fun one.
I'm going to switch it to regular and you can see it switched right there.
So super similar creating text styles and color styles.
And these are just going to really help you to make sure you're having
consistency throughout your entire design.
So you can just make sure that you're applying those text
styles and those color styles.
That makes sense.
And we saw how we can pull those in from libraries.
So it sounds like we can create our own, we can use the libraries, and
then we can always detach them and just do something completely custom
if we need to, it sounds like.
Absolutely.
yep, exactly.
Awesome.
And the last thing we wanted to cover today is variables.
We don't want to go into variables, we just want to understand what they are
and how they apply here in regards to styles and what we can change here.
Exactly.
So, yes, variables are a deep hole that you could get into for sure.
There's lots of resources we have out there.
But, and you even saw that when I went to create a style, it defaulted me to
variable and we had to switch over.
Styles and variables are very similar.
Variables are also a way that you're going to be pulling your colors.
right now in 2023, October, we don't have text variables.
So that's one key difference.
If you wanted the style effect, you'd have to use styles with text.
That is something that's coming in variables, but as far as colors go,
why you might use one over the other.
Variables allows us to do something called aliasing, which basically
means if I create a variable here, I'm going to create a color variable.
I'm going to call this, let's go back to, let's go back to our reds.
We'll call this our red 100.
And then if, and you see it did the same type of thing as it grouped it here.
If I were to create a whole different collection, so don't even worry
about going into deep about this.
I'm just showing you how that can do that aliasing.
If I created another color here and wanted this specifically to be maybe like
a button color, so button, background, I can pull that red 100 color in.
So basically what that means is if I were to ever change that red 100 color, so
let's pop over here and just make it like a much lighter red, it is now changing it.
In my button background here.
So this is, this is how a lot of developers work.
They're having these variables that are aliasing from one another.
It can be super helpful if like you do end up changing the hex
code, it'll change everywhere else.
So that aliasing is really key for variables and is not
something you can do with styles.
Something that you can do with styles, though, is how we saw at
the beginning of this, how I had the option to layer something.
So when I hit this plus, I was adding on here or however it might have been.
That we can create that whole thing as a style.
So it has, we have multiple properties here and I can create that as a style.
So that's something that you can do with styles that you can't do with variables.
So either one of them works.
I think styles are I think going to be really helpful for folks
who are just starting out, but variables can be really great and
really helpful as you get into it.
And as you start to align a little bit more with your development teams,
that can be really helpful there.
That makes a lot of sense.
And so for our lightweight prototype, we'll probably stick with styles.
I'll stick with the basics here, but it is helpful to know what variables are
since we've been talking about them.
And again, how our designers might be using them to create these
more complex systems for our team.
Absolutely.
With that, I think we've covered everything for today.
So we learned about what are styles.
Why do we have styles for things like color and text and also the
other options that are available, how to apply those styles that exist
from our libraries or from the local styles that we've just created.
And then how to set up those local styles that we might want to use.
And then we briefly touched on variables.
So I think we've covered the basics of styles and variables.
Again, like everything, Lauren, there's a lot more we can dig into here.
But I think you've given me what I need to go and apply this.
to my first prototype, and get it set up in a style that looks good.
Amazing.
In a style that looks good.
Ha ha!
Get it?
Love that.
Okay, well, we'll be back tomorrow to talk about shapes and images, and then
I'll start putting it all together in our first homework assignment.
Yay!
Exciting.
Thank you so much, Lauren.
You bet.
See you soon.
Bye.