Figma Design Best Practices (Auto Layouts, Components, & Tokens)

0:00:00 Hey everybody, welcome back to the channel.

Today we are going to be working inside of Figma. I think this video is going to make a lot of people happy.

I’ve been getting message after message from people asking if I can do more Figma tutorials, if I can explain auto layouts more, if I can talk about components and scalable maintainable design inside of Figma, if I can talk about automatic CSS tokens and tokenized styling and not just those things by themselves, but how all of those things combine together within a professional workflow inside of Figma. And this video is going to tie all of that stuff together for you.

I’m going to go slow. I’m going to take my time.

I’m going to explain everything that I’m doing. I’m going to go ahead and share my screen and we’re going to take a look at exactly what we’re going to be building.

We’re gonna be building this from scratch, and what you’re looking at here are some blog post cards, but these are component cards, so I have global control, one source of truth over the structure of these components over these blog post cards. I have the ability to iterate on them, like for example, these category badges can come last instead of first, or in this iteration, the image can actually come after everything else aside from the footer.

And this represents our ability to give clients variations in the design to see what they prefer without creating a gigantic mess and without a lot of additional work. Honestly, I’m gonna show you how to make this extremely efficient.

And then of course, as I’ve mentioned in the past, these iterations persist. So if the client changes their mind multiple times, we always can see what was proposed.

We can always go back to a previous proposal. And then because all of this styling that you’re looking at, like the colors, the spacing, the typography, everything is tokenized.

I I have a single source of truth for the entire design of these elements as well. In fact, I can tweak and adjust the design after the cards are already done.

I have total control here. And this is the workflow that I want to show you in this video.

We’re going to rebuild exactly what you see here. So the first thing I’m going to do is I’m going to go create a brand new design file, and we’re going to call this blog post cards.

And this is not a full website design file, but it is an example that gives us the opportunity to look at many, many, many different best practices inside of Figma in a streamlined fashion that’s going to just unlock a lot of stuff in your brain. Okay, if you have been stuck inside of Figma or you didn’t know, understand the power of Figma, this is going to unlock a lot for you.

It’s gonna open the door for you to go in and just get a lot of really important stuff done and be more scalable and maintainable in your design workflow. So the first thing that we’re gonna be doing is, everything that we do in terms of styling is gonna use automatic CSS tokens.

Tokenized styling is extremely important. I’ve talked about this in web design, whether you’re working in page builders or a code editor, or, you know, it doesn’t matter.

It doesn’t matter. Tokenized styling is very important.

I also want to say this. I’m recovering from WordCamp US, and I need to remind myself to tone it down a little bit in this video.

I can’t have as much energy. I can’t talk as loud as I normally do, because my voice is very sensitive.

It’s like in recovery mode, and if I talk too loud, I get too aggressive, my voice is gonna go out. And I wanna get through this video, so just a reminder, tone myself down a little bit.

You’re gonna see more of like, let’s say, library Kevin, okay, maybe a little Bob Rossage in this video. I just gotta remind myself to contain, contain, okay, tone it down a little bit.

What we need to do is we need to install automatic CSS tokens. And what this is going to take care of is everything styling wise, like typography, color spacing, it’s already taken care of for you.

It’s already pre done. And you might say to yourself, Kevin, that sounds bad.

Like I like to do my own styling thing. It’s all editable.

That’s the thing. It’s just all the tokenization is done for you.

You still have full control over all the values of the tokens, but you don’t have to do the legwork to create all of the tokens and get everything set up. And when you’re editing, of course, it’s very easy to edit.

And when you’re styling, it’s very easy to style because you’re just choosing t-shirt sizes for things. You’ll see what I mean as we go.

But the first thing I need to do is install automatic CSS tokens. So I’m going to hit command forward slash, and then I’m going to pull out something called tokens studio for Figma.

And all I need to do is import my automatic CSS tokens file. Okay?

So I’m just gonna say new empty file, and then I’m gonna go down here to tools, and I’m gonna say load from file folder or preset. I’m gonna choose a file here.

I’m gonna scroll down and choose automatic CSS tokens. Go ahead and import that, and that’s all I have to do.

So now automatic CSS tokens is installed in this design file. I’m reminding myself right now, tone it down Kevin, bring it back down, let’s talk a little quieter, go into Bob Ross mode, okay?

All right, I can already, my voice is already vibrating a little bit. All right, so what we’re gonna do, now that we have tokens installed, is we’re just gonna close that for a minute.

Tokens are ready to go, but we don’t need them yet, all right? I wanna start by talking about workflow in Figma.

It’s different from in a page builder. In a page builder, I’ve talked, and go watch my page building 101 series if you haven’t watched that yet.

It’s absolutely phenomenal. Like the amount of comments that I’ve gotten about just blowing people’s minds on the way that page building 101 will elevate your game.

But I talked about grouping associated content in web design is very important. And you group things in divs or blocks or containers or what have you, right?

Well, in web design, you have to add those containers first, then you add the things to the containers. But in Figma, Figma is much more like a canvas.

Like, for example, I can add something like a blog post heading, right? And I can just, look, I can just do, I can throw it around, I can do whatever I want with it, okay, I don’t have to put it in a container.

We’re not building everything with boxes in Figma. Even though it is gonna get very similar, it doesn’t really start out that way.

You can literally just throw stuff on a canvas, okay? So I’m gonna hit T again on my keyboard.

That gives me the text tool. So I hit T and I click and then I can just type text and I can say something like, this is the description of the blog post, okay?

And we can just go with that for right now and you can start to see how I have a heading and I have a description. And these two things are essentially gonna be grouped together at some point.

Right now I can select each one and I can move it wherever I want. If I select both of them, which again, you can’t even really do this in a page builder, right?

You can’t just throw things on the canvas and then select them. But you can do this in Figma.

Now, when I do this in Figma, I have two options here. I’m gonna right-click just to show you my two options.

Really I have three options. I can group the selection, I can frame the selection or I can add an auto layout.

And if you add an auto layout, it’s going to frame the selection, but with a special kind of frame. What we want to do is use auto layouts for almost everything.

Auto layout for almost everything. And you see the shortcode right here, the shortcut is Shift A, Shift A creates an auto layout.

So I have nothing selected, I’m gonna select these two items, hit Shift A and you see it framed it, but it framed it with a special frame. This, an auto layout, think of an auto layout as a flex box basically.

So if you’re in the web design, web development world, you know what flex box is. So and you can see over here when the auto layout is turned on, I have all of these controls.

Let me go ahead and undo the auto layout. I want to duplicate these elements right here and I’m going to show you side by side.

So these two shift a are an auto layout. These two I’m going to say group selection.

Look now, in terms of moving these things around, both of them, oops, if I grabbed the frame, both of them are grouped. Okay.

This is grouped content in both cases, got it? But one group is special.

This group right here, I look over here, no controls. I have nothing I can do to change the flow of the content, the spacing between the content inside.

You do get a little spacing handle right here, but that’s individual between every piece of content, it’s very manual. Whereas over here, I have these controls here.

I have gap control where I can gap automatically. Let me put a 30 in.

It gaps content, regardless of how much content is in there. See, I can come in here and I can say 20 and it’s just like in flex box.

It’s giving you gap control. You also have padding control, top and bottom, left and right granular, all four sides.

You have the ability to position content like I can position to the center to the right top right bottom right and it’s going to depend on the width of the child elements obviously but this works just like Flexbox I even have the ability to say space between just like you do in Flexbox I’m not going to go over everything right here I just want to make sure that you understand you should be using auto layouts for almost everything I almost never just group content, and I almost never just frame content. I’m almost always using auto layout.

And the fact that I can, let me go ahead and kill these two things, all right? So I’m gonna hit T, and I’m gonna say this is a blog post headline.

And then I’m gonna duplicate that, that’s Command D duplicates it. This is the blog post description.

I’m gonna go ahead and start creating the actual card now. Because I can select things and auto layout them and I can do this for multiple items, I can just throw things onto a page.

You can group things after the fact in Figma, whereas in web design, you have to group things ahead of time, okay? So I’m not even gonna auto layout these.

I’m just gonna leave them as individual components. I’m gonna throw in another one here, and this is gonna be called the category.

This is the label for what category is the blog post in. The next thing I’m gonna do is I’m going to add an image.

So if I click on this down button right here, you see I have the ability to place an image or a video. I’m gonna go ahead and do that, and I’m gonna choose one of these that is a blog post image.

And right now it’s wanting me to place the image. Look how it’s stuck to my cursor, right?

It’s fun, I get to just draw the image onto the page, which is really, really, really cool. And then I’ll put that right there.

And you can see my blog post, like the structure, the building blocks of a blog post taking shape. The next thing that I wanna do is I wanna add an avatar for the author, and I’m gonna use a different technique to do this.

I am gonna use just a frame. So I hit F on my keyboard, and that’s going to draw a square.

Okay. If you don’t hold shift, if you hit F, you can draw whatever size frame you want, right?

But if I hold shift, I can draw a perfect square, which I want for my avatar. And then what I can do is I can fill the square.

Why is that on there? Okay.

We don’t want that on there. Um, I can fill the square with an image.

So I can come over here, instead of using a color, I can just use an image. I’m gonna hit choose image, and then I’m gonna choose one of our avatar people.

Let’s use this guy right here. And look, it puts in his avatar.

And then I can come up here and I can say 50 on the radius and it’s gonna give me a perfect circle. So now I’ve got an author avatar in there and I can actually control the size here.

Let’s go with something like 50 pixels. That looks pretty good.

And then I’m gonna hit T again on my keyboard and I’m going to say author name. And then I’m going to duplicate that.

I’m going to bring it down and I’m going to say that this is one hour ago or 12 hours ago. Okay.

So this is like when was the post published in human readable time. And then I want to take these two items and I want to just put them right there.

Okay. So they’re going to kind of go in a footer type situation with the author avatar here.

Okay, guys, I’ve created the general structure of my blog post. Now what I need to do is go back to the principle of grouping associated content, and I’m just gonna group them in auto layouts.

So I wanna take these two items, because they belong together, and I wanna shift A, auto layout those. Then I wanna take this auto layout that I just created, which again is a group of content, and I want to select the avatar next to them, and I want to shift A again, and that’s going to auto layout those.

So I have an auto layout group of these two items in an auto layout of all of the items, right? And what that’s going to do, notice what Figma does, it’s very important, when you auto layout flow to match what you’ve already done.

So it automatically set this layer. It could have done this.

It could have said, make it a column, but it didn’t. It said, well, that content’s already next to each other.

So let’s just keep it that way. And it also auto sets the gap to whatever you already had as a space between the elements.

This may not be the gap you want to ultimately go with, but it gives you that as a starting point because you already had it. It’s trying to maintain what you’ve already started to do.

So now I’m gonna take these three items and I’m gonna Shift A, auto layout those. This is gonna be like the body of the blog postcard.

And then I’m gonna take the image and I’m gonna Shift A that, and I’m gonna add an auto layout to that. That’s going to be like if you were developing in a page builder, you have a media wrapper, and then you have the media inside of it, okay?

And now notice that sometimes when you auto layout individual things, it adds a little bit of padding by default. You can just come in and clear that out, or zero it out, whatever you want to do.

Zero looks like is the best. And then I can zero out the gap as well.

Now I’ve got an auto layout up here and this is where we need to look at our structure panel. Just like in a page builder you have a structure panel in Figma.

I’m gonna make sure that I don’t have the finder open which is command F is a fine and it kind of covers up where the structure panel is so I just close that and here is the structure panel for my structure right here and if I click on this you can see what’s selected okay right there it’s selecting that whole author area that’s kind of like my footer. So I’m gonna say that this is my footer, and then I’m gonna select frame five, that’s my media wrapper, and then this is gonna be my body wrapper, okay?

Then if I open the body wrapper, I’m gonna see a category, a blog post headline, and then the post description, that’s all fine and dandy. If I open this, I see the media, and I can just rename this to media.

And then up here I have the author name, the time, the published time, and then here I have the avatar. So I’m gonna say that this is our avatar.

So more or less I have a bunch of auto layouts, yes, but I have three main auto layouts that are part of this component. I have the body, the media wrapper, the body wrapper, and the footer, okay?

Now what I can do is select all three of those things and put them in an auto layout together because they do need to be grouped, right? So I hit Shift A, puts them all in an auto layout together, and this leaves me with one main auto layout card, which is not a component yet, but we’re gonna make it a component.

So I’m gonna call this blog post card. And so if I open blog post card, you see there’s my three wrappers.

I open the wrapper, I can see what’s inside of it, just like in a page builder. The difference is I didn’t add all the wrappers first and then the content.

I added all the content and then used the content grouping to create the wrappers, the auto layouts that are going to manage the flow of all of this content and the structure of all of this content, okay? If that doesn’t make sense to you for whatever reason, hit pause, go rewind, watch that section one more time.

Just maybe watch it a few times in a row until you understand exactly what is happening because this is the most efficient way to work in Figma. You can absolutely work in the page builder fashion.

I could add a frame, I could add things to the frame, I could add all my containers, then add content in the, but it’s a little bit messier, okay? The way I just showed you is the cleanest way to go about this.

Now what I’m gonna do is I’m gonna start styling the card, and here is where we’re going to use the tokenized styling workflow, using automatic CSS tokens. Normally what you will see people do in Figma is they select things, they go over here into the panel, they start adding all these values in here, they start adding in their colors, they have to kind of create presets as they go to kind of manage everything and it’s a lot of work, it’s a lot of time, it’s a lot of decisions that you have to make.

Remember what I installed before we started automatic CSS tokens All I have all the work is already done for me I just have to use the tokens for everything that I do and I have to use the tokens in a logical manner I don’t even care right now what the values of the tokens are I just need to know what tokens am I using based on their name and make sure I’m using them in a logical fashion For example, wherever I need medium spacing, I use medium spacing. Wherever I need smaller spacing, I use small spacing.

Wherever I need something to be large text, I use large text, small text is small text. And as long as I’m using everything logically, I can actually adjust the values of these tokens at any time.

Even after I’m completely done with the design, it’s insanely flexible. I always have global control over everything that I’ve styled, much like when you’re using classes in web design.

This, this is, this is the workflow game changer guys. Okay.

And that’s what I wanted to demonstrate for you right here. Okay.

So the first thing I’m going to do is we need to talk about when you’re creating auto layouts, the widths of elements and how they behave when they are children of other auto layout items. Look at this blog post body right here.

It’s what’s called hugging the content. It’s only as wide as the content, okay?

What we need to do is understand what hug versus fill does, okay? A lot of times you’re going to want to use fill.

There’s going to be some situations where you use hug, a lot of times you’re going to want to use fill. Like in this case, okay?

I want this box to extend all the way to the edge of its parent. So what I’m going to do is change this from hug to fill and you’ll see that’s exactly what it does.

Then I want to look at each of these items right here. Notice it’s set to hug.

These should be fine. Okay.

For right now, hug is fine. What you want to avoid is fixed width because if I say fixed width on this, let’s say fixed, right?

And I keep typing. So I’m just going to type, type, type, type, type, type, type, type, type, look at how it’s not it’s just staying that width And look if the fixed width goes bigger it breaks the card Fixed width can can be very very very problematic in auto layouts, okay?

So what I would highly recommend is check to make sure nothing is set to fix Now I’m going to select my footer right here and say that this needs to fill the container as well And then I’m just like my media wrapper and say that needs to fill the container. My media itself.

Ooh, look at this. I found something that is fixed width.

That’s a problem. I need to set that to fill the container.

And then you’re saying, wow, everything just got smaller. It’s because my blog post card doesn’t have a width on it.

It’s just set to hug things. This is the item where I actually need to have a width of some sort.

Okay. So I’m going to say that this is going to be a fixed width and I’m going to set it at a 450 seems a little aggressive.

Let’s do like something like 360. Okay.

Okay. So now I have my blog post card is 360 pixels wide.

Everything inside of it is just filling the container. That’s exactly what I want.

Notice that there’s gaps between things. Okay.

I’m going to go in and zero out the gaps just so that we start out at a completely clean slate And you can see this be built up from scratch from the ground up using automatic CSS tokens The first thing I’m going to do is add a background color to my blog post card I want the black the background color to be white even though it’s simple and something like white I still want to use tokens. So here’s how I use tokens.

I’m going to hit command forward slash. It’s going to bring up this quick search palette.

And if you’re using token studio a lot, it’s going to be right there as a recommendation and you can simply open it. Okay.

So it’s going to open token studio. I’m going to collapse the sidebar.

And this is just going to sit here. This is all of my tokens.

Now the good thing is they’re searchable, right? So I can use the search box if I already know what I’m looking for.

I just type the name, it’s gonna find the token, and then I can use the token, it’s all good. You’re gonna see the workflow start to take shape here.

I want the color white, so I’m gonna type white and it’s right there. If I hit white while this blog post card is selected, it is going to apply that to the background automatically.

I just left clicked and it already knows this dude wants this to be the background color. Now I’m gonna hit Command Z and I’m gonna go back to search white.

So I have my blog post card selected. I’m going to right click, and if I right click, it’ll ask me where do you actually want to apply this?

Like, do you want it to be the border color? Do you want it to be the fill color?

There’s no other options though. Those are the only options right now.

If there were other things happening with this card, there might be other options, but there’s not much happening with this card yet. So I’m just going to say, yeah, we’re going to use that as the fill, and it sets it as the fill.

Now I’m gonna take a minute, I’m selecting my canvas, because I don’t want this to be light gray, this canvas back here, I would prefer it to be very dark, so that we can better see what we’re doing. So that’s how you can set the color of your canvas in Figma.

All right, so now I’ve got a white background color, I wanna deal with my spacing first. So I’m gonna grab my body wrapper right here, and I know that I need medium spacing for this card.

So what I’m gonna do is type in space and then I’m gonna say M. And I wanna explain this token situation, okay?

You see D space M. This means on desktop, this is our desktop medium spacing token, all right?

So we’re working on our desktop design right now. So I want medium spacing based on my desktop design, okay?

So I’m just gonna click this and if I click it, left, click it, it’s going to apply it as the gap between these items. If I right click it, it’s going to say, where do you want the spacing?

Right? Gap is the default for where the spacing is applied.

If we right click, we get to choose where the spacing is applied and you see top, right, bottom left is going to apply this to the padding of this container, which is exactly what we want. I don’t want it in the gap right now.

Okay. So I’m going to say top, right, bottom, and left.

And look at how it’s just filling this, I don’t need to go over here and search for, oh my God, where do I put the padding, where do I, it doesn’t matter. Tokens are doing everything for me, all right?

Tokens and Token Studio doing everything for me. So now I have my medium spacing in here.

Next thing I’m gonna do is I’m gonna grab my footer. Now, notice that Token Studio stays open, okay?

It’s on the exact same panel I was just on. So I know I want medium right and left spacing to match what we’ve got going on in the body here.

So I do say right and left and look at exactly how it’s matching perfectly. But for top and bottom, I want something different.

I want XS. Okay, so I’m going to search for XS.

There’s the token, right click top and bottom and I get extra small spacing on the top and the bottom. That’s exactly what I want.

Now what I’m gonna do is I’m gonna work on my typography. I’m gonna grab this blog post headline right here and I’m gonna search for H3 because I want this to be my H3 style, my heading three style.

And you see right here, DH3, I can left click and immediately I get a heading three style. I don’t have to go over here and all these panels and decide all these things.

I just say, it’s all done for me. I just say I want my heading three style.

Does this mean my heading three has to always be that size and look like that at all? No, no, I can change this at any time.

But I’m limiting my decisions right now. I just wanna get my design going, right?

Okay, so now I’m gonna come over here and the blog post description, I’m gonna say that this is going to be text M. And I want my D text M, I’m gonna left click and it’s gonna give me D text M.

But actually I’m thinking now, you know what, this would actually be better if it was smaller text because text M for a blog post card may be a little bit big. I want smaller text.

I’m just gonna switch this to text S, okay? And I actually want to go to website Ipsum over here.

Let me pull up a, there we go. I’m gonna go to website Ipsum, and I’m gonna grab us a much longer description here so we can put something more substantial.

Oh, look at that. Now, this shows you hug versus fill.

This is set to hug, and it’s like, all right, dog, I mean, you told me to hug the content. I’m hugging the content.

Nothing’s forcing this content to wrap, so I’m not gonna wrap it. If I change from hug to fill, watch what happens.

There you go. That’s exactly the behavior that you wanted, right?

That only works because we’re in an auto layout, by the way, okay? Now what I want to do, I’ve gotten this category badge.

I need to go text maybe XS on this category badge. Perfect.

And that’s it. Now I want to deal with colors, okay?

So I want this footer right here to have a background color that is my website’s primary color. So I’m going to pull up primary, but I want it to be like an ultra light shade.

So I’m going to click that. What’s it going to do?

It’s going to fill that auto layout with the color that I just chose. Again, this is all done for me.

And you’re like, but Kevin, that’s not the brand colors that we’re going to use, right? I don’t, I mean it doesn’t really matter.

We can make up our own brand colors, right? But like I said in the beginning it doesn’t matter I can change this stuff at any time I just know that I want this to be the ultralight version of whatever brand color we are going to use as our primary color and I could use accent here I could use whatever whatever makes the most sense to you everybody kind of has a different um naming convention for how they use things uh then I’m going to go up here to the category and I want this category to be like a badge that matches this color down here.

OK, so in order to do this, it’s just one item, one element. I could change its background color here.

I’m actually going to auto layout this element as well, and I’m going to. I’m going to show you why in just a minute.

OK, so I’m going to shift a that and then I’m just going to choose the ultra light and bam, it’s going to give me exactly that. Now I could use tokens here for spacing.

There’s D space XS. Let’s just right click that and say top right, bottom and left.

But notice that XS is, it’s too much, even though that’s the extra small spacing, it’s too much for what we’re doing right here with a badge. Here’s where you have to understand, you don’t have to always use tokens, okay?

You wanna use tokens as much as possible. But you can also go rogue, right?

So if the token’s not getting the job done for you, I can come over here to the main padding values and I can say, all right, on the left-hand side, we’re gonna go with 12, on the right-hand side, we’re gonna go with 12, on the top, we’re gonna go with six, bottom, we’re gonna go with six, and that’s gonna get me more of like a little badge kind of thing that I’m looking for. Okay, so I’ve got the colors.

Actually, no, I only got the background colors to where we want them to be. I need to get all the text color to where we want it to be now.

And here’s what’s cool about having all of these shades and transparencies already available to you. The background of this badge is primary ultra light.

It would be awesome if I used like primary dark for the text because they’d be in the same color family, right? So I can go back over here and I can type in primary and I can just choose dark and it’s going to make that text dark.

Same hue, right? Just a different lightness value.

Then I come down here and I’m going to grab both of these elements right here. So I can hold shift and select multiple items, which you can’t do in a page builder.

And then I can just click the dark token. It does the same thing to those.

In fact, I can just grab this one right here and say, you know what? I actually want that to be dark, but I want it to be like a transparent version of dark, and it can drop it down to like 70%, something like that.

Then I can come in here and say, what do I want as our gap here? Do I want zero?

No, I clearly want a gap here. Maybe something like XS would be good.

So I’m gonna go space XS, there’s D space XS. If I just left click it, it’s gonna gap those elements out for me.

Oh, look at that, it’s actually a little much. I’m just gonna go in here and say half of that.

We’re gonna make it a six, okay? And it’s not tokenized styling, but that’s okay.

Because again, I have another means of controlling all instances of this card, which we’re gonna look at in just a second, and that is the component functionality, which is very, very critical. Right now, I’m just trying to get the style down.

Then we’re gonna easily be able to make this a component. All right, so for this headline right here, I’m gonna go to our base colors, all right?

I’m gonna choose my base ultra dark for this, and then for this one, I’m gonna choose, and notice it all stays up for me ready to go, I’m gonna choose like the 70% transparent version of my base color, and check that out. I mean, we’re getting a nice contrast coming in, everything is looking good.

Now I wanna do radiuses, okay? I want a border radius on my blog post card, a radius on this badge.

Let’s take a look at how to make this happen. So I have tokens for this.

They’re called rounded tokens, okay? And I can say on my blog post card, we’re gonna do rounded M, which is gonna give me medium radius on my card.

Now, here’s the thing about auto layouts and content and figma and stuff. Just like in web design, you have overflow, okay?

So if containers are overflowing other containers, you might not see the rounded corners that have been added. But if I just check this box right here, clip content, that’s like saying overflow hidden in web design.

And so suddenly you see the rounded corners that I added to my card. So the edges of that box were covering up the rounded corners, the edges of this image, we’re covering up the rounded corners, but the minute I clip content, now I have my rounded corners, okay, exactly as I want them.

And now we’ve got, guys, a very, very clean card coming into play here. And all I’ve been doing, what have I been doing?

Just hitting Shift A a bunch, using auto layouts to group content, and then I came in here and just used a bunch of tokens to style everything, and I’m gonna show you exactly what I mean about having global control over all of these values even after a design is done. It’s mind blowing, it’s phenomenal, okay?

All right, first thing I wanna do here is I wanna put a stroke or a border on this image right here. And it’s gonna be a one pixel stroke, that’s fine.

And I’m gonna go up and I’m gonna choose my primary palette again. And I’m gonna say that maybe primary, ultra dark trans 70.

And if I right click, I can say, apply that to the border and look, that’s exactly what it does now. In fact, just so we can see colors working better, maybe, Oh, I do not want to feel that.

Let’s let’s try that again. I want to right click this and hit border just so that we can see the colors at work, right?

So there’s the primary color. It’s a little bit brighter.

Maybe I can make this like a two pixel border instead, just to make it a little bit more prominent. And that way when we do color changes in a minute, when we see how easy it is to theme things after a design is done, you’re going to see that change a little bit better, okay?

Maybe I can do the dark version. Maybe that’ll match a little bit better.

I don’t want it to look whacked out in our design. I think that looks pretty sharp.

That looks pretty, pretty good. Okay.

All right. So I’m going to come in and I’m going to say that this is going to be a medium text.

All right. The last thing I want to do before I forget is to round the corners on this label right here.

So I’m going to go ahead and choose, I’m actually going to choose XS rounded for this one. And it’s going to give me extra small radius on that badge right there.

Okay. I’m pretty much done with the design now.

So I’m going to go ahead and close Token Studio and now we’re going to talk about components, we’re going to talk about grids, we’re going to talk about global control over everything that we’ve done so far. So what I want is, let me just duplicate this a couple times, and I want to show you a problem that we have.

See all the styling that I’ve used for this cards are tokenized, which means I have global control over them. What I don’t have global control over is the actual structure of the card.

For example, if I decide that I want this badge to come last, I can drag it down, but look at the other two cards that are here, and this could be 40 iterations of this card. It doesn’t happen to those things, right?

I would have to go do that manually to every single instance of these cards. If I wanted to move the image, right, the media wrapper, let me collapse these so you can see them better.

Let’s say I wanted the media wrapper to go right above the footer. And we can create a blog post card like this.

That only happened to this one card. It’s not happening to all of the other cards.

I don’t have global control over the structure of my elements. I want to though.

I need to have that. So I’m going to use components to do this.

I’m going to delete these two. And what I’m going to do is I’m actually going to take this.

I’m going to show you now how to better organize your file. This is my approach.

You can make your own approach if you want to. Other people may have a different approach.

I add a page called components, and this is where all of my components live. I’m going to copy my blog post card, and I’m going to delete it.

I’m going to go to the components page and I’m going to paste it. There’s my component right there.

I’m going to switch this to 100% and there we are. So I have the exact same thing just on a different page of my file.

Then this page right here is going to be my design. All right.

So I have my components page. I have my design page.

I’m going to go to my components page. I’m going to select my blog post card and I’m going to make this a component.

Now there’s a lot of stuff going on with components. There is a lot of, it can be very complicated.

It can be very simple. It really depends on what you’re trying to achieve.

And thankfully with what we’re doing right here, we only need simple component functionality, okay? So I’m going to go ahead and click this button right here, the magical create components button, and it’s going to turn this into a component.

You can see it’s a component because it’s purple and it has this little component icon. And when I select it on here, it’s purple.

And that’s just letting me know, Hey, this is a component now. And something special happened when I did that.

I’m going to go to my design canvas. Okay.

And I’m going to click on the assets tab and you’re going to see, look at this. There is an actual component right there that I can just drag onto my page.

And you’re gonna notice some really important things about this. Watch, I’m gonna duplicate it.

All right, I’m gonna bring this over here. I’m gonna duplicate it again, and it puts them all in a nice little row.

And then what I’m gonna do is I’m gonna go over to my layers, I’m gonna go to my components page. I know it’s on my components page, right?

Let’s say you have a bunch of components going on in a file and you’re like, how do I get to this main component to edit the main component? I’m gonna show you a little shortcut here.

Right click it, down here, go to main component, it’ll take you right there. It’ll take you right to the parent component that controls this.

Now watch, very important. I’m gonna grab that label right there, I’m gonna drag it down here, I’m gonna let go.

Then I’m gonna go to my design page and we’re all gonna look at how that badge on every instance of this component move to the bottom. Okay?

This is so absolutely fantastic. Now what you may be wondering if you watch my other videos on web design and components and how components should behave in web design versus how they actually behave in most page builders, you’re thinking to yourself right now, can you really make unique content in all of these things without detaching the component functionality and my friends and Figma, the answer is yes.

Watch how easy this is. I can just double click this and say a blog post number two, and I can actually swap this photo right here with any photo I want.

Let’s use this one. So I have created a unique card, and I can actually say that this is, um, this is here to fill up space.

We can just cut that off right there. Look at that.

I have a completely unique content, and the question is, what happens if I move that badge back to the top in our main components? I’m gonna go over there, drag this back to the top, come back, look, it’s changed in all of them, even the ones that have unique content.

This is phenomenal stuff. This is total control from one single source of truth over all of the structure of my component and then my tokens give me global control over all of the design aspects of my component.

I am in full control, full command right now, my friends. I am not living the chump life, okay?

All right, you’re not gonna catch me dead doing a bunch of manual labor inside of Figma file, no sir. I’ve got tokens, I’ve got components, I’ve got auto layouts, I’ve got badassery.

That’s what’s happening inside of Figma right now. All right, so what we’re gonna do, and we’re not done with the components, okay?

I wanna first make a grid, then we’re gonna come back to the components for just a second. So all I need to do to make a grid is I’m gonna grab these three elements, Shift A, and I’ve now created my blog post grid.

I’ll name it right here, blog post grid. It’s got all my blog posts in it.

I’ll collapse those so you can see three blog posts in a blog post grid. Notice it’s set to row right?

There is no grid in Figma. It’s you’re using Flexbox more or less okay?

But notice it already set it to row because I already had them in a row so it’s trying to match the existing behavior. The only thing I need to do here is change the gap because I need to use one of my tokens okay?

So command forward slash open token studio gets my, my tokens back on the screen. And then all I have to do, I have the blog post grid selected already.

Let’s collapse the sidebar and let’s search for grid gap. Okay.

And you can see D grid gap right here, the desktop grid gap. And I’m going to click that left, click it, just click it once.

And it’s going to set that was a very minor change, but it did set it to my website’s grid gap. Okay.

All right. So that’s good there.

Now what I want to do is I want to make all of these cards equal height. That might be a question that you have.

You’re like, Hey, Hey, Hey, I don’t like that. How, how do I get these to be equal height at all times?

Okay, well let’s grab our blog postcard. I can actually shift and just grab all three of them and I can go over here to their height and say, fill the container, right?

Which gets me equal height cards. However, look at the behavior of some of the elements in here, right?

How do I make sure that this footer thing is attached to the bottom at all times? There’s a couple different ways to do this.

Now in like web design, you would do margin top auto, right? That’s one way to do it.

Some people might think to do flex box space between. You actually don’t wanna do that here or in a blog post card ever.

You want a way to just force this to the bottom. Since we don’t have margin top of auto in Figma, what we can do is take this right here, this body wrapper, and I can go over to my components here and I can go to my body wrapper and I can set the body wrapper to fill container.

And when I set it to fill container, it’s going to try to take up the maximum amount of space. Let me go to our design here.

And you can see that once I’ve made that change, I’ve automatic, I’ve fixed the problem, okay? This body container is trying to fill all the available space, which forces that footer straight to the bottom of the card, okay?

That’s probably the best and easiest way to do this. So now I have a grid, look at this.

And I can move cards around in the grid. So I can just grab this middle blog post, remember that’s number two, and I can just drag it to the beginning and everything reshuffles and reshifts because it’s auto layout.

It’s very easy to work with. You don’t wanna be in a situation where you move this over here, then drag this around it, and then get all the spacing back to be right again.

No, no, no, no. Auto layouts, gaps, tokenized styling, takes care of everything for you.

It makes your life so easy inside of Figma. You can also just grab it and start to drag and it’ll change positions like magic on the screen.

Okay. All right, let’s go back to our component here and let’s take a look at one other thing to enhance this component.

You can actually create almost like custom fields. These are called content properties in a component for all of the unique content in here, aside from the images.

Um, at least I don’t know how to do it with images yet, but all the text based content for sure. So like this category right here, I’m going to select it.

I’m going to come over here and you’re going to see this little area. Okay.

And you’re looking for this icon right here that says create text property. I’m going to go ahead and click that and it wants you to name the property.

This is like the name of the custom field. And then the value is whatever the default value is going to be.

I already put in default values for everything so it’s going to inherit them automatically like that already said category so it puts in category. All I need to do is name this.

This is going to be blog post category. I hit create property.

I click on this headline. I look once again I’m looking for this icon.

Add text property. Create property.

Blog post headline, create property, grab this, hit the icon, create property, blog post description. Okay, I come down here, create property, create property, I’m going to say blog post author, create, okay?

And notice, look at it, once you’ve created it, it’s letting you know, hey, this is a content property right here, okay? Now we’re going to select the publish time.

So I’m gonna select that, create the property. We’re gonna say blog post publish time, all right?

Create property. All right, so once you’ve added all of those properties, you’re gonna select the blog post card.

You can just see them over here on the right hand side. You can actually edit them all from right here as well.

But the key thing here, the really fun thing is I go to the design tab, I click on one of the components right here and I actually see them all as custom fields, which means I can change all that information just by selecting the parent component. I don’t have to click into individual children and edit, edit, edit, edit, edit, edit, and click and click and click and edit and click and yeah, yeah, you don’t want to do that.

All I have to do is come in here and watch this. I can say like hiking is the blog post category.

The number one hike you must take when visiting New Zealand. All right, and then this is gonna be, just leave that.

Kevin Geary is the author. This was published six hours ago.

All right, and look, all of that content just changed. And look how all of my blog posts are responding automatically.

They’re growing to match the height of this one. Then I can click on this component right here and I can say that this category is also going to be hiking.

And then my blog post headline is the best, let’s say the best backpack for your day hiking trips, something like that. And then we’ll just leave the description as it is.

And then author name is author number two. We’ll just say Kayla, okay?

Kayla G, whatever. And then I can actually come in here and I can swap this image without unattaching, without detaching, unattaching, without detaching the component functionality.

I can come in here and just swap out the author. Okay, so you guys get the point.

You see how components really, really, really help us. Now I want to show you how we can go back to the tokens and we can adjust things like colors globally on the fly, spacing, typography, all this stuff.

Okay let’s start with colors it’s fairly simple and easy. I use the primary color for these and so if I change the hue just change the hue of the primary color it’s gonna update everywhere in this file.

Watch how easy this is. Command forward slash, open my token studio again.

So this gets me back to my tokens area. All right, I wanna search for the primary color and I wanna scroll down till I see the HSL values.

If I hold command and click on H, it’s gonna allow me to edit that token. You see the hue of my primary color is 358.

I’m gonna do 193. I’m going to hit save and I’m going to say apply to this page and watch what’s going to happen in front of your very eyes my friends.

We’ve got this stuff changed to a light blue color. The text is dark blue to match it.

Again light blue background back here, darker blue text to match. We have a blue border now around the image.

Everything that was using the primary colors, whether it was a shade or a transparency or what have you has now updated. Look at how fast I can theme things.

Look at how fast I can make changes on the fly. So let’s take a look now at how I can like tighten up spacing, loosen up spacing, change my typography.

I have global control over all of these things. Let’s start with spacing.

So I’m going to go with spacing settings and that’s going to open up the tokens that control all of the things that are happening with our spacing namely our base spacing value and our spacing scale so this is where I can tighten up or loosen up all of our spacing based on a base size changing so if I change the base size every size will change according to the the same number right and then if I change the scale, this will actually change the ratio or the degree of change between sizes, right? So the spacing scale by default is 1.

5, which means that large, like large gap or large spacing, is 1. 5 times M, which is 1.

5 times S, which is 1. 5 times XS.

So if I make this number smaller, then the degree of change between each size is going to get smaller. All the sizes will be closer together.

If I make the scale bigger the variance will get greater. Okay I’m not going to mess with the scale right now.

I’m going to mess with the base because that’s the easiest to understand. I’m going to command click this and I’m going to change this from 30 to 40.

And what this is going to do is all of my spacing whether I use grid gap or content gap or space M or space L or space, it doesn’t matter. It’s all going to get bigger.

All of it is going to get bigger. So I’m going to hit save and I’m going to hit apply to page.

Watch our spacing over here. 0:47:47

Look at that. 0:47:47

So I got more padding in here. The gap changed a little bit.

Everything changes according to the same, um, to that change, right? 0:47:55

All right. 0:47:56

So now what I’m going to do is I’m going to right click this edit token. I’m going to put this back at 30.

Actually, we can try 20. Let’s just tighten everything up.

Hit save, hit apply to page. Look how everything tightens up.

Okay. Um, and I can just dial this in with my base spacing and say, you know what, man, maybe like 24 is going to be the best value apply to page and look, so I’m dialing in my spacing.

Let’s do this with our text. So I’m going to say typography, uh, settings, and this is going to open my typography settings.

So here’s my base heading size my heading scale my mobile base heading size my mobile scale Desktop base text size so that’s my regular text like in here Let’s go with that our headings right so base heading size I’m going to edit and let’s make this 24 and watch what happens to our h3s Look how they get much much much bigger right. I’m gonna go edit token I’m gonna drop this down to 16 I’m gonna hit save.

Remember this is changing all heading sizes 1’s, 2’s, 3’s, 4’s, 5’s. I can override the 3 all on its own if I want to but right now I’m making changes to everything.

Notice I’m making these changes after we’re done with the design. I’ve already finished the design and I’m just making these changes on the fly.

My auto layouts are responding, nothing is breaking. It’s really, really, really phenomenal stuff.

Okay, so we have taken a look at how to, from scratch, build all of this component-based functionality, tokenized styling. I wanna show you one last thing, and this is how do we give the client various design iteration options?

Or maybe the client comes to you and they say, hey, I like this blog post card, but I want to see a version, I think it would look really good if the image was actually down here above the footer. Might not sound great, right?

But they’re like, I just think it’ll be a good variation. Okay?

So you’re like, hmm, all right, how do we do it? Because in development land, I mean, you’ve got to change everything that you built.

Right? Change the values of the classes, because you don’t want to create a mess, right?

So in Figma, this isn’t a problem though. I can just grab my blog post grid and hit duplicate.

Let me zoom out here. I’m going to drag this blog post grid down.

So it’s below our other one and we’re going to say this is blog post grid option, not three. That doesn’t make any sense.

Option two. Okay.

Let me zoom back in. So here’s option two right now.

I’m going to click, click, click. I’m holding shift so I can select all of them.

Right click, look at this, I’m going to detach instance. I have detached them from the component functionality and now I can change them manually.

And what I’m going to do is grab the image, grab the image layer, grab the image layer, and I’m going to drag, okay. And I guess I did not grab them correctly.

Let me go ahead and media wrapper, let’s see, blog postcard, here we go. Media wrapper, hold shift, and we want media wrapper, and where’s the third one?

Blog post card, ah, here it is, media wrapper. Okay, so now I have the media wrapper.

I can actually use down on my keyboard, and I can just move them like this, okay? Now, let’s check out and see what’s going on here with our, okay, so we have auto spacing going on with our gap, let’s go ahead and set that to zero.

Okay. And now we want that to still be in effect.

What we need now to have happen is these two items are going to fill the container and then the images that are actually inside of them are going to fill the container as well. We don’t want any of this stuff to be fixed height, fill the container.

Perfect. Okay.

And that’s pretty good. And this is what you have to do to get everything to stay in alignment with this particular layout, right?

Because this area obviously has to grow. This area can’t grow.

Um, so the image has to change size, which is fine, whatever, I guess. But now we’ve given them a completely different option and we can even point out, you know, how this is going to, it’s going to require maybe different image heights or something we can probably get this to work without changing the height of the image but I’m just doing this is a very very quick example all right now I want one more iteration so I’m going to come up here I’m going to duplicate my blog post grid again I’m going to drag it down here let’s zoom back in and see that you’re just moving so quick you can’t move like this in in a development environment.

I’m gonna go ahead and click this, blog post grid. We need to select each card in the grid.

So let’s select that one, and that one, and that one. And I’m, well, hold on, why isn’t it selecting?

Here’s one, two, three, there we go. Okay, detach instance.

And then I just wanna say, like, what happens if I grab these labels right here for the categories. Come on buddy.

And then just bring them down here. Just like that.

And that could be our third blog post option. So I can say blog post grid option three.

Alright, so we’ve got an option two that looks like this. We’ve got an option three that looks like this.

Got an option one that looks like this. Now I can get on a call with the client and I can say hey, which one of these do you like the best?

And if they’re like, yeah, we do like number one the best. Okay, you were right the first time.

And so now it’s like, first of all, we didn’t change blog post option one. It’s still sitting right there ready for us to use.

And what I would do is take blog option two, blog option three, and I would bring them maybe into another page and say like alternate alternate options something like this and I’ll just store them there like I’ll just take these and I’ll bring them paste them over here and I save them because the client might change their mind again later and I can always go back to any of these options right here and not have to do work over again yet again something you can’t do in a development environment so we’ve done design iteration we’ve done component functionality, we’ve done tokenized design, we’ve done auto layouts, all of this stuff all in one episode. Let me go back to camera.

I hope this helps you guys see the workflow that you should be working on inside of Figma, how you should be using auto layouts, how you should be using components and the various aspects of components, and there’s more guys, there’s more to components that we did not even touch on that we didn’t even begin to look at okay very very powerful stuff Tokenized styling it’s all here. It’s all in one package.

I’m gonna do more stuff on figma Don’t worry if you have any requests. I will absolutely Take those as well, but drop comments below.

Let me know what you think Did you learn something new in this video did something unlock in your brain where you’re like mind blown right? Drop comments, let me know, and if you have any questions ask those as well, I’m happy to help out.

Until next time, I’ll be back with another great video. Until next time, I’ll be back with another great video.

Peace.