Build a Design System - Full Course transcript

What's up? In case you didn't know by now, I build design systems for a living. And about a year ago, I started with this build a design system series where I actually built a design system across six or seven episodes. It was a real simple design system, not like the tutorials in our academy, but people loved it. So, I actually went ahead and refilmed the entire multi-eries tutorial and I included it in this one video.

So, by the end of this video, you're going to have a full set of design tokens, a real simple starter design system, and you're going to know how to publish design systems and much more. Let's get started. And if you're looking for a new design system or you're looking to uplift your existing design system, I'll put a link below where you can come work with myself and also the team. And if you're a fan about what we're doing with UI Collective, consider checking out UI Collective Academy.

I'll put a link for that below with premium courses, premium downloads, a lot more right now and a ton more on the way. Be sure to check that out because every purchase helps us do more of this. So, welcome to the new series on building a design system. And I know like throughout 2020, what year is it? We're 2025. throughout 2024 where I was like releasing videos and just building the core components. We're still getting a lot of questions.

So, I'm going to film actually refilm this series all in one clip, you know, how to build every design system component. Now, uh one thing I would like to call out is what we're touching upon today is building the framework for the components. We're building the initial components and their variants. If you really want to master this concept, okay, we do have a course on building a more advanced design system on our academy.

But again, we're going to build out every component that you might possibly need as we did across like seven or eight different episodes in 2024, all within this video. Okay, so one thing I want to get started with right away, design token setup structure. Okay. Now, UI Collective has evolved to the point where I see a lot of other creators taking the things that I teach and like releasing it on their own channel using their own like ideas and methods.

Okay? And there's nothing wrong with that. Like to each their own. Like I I put this content publicly so everyone can learn, right? Not just so that I can benefit by any means. But as part of that, a lot of a lot of these creators because they don't live and breathe design systems like I do is like they're adding spins to some of these concepts, but the spins aren't necessarily right. Okay? They they aren't thinking about specific use cases, especially when it comes to design tokens.

Now, the design token setup that we're going to build today is relatively simple. It's going to get your feet wet in design systems, okay? And if you're building a design system, this is probably a great place for you to start. And you can get into some more complex like theming and approaches in other ways in some of our other videos. We're just going to walk you through the full process here. Okay. So, when it comes to your design tokens are also like your Figma variables.

Okay. There's a couple different approaches and I know these slides here I stole from one of my other videos earlier on. Um, but people just said they loved the slides and made sense so I'm reusing them here. Okay. So, when it comes to setting up your design tokens for your design system, there's a three- tiered approach to design token architecture and also a two-tiered approach to design token architecture. We at UI Collective use the three tier.

Okay, we were using the three- tiered approach long before Figma variables became a thing. We're using the the three- tier approach when, you know, we were still using Token Studio, like the Figma plugin to apply our design tokens. We've been doing this for like 5 years and we use the three- tiered approach where we use a brand collection, an alias collection, and the maps collection now. There are a lot of Figma kits out there that use the two-tiered approach.

So, that's your primitive collection and also your semantic collection. Okay? Whereas the primitive is more like alias and the semantic is more the map. It's almost like they skip over the brand collection or sort of merge like the brand and alias collection together. Again, we're going to look at what these are. Okay. Now, a lot of popular design systems use the Tuti approach. It's not wrong, and if you're using it, it's not wrong.

So, don't think that you need to rebuild your design system from scratch by any means, okay? But there are some limitations to using that two-tiered approach, okay? Especially when you're dealing with multiple brands, and we're going to look at multibrands probably the latter part of this video. Um, but we're going to be proceeding with the three- tiered approach to our design token architecture. So, because we're three- tiered approach guys, okay, I don't want to say like we coined the term, but we've been like teaching people this for like three years.

Um, so this is like our thing, you know. Um, so let's look at our brand collection to start. Okay, so your brand collection is really just everything in its purest form. But again, I know these I have some of these slides in another video. People just love the slides, so I'm using them here too. Okay, sue me. Um, so in your brand collection, it's just everything in its purest form. In terms of your colors, it's just like a hex code, hex code, hex code, hex code.

You like you haven't even really named it yet. Like you haven't named it like air this or like default this, right? It's just super simple. So in terms of naming though is we tend to use what's called like the 100 scale. So if it's a red scale, it's red 100 all the way up to 700 with the higher the number, the darker it gets. What this does is allows us to be a little bit flexible, okay? Is if later down the line when we're testing our components for accessibility and we see that we need a lighter shade than a red 100, okay, to offer like some contrast in order to pass wika standards, what I can do is I can add a red 50, which is lighter than a red 100.

Let's say I need a color that's in between a 200 and 300. I can add a 250. Okay, so it allows us to scale up our design tokens. Now, also too inside your brand collection, font weights, font styles. Okay, this changes a little less frequently um just because like you know if you if your brand when on earth would you ever change like your parent fonts? That's not going to happen. So we tend to store this inside uh of our brand collection.

But if we were multibrand, we'd bring that into our alias collection. Don't worry, we're going to look at what that means a little bit later on. Okay. So, just as like um like type variables, string variables, sorry, uh is what inside our thing with variables is where we would have those font weights and also those font styles. So, like enter, enter inter light, regular, medium, bold, so on and so forth. And we're also going to have one super large number scale.

What this is going to do is going to help us maintain consistency. Our text size, our spacing, and so much more. And one thing that's important to note is you are not yet assigning a color, a role inside your brand collection. Okay, what we do is we actually apply that inside of our alias collection itself. Okay, so I've used this example before which is like think of your brand collection as the roots of a tree where your alias and map collection would represent other parts of the tree which we're going to look at later.

Okay? Because without strong roots, your design system is not going to have the foundation to grow. Okay? So, your brand collection really is just everything in its purest form that serves as the foundation for everything else that's going to come later. You know, just a value of 25 in a scale, a hex code of 797929, a uh hex code of 000000. Enter. Semi- bold. Okay. Just everything in its purest form. Raw. Nothing has a specific specific role.

Nothing has a specific anything yet. Okay? It's just I've said it eight times. Everything in its purest form. Let's now go ahead and start to build out a small brand collection that we're going to use to apply to our components a little bit later. Okay. So, what I have here are just some sample scales. Okay. Just some really common color scales here. And honestly, I might even just get rid of the pink just because it's not a use case that we're going to really need.

And we might also want to get rid of that yellow as well, just because it's not going to be a color that we're really going to need for really anything. Okay, at the end of the day, whenever you're building a design system, okay, and what this is, this is sort of like bare bones. Okay, this design system is going to give you a great great foundation for you to scale up. Okay, so whether you use our some of the tutorials on building an advanced design system in our academy, if you watch some of our other videos, we actually build out some more complex libraries, you can do that.

But this is a great like tutorial for anyone getting started building a design system. Maybe you need a refresher. Build-in components. And again, this is like just almost a repeat of a lot of our other build a design system series tutorials. Okay. So, one thing I would like to call out here is if you think about UI Collective as a brand, okay, we're this purple. If you're on our website and there's something wrong with the form, you're going to hit an error.

If something's successful, you might see a green. Text of course is going to be gray. You might see an orange for warning. And you might see a blue for information. What other kinds of colors would you would you need? Any ideas? Not really. Like you in the grand scheme of things, these are really the only core scales that you need. Okay? At least if you're getting started. Your core brand color. Again, maybe you might have a couple brand colors.

Uh you might have a red for error, green for success, so on and so forth. So, you're just getting started. Don't over complicate your scale. When I The thing that I see devel like designers do when they're just getting started is they build like 400 different color scales with 900 colors each. Okay? That's not going to help anyone, right? That's way too complex. We don't we don't need to do that. If you're getting started building your design system, just start with your base colors and a certain number of colors in your scales and then you can always scale up later.

Okay, so before we get into building the brand collection, I want to show you how I actually built out some of these scales. So, sorry, I just made some tweaks to this, but um I just added additional scale element. Anyways, uh I'm going to show you how I'm going to uh build out these scales. Now, there are tools that can help you do this. I'm kind of a nerd when it comes to my scales and that I like total control. Okay?

I sometimes I don't always trust like these color pallet generators that are out there. Like for all of my design system clients, I really just do it myself. I build all the scales myself. Okay? So, what I do is like in the case of UI collective, let's say like this here is our core brand color. What I do to generate the lighter and darker scales is I first I make sure the page is set to like a white background and then I just play around with the opacity.

So I set this to like 80, this to like 60, this to like 40, this to like 20, and then this to like 10. And notice how the colors like match, but we don't want colors with opacity inside our scale, like our actual design system scale. So, we really just color match what that color is. So, by doing that, we get rid of the actual like opacity. Um, and we like create a nice clean consistent scale. Okay. The same thing going up, but instead of on a white background, what you can do just set it to black and then just uh bring it to the front just like that.

And then still just adjust the opacity. But it's still going to get darker because instead of whiter because it's on the opacity is dealing with a black background. Okay. So, that's how I build out these color scales. Again, there are tools that are that are out there that can help you do that. I just personally just don't like using them. Um, so if you do want to build out your own scales, that's the way that you can do it.

Okay, so let's go into our variables here and let's like build out our brand collection here. Okay, so when I say like variables in their purest form, like you're really going to see what I mean. Okay, so color variable. Sorry, I don't know why I thought about doing that. Um, there we go. Let me extend this out. give us ourselves some space here. So this is going to be our purple. Okay. So although it's like a UI collective like primary colors, it's just going to be our purple because it's in the brand collection.

But one thing I didn't do is I did not rename this collection to brand. Okay. Then what we're going to do is we're going to set this uh if we think about like the opacity. So these all followed like 20% intervals. So this here was like our let's see how many we have. 1 2 3 4 5 6 7 8 nine colors. Okay. So, we're going to have purple dash 100. Okay, we're just going to duplicate this nine times. Eight and then nine. And then just rename them.

Okay. Uh 300, 300, 500, 600, 700, 800, 700, 800, and then 900. But what's an issue with this is that all of the scales followed a 20% opacity interval except one which is the last one. So could that be a nice crisp clean, you know, 100 value if it didn't follow the specific 20% interval? Okay, this is just how I do things, okay? is if it follows the interval that I start with, whether that's a 10% interval or a 20% interval, is I assign it a 100 value.

If it doesn't follow that, if it breaks that logic where it starts to follow a 10% interval, it can't be a nice 100 value. Okay. So, what we're going to do then is we're now going to shift is if this is our lightest and this was only actually built using a 10% interval. Okay. What I mean by that, okay, again, is if I take if I close this, and this is where things can kind of get confusing, is if I take this, which is our core color, and then I set this to simply 10%.

And then this to 20%. Notice how these initial colors follow that nice crisp, clean interval, but this last color doesn't follow that pattern. So these here would be the 100 values, but this one would have to be a 50 because it went down half of 20 to 10. So here we had 20%, here we had 10%. If you have any questions on that, leave a comment below. Okay, so instead of having a 900 value, all of a sudden, what we're going to do, we can delete that, but just at the end here is we're going to have Oops, sorry.

I don't know why I did that. is we're going to have a 50 and that 50 is going to represent the one that had just a 10% opacity decrease. Okay, that's something that's important to call out. Let's look at a quick example of that again. So, say we want to add one in between our 40% and our 20% opacity where we just take it down 30. Okay? Then what we would do is if we have we have our 50, we have our 100, then in between our 100 and our 200, we would include a 150 because it went down just 10%.

Okay, that's how I like to keep things nice and organized. Okay, I do know that can be a confusing topic. So if you're confused, drop a comment below, ask on our community forum, and I'll get back to you. Okay, so now that we have that out of the way, let's go through and keep building out the brand collection. So then what we can do is we can just simply just use our color matching tool and just color match. Now, the reason why um or even just select the color codes here, that might be a little bit easier.

And I know this is a little bit tedious and but I want to make sure that although this is a simple design system, it's not going to be the best looking design system in the world. If you want to build better components like our build an advanced design system series on our academy does cover that a little bit better. Um but it's going to be a design system that's going to get you started. Okay. But we're going to talk about a lot of the edge cases, how to build like some of these basic more like skeleton components, um, and things like that.

So, um, oops, I broke something there. Um, again, I'm doing I'm doing this individually, building out each of these scales, copying the hex code, so you can slow down the video and follow along with us. Okay, so there's our purple out of the way. Now, let's just simply, we can just duplicate this group. Just call this our red. And then we can simply just uh color match. Okay, maybe work from the top down. There we go.

So again, slow down the video if you want to. There we go. And I hope I didn't make any mistakes here along the way. And if I did, feel free to call me out. There we go. Now, let's duplicate this. Let's go with a green. Same thing. We'll work from the bottom up. And big shout out to everyone who's like purchased our academy. Oops, there's a I noticed a mistake here. Um, sorry. When I was building out these scales in preparation for this video, I made a couple mistakes.

There we go. So, forgive me there. There's probably a couple more mistakes somewhere here, which there are. So, we're just going to corre correct these. Sorry. I try my best sometimes, but sometimes my best isn't good enough. It looks like the labels are are right, though. So, we're just going to copy uh the labels here. There we go. Yeah, big shout out to everyone who's purchased our academy. Um, really goes a long way, honestly.

Sorry, I know it's kind of cheesy, but uh it is. There we go. So, there we have our green. And then what we're going to do is we're going to duplicate this. And we're just going to call this like our gray. Does gray have an A or an E? I don't know. Sorry. Grammar. Grammar was never my strong suit. There we go. We're rocking and we are rolling, my friends. Perfect. There we go. So, there we have our gray. Let's duplicate this.

And this here is going to be our orange. And we'll go from the top down this time. Oops. Sorry. I don't know why I did that. Let me just copy this in again. Slow down the video if you'd like to. And uh looks like a little dark honestly, but it's okay. We're going to pretend everything's fine. Slow down the video if you want to copy the hex code. Sorry, I know I've said that a million times. And let's just duplicate this.

And this here is just going to be our bloop. Oh, sorry. I don't know why I did that again. There we go. Copy in. Copy in. And copy this in. And there we go. Okay, we're rocking and we're rolling. So, we start we start to have like our brand collection all set up now. Uh, but we're still missing a couple things from our brand collection. At least we have our colors, but we're still missing like our scale and also our font weight and like our font uh type as well, our font style, I guess, uh, you could say.

So, we're still missing that. So, let's look at that next. So, now what we're going to do is we're going to use like um or start to build out sort of our fonts in here. Okay. So, what we can do is we just group these into um, sorry, what's going on here? Actually, no. Sorry, I'm not going to do that. Let's just go to our all variables and let's just create a string variable. Okay, that we're going to call our font weight.

Uh, okay. And then enter. Okay. Now, when it comes to uh what's going on here, sorry, let move that out of the way. Is when it comes to fonts. Okay. So, I already have enter selected. So, let me just zoom this in. Let me center this just so we can see it. Okay. When it comes to your font weight, the name of your font is going to be the value of the font. So I'm going to go ahead apply a variable here that's going to be enter.

Okay, that's that easy. Okay, so now I can see there's a connect between the font and Figma. Okay, so it's telling me that enter is applied. It recognizes enter as a font. Uh what I'm going to do is I can also uh do something like popins. And this is where you can get into like more specifics. So maybe like enter is for you know your headings uh and poppins is for uh your text. Okay. And still because there's it's not crossed off here, you can see that there's a there's a connection between them.

Okay, if I was to call this enter one in 1R, you can see how there's no longer a connection there because there's no font that's called this. But when I change this back to enter, all of a sudden there's a connection again. Okay. So then we can set this to body. You can also get into things like caption and stuff here as well, but like we're not going to worry about that now. We're just going to worry about getting you a starting design system and teaching you concepts along the way so that you can scale up.

Okay, but maybe for now we have headings and body. What we're going to do, we can just duplicate this and maybe just go our font. Um, we're sorry, let me uh confirm something here. Sorry, this is font family, not font weight. Sorry, hands up. That's on me. This here is font weight. Okay. And then for font weight, if I was to detach this, okay, your font weight would need to match what's here. Okay, you can't have like just SB for semi- bold uh as the value.

It need to match the weight of the font. So, uh here we can have you know like regular, medium, medium, and then bold. And it would need to match the naming here. Okay, so this here would be regular. This right here would be medium. And then this here would be bold. Really that simple. And you can also even add maybe just like a semi sorry we don't have we have a medium but we also have a semi bold. So let's also maybe go with a semi-bold as well.

Okay semi- bold and then semi uh bold. Okay that simple. So there we have the specific values. And if I was also to go ahead again and apply you know uh enter for our body because this is maybe 12 pixels tall. And if we were to apply a variable here as well we could apply the medium. I can see it because it's not crossed off that Figma sees the connection between them. Okay. So, when it comes to setting up your font family, font weight within your brand.

There you have it. So, now that we have that out of the way, let's look at like our scale. Okay. So, what your scale is, and this is a little bit more of an advanced topic. Um, so what your scale is just one large number scale that's really just called scale and let's set a first value of like zero. So anytime you have a number variable later on is you're going to pull from this one scale. Okay, for things like your width, your radius, spacing, padding, gap, all that fun stuff.

Okay, generally always comes from this scale. Okay, this is an advanced concept and only really advanced design systems end up like maintaining consistency in their scale. Well, absolutely everything with a number is a like comes from that scale. Okay, I don't think we're going to do that for this video. It's going to take too long. It's a little bit tedious. Um, but if you do want to go that route, anytime you use a number, whe once we get into the responsive collection, um, all those numbers should pull from one parent scale.

And in your brand collection is where we house that scale. Okay. So, the way I like to do a scale is I still of course like to follow that 100 that 100 approach. Okay. Um, so this is our 100 scale value. Very similar to what we did with colors. But the only difference is is that whereas with our colors, those each each of those clean like 100 values had to do with an opacity, our 100s now are going to deal with a multiple of four.

Okay? So 100, our 200 is going to be eight. Our 300 is going to be 12. Our 400 is going to be 16. Our 500 is going to be 20. And I'm I'll answer your questions in just a sec. I have I'm about to pause this and walk you through some use cases. Our 600 is going to be 24. Our uh 700 is going to be 28. I hope I didn't mess up here. If you did, feel free to call me out. And then our 800 is going to be 32. Okay. Now, right away, you're probably wondering, Kirk, where's like a one, like a one P point border radius is pretty common, right?

Absolutely. So, if that's the case, what we can do, we can apply a 25 that has the value of one. And even like a two pixel border width for something like a focus, we can apply the value of 50. And that would be a two. There we go. We've covered some common use cases here. Now, a lot of other creators who watch some of my other videos, they start saying that it's so it's no problem if you just add just like a three in here, okay?

It's just weird if you do, okay? Because everything should be this nice, crisp, clean, even number. It's very rare for you to sort of mix odd numbers with even numbers. So, I wouldn't suggest it at all. Okay? Now, one thing you can do as well is you can start to get kind of fancy because let's say like you have widths that go up to like 256. 256 / 4. If I bust out my handydandy calculator, 256 / 4 is equal to 64. That means we have need to have 64 values in our scale.

No need for that. Okay? You're not going to use all those colors. So once you get to a certain point, not going to use all those like scale numbers. Sorry. So once you get to a certain point, you can kind of just like increase your number but still stick to that 100 value. So maybe from a 32 we want to go to 40. That can be a 900. As long as it still follows that four pixel scale, you're fine. A,000, you know, maybe we go with a 48.

Okay? You know, an 1100 maybe right now because we don't want to have anything in like the 50s. Maybe this you just jump right to a 64. Okay? So we might come back and adjust the scale a little bit later, but that's a real like starting let's like a scale in a nutshell. So now we can apply things like our border widths, our border radiuses once we get into a responsive collection as well. Well, you know, some of our font styles and stuff might be here too.

So now I want to look at the alias collection. And your alias collection is where you're breaking out colors into into categories. Okay, again I know these slides are from another video, but anyways, people loved them. So here they are again. Okay. So where we have like red 100, 200, 300 in your alias collection, you're assigning those scales to specific role. So things like error, like primary, you know, success, warning.

Okay, these variables aren't yet applied to our components, but we're starting to really start to theme them out. Okay, so we do this ultimately to maintain consistency. So as this example, as we have this error alert right here. Okay, this error alert should pull from the error scale, not the primary scale. Because if everything that's red pulls from an error scale, it's going to confuse our developers because everything's going to be in an error state.

Okay. And that's the case of just we have two colors like our primary and our error both share are both red. Okay. Uh alias is also where we define all our other miscellaneous variables like our border radius and our border width. And it's also where we define another brand. Okay. And we're going to look at that as well. Hey, what's going on? Thanks. so much for watching and making it this far in the video. Look at this.

I got the sunshining on me here. Uh if if you're grateful for what we're doing at UI Collective and want to support myself and the team, be sure to check out our UI Collective Academy. I'll put a link for that uh down below. So, back to a tree example is, you know, your alias collection is where you start to get into like um like like the trunk of a tree where whereas our mapped collection that we're going to look at is more like the like the leaves of a tree that branches out all these like great awesome visuals that everyone can see from far and wide. we need to be able to connect our brand collections.

So the foundations to those specific variables and that's the purpose of like our alias collection is it's more of a tree trunk than anything else in helping us sort of get to that beautiful final state. I know this is confusing but bear with us. Promise you it's going to make sense. Okay. So now let's look at uh building out our alias collection. Okay. So when it comes to your alias collection is what we're going to do is we're going to start applying roles to some of our scales.

Okay, let's look at what I mean by that. So let's start off with our primary. If we go into our brand, in the case of UI collective, this purple is our primary color. So in our alias, we are going to apply that the role of primary. So what we can do now is just duplicate the exact same scale that we had before. So, we had a 100, 200, 300, 400, 500, 600, 700, and then 800. Then what we're going to do is we're just going to create the alias and connect back to our primary color like our and our purple color inside of our brand collection.

Sorry. So, uh, create the alias. This is going to be our 300. Sorry. This is going to be our 200. This here is going to be our uh 300. This here is going to be our 400. This here is going to be uh our 500. This here is going to be our 600. This here is going to be our 700. And then this here is going to be our 800. Okay. So when it comes to your alias is that is really all we're doing is we're just taking the scales that are inside of our brand collection and really just at the end of the day just assigning them a role.

Okay, let's keep looking at some more examples. So if I was to duplicate this now think about the case of like um our error. Okay, same thing. Just adjust it to the red. Red 200, red 300, sorry, red 100, red 200, red 300, red 400, red 500, 600, 700, uh, and then our red 800. Okay, let's duplicate this again. What was the next color that we looked at? It was our green. Okay, our green is going to be our success. So here what we're going to do is we're going to apply a green.

We're going to apply a green and apply the green all the way down. Really that easy at the end of the day. Nice and easy, right? Perfect. 500 700. And then we have uh our green 800. Then if we were to duplicate this, what's the next one that we had, which is our gray. Now our gray because it like the role can vary as to what that gray is for. It could be for icons. It could be for text. It could be for headings. So the way we classify that is actually a neutral.

So this is a 50. This here is a 100. This here is a 200. This here is a oops a 300. This here is a 400. This here is a 500. This here is a 600. This here is a 700. And then this here is an 800. Okay? Really that simple. Then let's go into our brand. The next one is our orange. So if we were to duplicate this, this here is where we would have a warning. Okay. So our warning is our 50 warning 100, warning 200, warning 300, warning 400, warning 500, warning 600, warning 700, and then our warning 800.

This connects back to that orange. If I made any mistakes here, call me out. And then let's go with our blue. So our blue is generally our information. So if I duplicate this, call this our information. Okay. So this here is our 50. This here is our 100. This here is our 200. This here is our 300. This here is our 400. Oops, sorry. This here is our 400. This here is our 500. This here is our 600. This here is our 700.

And let me move my video bar out of the way. And then we're going to have our blue 800. Okay, so just like that at the end of the day. Okay, beautiful. Um, so now let's go into uh our border widths and also our border radiuses. So now let's look at our border widths and our border radiuses. So we're going to add a number variable. Border widths um border widths. Sorry, let me check my cheat sheet here so I don't uh lead you astray.

Our border width and near one here is going to be none. Okay. So, when it comes to the none value, what this is going to do, it's just going to be connecting back to that scale. Okay. Now, for our border widths is like there's really no purpose for like a 100 scale because we only have a couple of them. So, that's where we can start to get into something things like small, medium, and also large. Okay? But to each their own.

So, that small would be a 25, which would be one. You know, that medium might be two like two pixels. Maybe you have like a larger component where there is a little bit of a larger border width, which would be that 100. Okay. So, let's duplicate this and let's do the same thing for our border radius. Okay. So, a border radius maybe you might have a button that has that nice crisp clean right angle. That would be a zero.

You might have, it's very rare actually to have like a one pixel border radius. Usually, you always just have a two. So, what we're going to do, we're actually just going to delete this. This here is then be going going to become our small. This here might become our medium. And then we might have a large um with like an eight border radius or something like a larger card or table component. Okay. So there we have our border width and also our border radius.

So I want to cover multibrand design systems. Okay. Because your alias collection is is where those multibrands are housed. So there's a couple different approaches to multibrands and it really depends on like your company, your use case as to what approach that you should follow. It's a question I get all the time. So I want to look at what's called a branded house approach first. Okay. Sorry, these are from two images uh merged into one.

So your branded house approach, I set this to like 64. There we go. Sorry. Is where within one house you have brands that are like kind of the same. Okay. So, what I mean by that is if you look at Coke, Coke Zero, and Diet Coke, those colors are all going to be relatively similar, except there's just a primary color that's a little bit different. Okay? So, they're going to share the the same scales at a high level, but everything else like their fonts, like their fonts, their uh border widths, border radiuses, like their success colors, those are all going to be the same.

The only thing that's different is that there's just a different primary color. Okay? That is what's called a branded house approach. Now there's also the idea of a house of brands. Okay. So this is where if you think about the CocaCola company, they have all these different types of brands. So you have the three that we saw before that are similar, but Sprite has a completely different color scheme than Coke. Vitamin Water, uh, Monster, Powerade, Dani, Dr. pepper.

They all have completely separate color schemes than Coke. Okay? So, their primary color, their secondary color, if they have it, their text, radiuses, all their components, everything is going to be completely different. This is what's called a house of brands. If you have a house of brands approach, my suggestion to you, have a separate design system. Okay? One for each brand. The alternative to that is is what you can do is say you only have two completely separate brands.

You would rename this to like brand Coke, okay? And then you can simply duplicate this entire one and create a new collection called brand sprite. Okay? So, it's still within one design system, but you're just going to need to change the collections that are applied. Okay? That's my suggestion. It's the House of Brands. Okay. So, if I was just to go ahead and just uh delete uh this collection now, but this is far more complex.

Okay. And if you're dealing with a house of brands, like get in touch with me, like you know, we have some links where you can book me for some time if you do need that level of consulting. Okay? We work with house of brands all the time. But the more common use case that I work with like that I see a lot of designers asking about is this branded house because everything is really just the same. So if you do have this house of brand approach inside your alias collection is where you're going to house that that brand.

So you're going to have brand one, add another mode that's brand two. Now everything else is going to stay the same. Okay, but the only thing that's going to change is just the primary color. So maybe for the second brand, this primary color is going to be our red. We could then go ahead and simply just swap out the primary color. It's that easy when dealing with a multibrand design system. Okay. Now, we do have a full other video that goes a little bit more in depth on multibrand design systems.

I'm not going to do that here. Okay. But it's a it's a question that I get all the time. It's just dealing with multibrand design systems, the different types of multibrand design systems that are out there. Okay? So, if you're dealing with a house of brands, just inside your alias collection, just add another mode and swap that primary color or a secondary color if you need to. Right? But if you're dealing with a house of brands, oh, sorry, I think I deleted my image.

Um, is, you know, get in contact with me because there's probably a lot of other use cases and edge cases that you're not thinking about in regards to that. Okay, my suggestion to you. Anyways, let's keep moving forward. So, one thing I always do as well is just with inside of our neutral collection is your black and white's never really going to change. But one thing you can do, sorry if I just remove the coke here now, is inside your gray, what you can do is really just include like a white and just like a black if you want to.

Or you can just like what I do sometimes is just like in your all variables just like create a new variable. You just call foundation is where you just sort of have like um foundation white. Sorry, there we go. Foundation white, black. It doesn't really matter what you do here with some of these things. But then inside your alias, inside that neutral is where you can also just have sort of like a white and then also just like a black.

Okay, it's it's really that simple at the end of the day where we search for foundation. And again, you can also just put this inside of like an alias foundations group, but like just for the sake of everything, just if you just put it in neutral, like it makes life a little bit easier. Okay, so foundation black. Foundation black. Okay, there we go. So really we have all the variables that we need inside of our alias collection though.

So now I have like slides for maps but like I think it's best if you just like if I go through it with you and we build it together. But your mapped collection is really like the leaves of a tree. It's what everyone sees. Okay. So these are your icon variables. These are your text variables, your surface variables and your border variables in a nutshell. Okay. So these are the things that are actually applied to a lot of your components.

Now, one thing I would like to call out is not every single one of the colors that you had in your alias collection needs a purpose in your mapped collection. What you're doing is you're selecting the specific variables that you're going to want to use for your components, even if it's just like two colors from a particular scale, okay? And applying them or giving them a specific role um inside the maps collection that's going to be applied to a lot of these components.

Okay? So, now let's start off building out our maps collection. Now, one thing I would like to call out here, this token structure is very simple. Okay, as I mentioned earlier, this series or this long video, we're not building the best looking components in the world and we're not covering every specific use case. Okay, I do have more videos where we get into more complex tokenography. Okay, but again, this is just getting your feet wet and it's the same that was in the series last year.

Okay, so our maps collection, it's going to be very basic, but this can get super complex and I will leave links on those some of those more complex videos below. Okay, but I want to call that out specifically is that this is a starter video. It's not meant for you to build the most robust design system in the world. Also too, one thing I would like to call out is that the naming conventions that will go into your maps collection, they can vary.

And I've covered a bunch of different approaches before. I'm using a a different approach to Star. If you look at our collective kit that's inside of our academy, um the token structure follows a little bit of a different approach, but it's more complex. Okay, I want to call that out right away just so there's no confusion. So, with that preamble out of the way, let's look at our mapped collection now. Now, let's go ahead.

Let's create another collection that's going to be uh our mapped collection. Okay, so we're going to start off uh with our text variables. So, starting off with our text headings. Okay. So, with our text headings, we're going to go into our neutral collection and maybe just apply like an 800. Okay. And then we're also going to have a body and maybe we apply that a 700. So, now we're starting to have some of those different variables for like our different like, you know, styles and things that are actually going to go onto or different colors that are actually going to go onto our like components and onto our text.

Okay. Again, as I said before, there are more complex versions of this text where we get into things like on color, on color, subtle. Those are in another video in our like our academy series. But again, just getting your feet wet. This is the approach that I would follow. Okay, we're also going to have an action and a um text action color. Think of it like a link color. So, if there's a link in like your your body, the paragraphs, and what I usually do for that is, let me just make sure confirm something here, which is our 500.

Now, one thing I always like to do as well is whenever I'm working within my scales uh in our alias and like in our brand, whatever like that default color is instead of a 500, you can call it a default. So, you already know like what your core color is that the scale was based off of. Again, it's just something I do. Um you don't really need to do it too if you don't want to. So, this is our default. And then this here is also our default, whatever those 500s are, just so I know.

Okay. Anyways, so you have your text action and because our primary like UI collective color is purple, maybe I want that link to be like a default. Okay, so sorry, not a purple default. This should be our primary default. Thanks for calling me out behind the scenes. Always be sure to um go al collection to collection. Never skip over collections. Uh then what we're going to do is we're going to go with our action hover.

So if this action element was actually hovered. So think like an like legitimately like a link. The link is the color the action color is if that there's that link is not hovered. And then when that that link is hovered what's the hover color? Okay. And when we build out these components you're going to see uh what I mean. And we're also going to need a text disabled. Okay. So if that link maybe is disabled in the grand scheme of things we can apply like a neutral 400.

We're also going to need an information. So if like you have text that's in an information state, that can be our information defaults. You can have a warning. So again, a warning defaults. Warning. So sorry, where's our warning? Our warning defaults. Uh you can have our success, which is our success defaults. And then you can go uh with an error, which is our uh error default. And then we're also going to need uh an onaction.

So basically what this is, again, there's a bunch of different ways that you can break this up. I have more complex ways um in some of our other videos, but a great great way if you're just getting started is think about an on action is if it's on color, right? So if you have text that's on a colored background, um you might just want to set it to neutral that neutral white. Okay. Um, and I think we're pretty good when it comes to uh our text.

So, these are all some of their starting text colors that we might need for our design system. And it's great because this can always scale up. So, now that we have this out of the way, let's move on to our surface, our icon, and our border. So, now let's look at our icons. Okay. Now, the be best thing about this, if I was to duplicate this group, our text group for icons, basically all these variables can really stay the same because we want some consistency if our text is next to an icon.

Like if we have warning text next to a warning icon, we want those colors to be consistent. Okay? We don't want them to be completely different because that's where we get into some different experiences. But where some things differ is we're not going to have an icon headings or an icon body. Okay? What I'm going to do, delete one of them and actually just call this our icon defaults or our icon um primary is also a term that you can use, but I find that if you're using the action action hover approach and you're applying a primary, I think default is just a little bit easier to understand.

Or what this is is if you just have an icon resting on its own, um what's the color for that icon that you want to apply? So, I'm going to apply just a neutral 700 for now. But everything else is really going to stay the exact same because you want the text and icons to share the same variables. So, the easiest way to deal with your icons, just duplicate the text group. So, now I want to go into my surface variables here.

Um, or create surface variables, excuse me. And what we're going to start off with is actually a color for a page. Okay. Now, with this, we can connect back to our neutral white because maybe we want our pages to be white. Okay. Then what we can do is also have what's called like a surface primary or you might also know it as a surface defaults. But what this is is really what are the colors for like key cards on the page.

Okay. So in the case of what I mean by that is say we have like this dashboard here and then which is white. Say we might have all these cards on top of it, right? But maybe you want the cards to have some type of like subtle differentiation. So this is super lightly. It's like let me just go like 2%. Sorry. Just so you can see the difference. And that's way too dark. Like 5%. Something like that. Whereas like a very subtle difference in like contrast from the background.

Okay, that's the purpose of what is like that surface default. So it can be white if you want. It can be gray. It doesn't really matter in the grand scheme of things. Okay. So what we're also going to need is a surface action. So what the surface action is is think about a button. Okay. That's an action element. That is our surface action. So in that case, if we think back to our uh our UI collective, our buttons are purple.

So we're going to apply that default. And then we're going to apply the action hover. And in this case, what we might want to do is again just apply a little bit darker color. So when that button is hovered, it switches to a darker color. Now, what we're going to do now is now get into like more specifics like success, like warning, like uh oops, I don't want to open that. um warning information. Okay. Um error. Okay.

With these, if you think about like an alert as an example, and again, there's a ton of different use cases for these. Sometimes you might want multiple success colors. If it's lighter, if it's darker, depending on if you have success success buttons, warnings, warning buttons, so on and so forth. Okay? And you might want different like groupings for these, but for the purposes of this video, let's just look at it from the point of view of alerts.

Maybe we want these colors, these background colors to be a little bit lighter. Okay, so warning 50. Unless we get into alert components, you might see what I mean. Uh, our information 50 and then our error 50. Okay, really, really, really that simple. Perfect. So, there is our uh surface colors. I hope I didn't mess up anywhere here, and if I did, we'll come back and fix it. Again, just our starting surface colors uh for now.

But we might come back and add some more as we go through and build out some components. But let's look at our border colors next. So now let's create a new grouping for our border. Okay. So with our border, we're going to start off with like our border like a default or like maybe like a primary if you want to call it that. Doesn't really matter. But what this default is if we think back to the example where let me see if I still have it here uh on our frame is if we have sort of these cards, right?

What's sort of a standard border that's applied to a lot of elements. Okay, this can even be things like fields too. So I'm going to create this uh and set this to like a neutral 50 as an example. Okay. So it just offers like some very subtle differentiation um between a lot of these things. So then what we can do we can go with our like border success information uh warning uh error um disabled is another big one. Actually did I even have a surface disabled?

I didn't add a surface disabled so forgive me on that. is we're also going to need a surface disabled which is might be like a neutral like I don't know 100 and we're building a design system not the best looking design system in the world. Okay. Um so for these our border if our um background for some of these elements might be a little bit lighter maybe we want our border to be a little bit darker. So this will be our our success maybe like 200 information 200 uh warning 200 uh and air 200.

Okay. Um, what else? For our borders, we're also going to need an action. And our action for our buttons, I kind of like to have like that the same as I did for the surface. So, if our action is a surface actions, the primary default action hover is primary 600. I'm going to do the same like action hover primary 600. Um, we're also going to need a disabled. Sorry, I skipped over the disabled before, too. So, maybe they're neutral.

Maybe like a 300. And then we're also going to need a focus. So our focus element will go around our focus components. Uh and this is always the same as whatever that action value is. Okay. Sorry, our default. Okay, perfect. So we have a lot of our variables that we can actually starting variables that we can use to start to build a lot of these components now. And again, this can get way more complex and I've done videos where this does get way more complex, but in the purposes of building out components, getting you started because at the end of the day, most people just want to see how we're building components.

Okay, we build components the best way here at UI Collective. A lot of other content creators take influence in how we do this. So, um, yeah, want to cover it again. Perfect. So, now that we have this out of the way, before we get into our responsive collection, let's look at what light mode and dark mode. So, now light mode, dark mode. Everyone says like, "Oh, Kirk, like dark mode's impossible." Not really. Dark mode is probably the easiest thing that you're going to do, okay?

Because all you're doing for light mode, dark mode is you're just inversing the colors. It's that simple. So this here would be our neutral 50. This here would be our 100. This here might be our 400. But also too with dark mode, sometimes you do want some of those colors to stay the same. Okay? And if your brand is like that, what you can do inside of your alias collection, also your brand collection, is just put like a dashed fix.

So that um this is more like relevant for uh like primary colors, secondary colors, those core brand colors, things like error success is a little bit more fluid is you can put like a default fixed to let any designer know that that color needs to be cannot change okay across dark mode. So maybe sorry coughing for the purposes of this exercise we're just going to set that to default fixed. Okay, but everything else we can kind of inverse.

So, we're neutral 400, neutral 700. Again, you can kind of be like sloppy with this, right? Like, it doesn't need to be super perfect because we're going to go through and test this for accessibility a little bit later on. Uh, neutral white, uh, our black, our icon. Sorry, feel free to skip ahead here if you really want to, but um, we're just going to have some fun with it. It doesn't need to be perfect. For some things, you can just sort of select another value and just see how it looks.

And whenever I build dark mode to start, this is exactly what I do. Like I'm not even kidding either. Like I just Sorry, our defaults should probably be at 300, but um I just go this fast and then like work our way back and start to test a lot of these components first to see how things are looking. So our success 50 800 800 uh 800 neutral 700 almost there. Um, these ones are easy. Success 200, 600. And again, just guess at the end of the day is really what you're doing.

Try to get it as close to as possible, of course, but you're always going to need to go through and test for accessibility again anyway. Default fix, default fix, 600, 700, doesn't really matter. Okay, so there you have your starting point for dark mode. Okay, so we have all of our color variables out of the way. And again, this isn't the most perfect design system. It's not the best looking design system, but it's enough where you can take the learnings and apply it to your own and really like upscale it in a way.

Okay, so we have our brand collection. We have our alias collection. We talked about multiple brands. We have our maps collection that looks at light mode and also looks at dark mode as well. But what about like our fonts and stuff? So that's where we bring in the responsive collection. So our responsive collection, it basically just like houses all the variables that might change across device sizes if that makes sense.

So things like our font size, you know, and our spacing, padding, gap, things like that. Okay. So in let's start off with like our text sizes. So in order to actually go ahead and what's the word that I'm looking for? Um build out or type scales. Sorry, that was so tough. It's 8:17 and I'm tired. um is I use this tool called type scale. It's going to help us build out this type scale. Okay. So, what I always do is I set our font size, basic font size to 16.

And what that's going to do is whatever our basic paragraph size, it's always going to be 16. Anything lower than 16, you need to be careful from an accessibility standpoint depending on the font that you have. 16 and above, you're always fine from accessibility standpoint, unless your font is like one pixel thin. Okay? But I've never seen a font that's like that. Anyways, so then we have all these different scales to choose from.

I'm going to select major third to start and then also toggle this to pixels because Figma works in pixels, not rims. Okay, now what? Let's dissect this for a sec. So, we have paragraph size of 16, which is what we want. We have an H6 of 20. Then we have an H5 of 25 and H4 of 31.25. But we really don't want decimals inside of Figma, do we? We want nice, crisp, clean, you know, numbers. So what we're going to do for this is we're actually going to using the four pixel grid that we had in scale.

Okay, apply that same concept here where 16 to 20 goes by four pixels. That's perfect. But then we go to five. What's the closest multiple of four? 24. Then 31.25. What's the closest multiple of four? 32. 40. 48. Um, oh god, 60. Right, these are where we get into all like how we start to build actually build out the scale. It's just like round the number to the closest multiple of four just for consistency purposes. Okay, now um let's go ahead and just like screenshot this.

And one thing I'm also going to do as well is everyone asks about mobile. When it comes to mobile, what you can do is simply just select a smaller scale and notice how everything shifts. Okay. So, I'm going to take a screenshot of this as well. Okay. There's our mobile scale. Um, and now we're using can apply that same logic where things just like adjust as as needed. Sorry, things don't adjust just adjust as needed.

We just have to keep applying that four pixel um logic. So, closest multiple of four to 47.78 is 48. So, our H1 is going to be 48. Okay, that's how we get our type scales in a nutshell. But where things can get complex are things like line heights and um paragraph spacing. We're going to look at that too. Okay. So with the screenshots that we have, let's go into a responsive collection and start to build this out. So here I just have the screenshots I took from Typescale for like our desktop and mobile.

Um let's go ahead. I just created this responsive collection here. And let's just go ahead and start with our number variables, not our string variables because I've done this before with string variables and I have to rebuild it with number variables. So don't do that. Okay. So we're going to start off with H1 and then font size. Okay. This is a way that you can approach it. There's a bunch of different ways you can do this.

So like line height and then also like paragraph spacing. Um and what we're going to do is just duplicate this for um our H2, H2, our H3, H4, our H5, and then our H6 H6. And then what we're going to do is we're going to for our um paragraph x small paragraph small paragraph medium and our paragraph large. Okay. So just like that. And now let's go ahead and add some adjustments here. So for H1 um maybe we'll do our mobile after.

So let's focus on our desktop for now. Make sure we get that that down pat. So, um, what we're going to do here is is going to be we're start our closest multiple is, uh, 60 for this. I really hope I didn't mess that up. Two is going to be our 48. Our H3 is going to be our 40. H3 is going to be our 40. H3 is going to be our 40. Our H4 is going to be our 32. Our H5 is going to be our 24. 24. And then our H6 is going to be our 20.

And then this is where we're getting into something some tricky things here. Maybe if I go oops largest to smallest. Keep things consistent. A large, medium, small, extra small. There we go. We're cooking. Awesome. So, our paragraph large in this case is going to be 20. And I know what you're saying is, Kirk, like our Oops, I didn't properly H6. I know what you're saying is like our font size for H6 and our paragraph large are the same.

Yes. Usually with your headings, it might be a little bit more bold to offer that level of differentiation. Um, but anyways, I continue on. Our paragraph medium is going to be that 16. And there's different terminologies here for what you can call these things. Okay? And I've called them different things in the past. Our paragraph small, we're going to break the four pixel rule and actually just go with the 14 parag paragraph spacing is kind of weird that way.

And then something that is absolutely not accessible, but I still have it as an option for things like captions or if I really really need to like terms and conditions, you know, is like that that font size of 12. Okay. So now let's look at line height. Now when it comes to line height is we might like adjust this a little bit later on is what you do is you kind of take the font size and you multiply it by a multiple.

Okay 1.4 1.6 1.2 until you get the look and feel that you're going for okay so what I mean by that is like 60 60 * 1.2 2 is 72. So in this case, our line height for H6. So if we set this to hello world, hello world. If we set this to like a 60. Okay. Oops. We set this like a 60. Um, and we set our line height to something like 72. That's what that would look like. And it's not that half bad. Again, what did I what was this? 60* 1.4.

If we go 60 times 1.2, maybe we want might want things a little bit tighter. Or sorry, it was You know what? That's fine. before I get ahead of myself here. Okay, you can also even go a little bit tighter like 60 times 0.8 and have to set this to 48. But this like a little bit too tight I find sometimes, but it's totally up to you. Okay, so this is where you kind of need to have an idea as to like how you want to structure your type before you go ahead and do this.

We're just going to keep things simple. Go by 1.2 for now. Okay, so lock height 48 * 1.2 um 57.6. We're still going to apply that four pixel rule here. So, which it would be 56. Yes, 56. I believe I got that right. Please don't sue me if I got that wrong. Uh, time 1.2 48. Perfect. 32 * 1.2 38.4 closest to 40. Uh, 24 * 1.2 uh 28 28 20 * 1.2 24. Perfect. Uh 20 24. Same as before. 16 * 1.2 uh 20 uh 14 * 1.2 16 and then 12 * 1.2 14 16.

Okay. So there we have our line height. Okay. So let's go ahead and do the same thing uh for mobile. Now before we look at our paragraph spacing. So this here is desktop. This here is mobile. Okay, just like that. Um, one thing also that we can do inside this responsive collection is just create another variable here that we're just going to call like device size. So this is where we can specify like what these are like 1440 maybe this is like a 440.

Okay, for mobile you could have tablet here as well. Okay, so then for uh our mobile. Okay, so we're have 48 um 48 1.2 do 50. This would be 56. Oops. 56. 56. Uh, this here is going to be our 40. 40 * 1.2. I believe we already did that actually, which we did. Sorry. Let me extend this in so we can see side by side. So, 40 * 1.2 is 48. And then we're going to go with a 32 for our H3. So, this is our 32. And that would be a 40.

It's kind of nice when the numbers work like this. Uh H4 is going to be a 28. So I think we already uh I don't think we did a 28 yet. 20 16 28 24 28s. No, I don't think we did. I hope I didn't mess up anywhere in here, but forgive me if I did. Uh 28 * 1.2. So this is going to be our 32. There we go. Oh yeah, I messed up here. I'm trying to go quick, so forgive me. Our H5 is our 24. 24 time 1.2. So these actually stay the exact same.

Our H5, which is nice. Okay. And then let's go with our H6. So 20. And then this also stays the same. And then everything else can stay the same. Now, a great rule of thumb is all your paragraph sizes should stay the exact same on mobile as they are on desktop. You should not change your paragraph sizes at all. Okay. So there we have our desktop and also our mobile. One thing too when it comes to paragraph spacing, there's no like true rule behind it.

Okay, it's it's totally up to you how you want to structure these things. So like set this something like4, you know, maybe for your headings, you may maybe want it something like 64 as paragraph spacing. So maybe be 64 and this might be like 64. Maybe going down, maybe you want to go with like a 48 and also like a 48. There's no like true rule of thumb when it comes to paragraph spacing, okay? You kind of just got to like see how much spacing you like to have between some of your paragraph sizes.

So maybe this one's 32. Maybe this is 32. Um paragraph spacing here. Maybe this is 20 and this is 20. And maybe this is, you know, uh 20 and also 20. So just do what you think looks good for your brand at the end of the day. Paragraph spacing. Maybe we'll set this like 24 or 20. We'll just keep it at 20 for now. I don't All right, we might come back change it a little bit later. 20 20 20 20 20 and then our 20 and then also uh our 20.

There we go. Okay. So then there we have our responsive collection. But we're not done just yet. Is there's still this concept of like responsive variables or what I call like jumper variables. We we filmed a video on it last year and this is also included in like our original build a design system series, but it's something I still want to cover uh again. So, let's take a look at that next. So, sorry I changed my mind.

I think it actually might make sense for us to start to build out those jumper variables once we actually get into um like building out our components. It might make a little bit more sense and it's a really advanced topic. Like even when I'm working with clients, it's something they rarely like they really struggle to understand is how your jumper variables are supposed to work. Um, so maybe we'll loop back to that a little bit later on.

But one thing, uh, I might want to do here now, let's get rid of those things here, is let's start building out the actual text styles. They're going to go into our components here. Okay, this is going to be super tedious. I know it's going to be annoying, but it is what it is. Okay, so let's start with our H1, our H2, uh, our H3. Actually, we'll start with that for now. I think I might have a little bit of a hack here for us where we're going to apply the variable for our H1 uh which is going to be our 60 and our line height.

Line height is going to be uh 72. We can have par add paragraph spacing here if we want to, but I'm just not going to do that. And then this here is going to be our headings. And then this here is going to be um what do we want to do here? Let's apply the variable. Uh let's maybe go with our font weight. Maybe we'll go with like a semi-bold. Okay. So then we're gonna do is we're going to go ahead create the style of this.

That's going to be our H1. Really that simple. Uh at the end of the day, um actually maybe I'm just trying to think here. Uh I think maybe what we can do is to maybe sort of spruce things up a bit. is no. I think maybe we'll leave it like this for now. Again, just cuz this is like supposed to be like a simple video cuz what you can also do is you can also have like H1 semi-bold H1 bold, H1 medium, but I think that might be a little bit too complex for now.

Uh so what we're going to do then is let's detach this. Let's set this to our H2. Uh and let's set this to our H2 font size and our H2 uh line height. Oops, sorry. I don't think I did that right. H2 font size H2 uh line height. And let's go ahead and let's create the style of that. Let's call that our H2. Okay. Then let's detach this. Uh set this to our H3 font size. H3 uh line height. And let's create the style of this that we're going to call H3.

And we'll call this H3. There we go. Let's call this our H4. Let's detach. Set this to our H4. Font size. Uh god, sorry. I gotta keep remembering to like actually select. Um this is going to be our font size and our line height. There we go. And let's call this our H4. Uh let's then duplicate this. Detach. Call this our uh oops. Sorry, God. I'm all over the place. This is going to be our H5 font size. H5 line height.

Uh, and let's call this our H5. But we need to call this our H5. There we go. Now, let's call this our H6. Select, detach. There we go. Did it right this time. Uh, our line height. There we go. And now, here is our H6. There we go. So, now that we have that out of the way, uh, let's now look at like our our paragraph. And again with our paragraph, this can be really where we like break things out into a bunch of different styles, right?

So what I mean by that is uh let's see how we want to handle things here. Um you know what I think maybe for our body is we might actually we'll we'll do something a little bit more exciting. So we might have like our small um small link small link um and then also our small semi-bold sorry small semib bold semi bold for now we're going to look at like our paragraph sizing. So with this there should also be an extra small actually.

So what we're going to do here sorry let me bring this all down. So actually get rid of these and work our way up this time. Okay. So, this here we're going to apply our body. And for this maybe just want to apply like that that regular. Okay. And what we're going to do here is we're going to set our body paragraph sorry paragraph sizing. Uh where's our extra small font size line height. There we go. Let's uh go ahead and create the sizing of this.

This is going to be our body uh body uh small. Okay, let's duplicate this. Let's detach. And what we can do here is we can actually just add an underline if we want to. And this is going to be our body. Sorry, this should be our body extra small. Sorry about that. Thanks for calling me out behind the scenes. X small uh link. Okay. And let me just rename this to X small. And we can actually just duplicate this uh and set this to our uh semi bold by changing some of the items that are actually in here.

So this is probably an easy easier way for us to do it actually. But uh font weight semi-bold. There we go. But it's kind of nice for us to see how everything comes about. So we have our extra small semi-bold and then we have our uh extra small which is sort of like our regular. That's one way to approach it. So we have our small uh link our let make sure to do this right. Extra small link extra small semibold and our extra small sort of regular.

Okay. So let's now group these together. Let's um detach detach and detach. And for each of these what we can do is just set this to um small 14 and also that line height uh of that small. So now what we can do, let's try to just say x small. Sorry, I'm all over the place here. Forgive me. It is late in the day. Uh so what we can do now is this will become our body uh small uh link. This is going to become our body small body small uh semibold.

And this is going to become our body small body small. There we go. Uh, we're in some good shape. So, let's select each of these. Um, there we go. Let's detach. Detach and then detach and select all these. Select that next size up, which is that font size medium and that line height um of medium. There we go. Let's call this our medium. Medium and then medium. And let's go ahead and start creating some of the styles here.

This is our body uh medium body medium semibold. There we go. Body medium uh link. And then lastly, sort of our large size. Okay. Let's make sure we did this right. There we go. Perfect. And this here is going to be our large large and our large. So let's just sorry let's not do that. Let's detach detach and let's detach. So this here is going to be our our large paragraph size font size large and then our line height.

Okay, perfect. So now let's go ahead and create the style. Come on. Body uh large link uh body large event body large semi-bold. Let's just check out the styles. Things look okay. If I made any mistakes here, feel free to call me out. Medium, medium, semi-bold, medium link. They want to put the link at actually at the Let's try to think about how we want to rearrange this. Put our extra smalls first, then our semi-bold, then our link.

Our small semi-bold, then our link, medium, semi-bold, then link. Uh large, semi bold, and then link. Just a way we can structure it a little bit. Okay. And one thing we can also do is just put these inside of a group as well. Um that we're just going to call our headings. So now we have the variables applied inside of our actual styles themselves. Okay. So again, if I made any mistakes there, I apologize. But now we have everything that we need to actually start going ahead and building out our components.

Uh I'm actually using the material icon library. Okay, it has all these great icons that just come in as local components. Um so I'm just using material for my icons, but you can really use any icon library that you would like. And I just put the icons inside of my design system file. So we're going to start with our button. But one thing we might want to do is we might just want to color scope uh our variables. Okay.

So basically what this is doing is it's hiding certain variables that like we might not necessarily need. Right? So within primary I'm not going to want any of these. So I can choose to edit these variables and I can choose to show these or not when I'm actually applying components. Okay. So now like these variables here won't be shown um when I'm applying certain components when I'm applying the colors to components.

Sorry. And even with brand as well, what we can do is just go into our all variables here and just hide all the ones that aren't necessarily going to be used, which all of these really. Um, yeah, even even the scale, too. Actually, you know what? We'll leave the scale in. Um, and I'll say why in just a sec. So, we'll take out our purple. These we're not going to need, and we'll leave in our scale. Okay. So, let's edit these variables.

Just choose not to show these. There we go. Um, and also too, one thing we can do is we can go back into alias. Um, let's go ahead. Let's edit these variables. What is this? This is a border width. Uh, so one thing we can do is just toggle this on and choose to only show this uh in that stroke. Okay. So, you can even we'll do the same with border radius as well. It just helps us to scope our colors pretty well. Um, so now when I go and apply these variables, I don't have to scroll through all the variables that I had before.

I can it's just like let me show you what I mean honestly. Um so let's go ahead and just add in that radius. So now when I select radius not how notice how border radius is always there. Okay sure we have our scale and the reason why I'm leaving in the scale is because if you want to get specific around applying variables for padding and gap and things like that. The scale is always nice to have. Um, but yeah, not really recommended to to not really mandatory, sorry, to have your scale showing at all times.

But notice how with border radius now, I don't need to scroll through all the all the variables. It's right there. Okay, perfect. Awesome. So, with that out of the way, now we'll start with our button. Okay, so with our button, what we're going to do just put in something like join UI collective, just some basic text here. Okay, what I'm going to do is I'm going to press shift A. Okay, and that's going to add that auto layout frame.

One thing I want to make sure. Okay, so perfect. This is set to our body medium, which is that 16 size frame. Okay, or 16 size text. Uh let's go ahead and add in some variables now. So, uh let's go ahead add in just a surface uh action. And we're going to set our text to our text on action because again our on action sort of say signifying that it's on that background. There are more complex ways to handle this. I've covered it in the past, but that's what we're rolling with for now.

And we're going to use our text on action probably quite a lot. So, I'm actually just going to go into our mapped, move our text on action way up here. There we go. So, let's also go ahead add in a stroke. Now, often times what I see a lot of designers do is even if their stroke is the same color as their surface, they just choose not to add a stroke, but it kind of puts you in a box then because if you do decide you need to add a stroke, what you have to do is you have to go back and add it to all your components u a little bit later.

So, just even if it's the same, just add it. Doesn't hurt anyone. Okay. So, let's also go into our assets panel and let's search for like our info icon. There we go. So, we can pull that in here. Um, we shrink this to like 20 by 20. There we go. And let's also set to 12. Sorry, our horizontal padding to 12 and 8. Keep things nice and snug. There we go. Okay. Sorry. And let's set this to our icon on action. And I'm going to do the same uh for our icon actually as well.

Move our own action up. Okay. Um so now our icon and our text are have the exact same color. Okay. So let's go ahead. Let's add in also a radius too. Like maybe a radius of uh a radius of two. Sorry. We're going to call this our button. Let's go ahead maybe adjust the gap something like eight. Let's create the component of this. Uh and let's get started from here. Okay. So before we go ahead and add in our variants, let's go ahead and add in some properties here.

So, if we look at this button, we're not going to need an icon left and an icon right at every time. We might just want an icon left. We just might want an icon right. We might not want an icon at all. So, what we're going to do uh to start is we're going to add a layer property here that we're going to call uh icon left. Okay. So, let me just copy that as well. Um, and now what we want to do, so if I bring this not this instance out.

Okay, now I can hide that icon left. But I also want the option to swap that icon because I'm not always going to need an info icon. So with that, I'm going to add an instance swap here in the top right. Also call it icon left. But what I like to do is add a little emoji. And to do this, I did edit emo emojis and symbols. I'm on a Mac. I know there's a hotkey for it, but sorry, I'm old school. And I like to add this sort of downward downward arrow.

Okay. So, let's create that property. And now I can sw easily swap out that icon for another type of icon. You know, there's just an example. Perfect. So, we're also going to want to do the same for icon right. So, let's add in a layer property for icon rights. So, icon right. There we go. Uh, let's also create a instance swap for that icon right. And again, we add the downward facing arrow because we can't have two properties with the same name.

It kind of shows like one is like nested within the other using that arrow. Um, you'll see what I mean here. Sort of like icon left, icon left, right? Anyways, I digress. Uh, and then lastly is we're going to need a text property for the label to easily change that. So, let's just call that label. So, now we can easily swap this out uh as well. So there we have uh our initial button component. Let's go ahead and also start adding some variants.

Now uh uh so let's go ahead and let's start off with our so this is going to be our status. So this here is going to be our default button and then this here is going to be our hover button. So, let's go with the surface action and then surface action hover, our border action, border action hover. And we're going to keep our text uh icon on action and text on action the same. You can have on action properties for that.

I have tutorials in our academy where I go through that level of complexity. Uh we're going to leave it like that for now and maybe only just change um our just our surface and background. I just getting started at this early stage. Sometimes it can be a little bit confusing if you do have um onaction hovers. Okay, again we can introduce that if we want to, but we're not going to do that here just for simplicity sake.

Okay. Uh and this here is then also going to be uh our hover. Um moving along now is we're going to need a focus element. Is what our focus element is for is if you've ever actually used like um like navigated a website via like like a tab key. Okay. So, basically what this does is allows those who are more visually impaired to sort of see what's selected if they're navigating a website just via a tab key. Okay. It's what's called a focus.

You don't need to have these in Figma, but I build them in Figma just so my developers can see. Okay. So, when it comes to my focus, what I do is I set the width to two pixels because I want it to be nice and noticeable. Okay. And again, I just copied my default because the default and the focus should all as just as best practice purposes should always have roughly similar variables. Okay, I'm going to set this to our border focus.

So, this is why we have that border focus. And what I'm going to do is I'm just going to simply copy and paste it inside. And I know what you're saying, Kirk, like that's not right. Like what? Now, what I'm going to do actually is actually bring this around two pixels on either side. Okay, let's set the radius of this to four. Radius of eight. Maybe let's actually go radius of two. Radius of two is fine. Maybe even radius of four.

I still think it looks a little bit too square, but it's okay. Again, we're not building the best looking design system in the world. We're just building a design system. Okay. So, now we have that focus property all the way around. But if I was to change this label, learn more, what do we notice is that the focus doesn't adjust with it. And so what we need to do is actually set our constraints here with the focus selected to left and right and top and bottom.

And now with those constraints set, notice how whenever I adjust this to maybe just something like hello, notice how that focus property always like follows with it. Okay, beautiful. So there we have uh our focus. Uh I just need to take a quick drink of water, but then we're going to look at our disabled and start looking at some other variants as well. Okay, so I'm back. Uh let's go ahead and let's uh build our disabled now.

So for our disabled, we're just applying our disabled properties. There's a bunch of different ways that I've handled this in the past as I'm sure you might you might know, but really what we're doing just applying our disabled. Um and again, it's not the best looking disabled button in the world. Um you know what? just for my own sake. What we're going to do is we're actually going to set our uh surface disabled to something just a little bit lighter.

There we go. And maybe even our border disabled, too. Oops. There we go. It just looks less harsh. And maybe we actually might even want to put our text disabled also a little bit darker. Maybe just like that default color. And also our icons to match. Sorry, this is me just getting picky now. I didn't really didn't like the look of that disabled. There we go. Okay, so there's just uh a disabled button. Anyways, let's continue on.

Uh, perfect. So, with that out of the way, let's go ahead and let's add in another variant that we're going to call type. And this here is also going to be our default. Now, for your type variants is where we can get a little bit more like finicky with it. This one is going to be uh our outline. Okay. So, with our outline, what we're going to do is we're just going to drop the surface on each of these. But first, let's set our icon on action to our uh sorry, we're going to take this one at a time, actually.

So, let's drop the surface. Um, keep the border on the outside, but then our icon on action is going to become our icon action, and our text on action is going to become our text action. Okay? And then uh let's simply drop the surface again. Uh and let's just set our icon on action to our icon action hover and our text on action to our text action hover. And now we're going to do the same for our focus as we did with our defaults.

So drop um change our icon to icons action and then our text action. And I noticed a spelling mistake here. Sorry. Icons, not icon. There we go. Um, and then for disabled, we're just going to keep that the same just because I like my disabled like relatively similar in terms of consistency. Okay. Um, perfect. And then lastly, one thing we can also do as well, um, is sorry for these, what I'm going to want to do is actually just add in a fill for these.

Sorry, that's my mistake. That's just going to be our surface default. Okay? Because again, these are our these are our outline, not our transparent. Um, and then for these, what we're going to do, because these are going to be uh our full-on transparent, our full-on transparent buttons, what we're actually going to do is we're not going to have any of that fill. And then we're also going to remove the border around the outside.

Okay. Uh, so I hope that makes sense. So here we have our defaults full of color. Here we have our outlines, which have that that white background to it. And if I change the page background here, hopefully you can see what I mean. And then we have our transpar our transparent here. Okay. Uh which doesn't have any of that white background. Okay. So, uh looks like we have some conflicting variable names here. So, let's see what's happening.

[Music] So, this should still be also our type. This should be our transparent. And that should clear up any any duplicates. Beautiful. So there we have it's a simple button component, but it's a great starting component for you to go and and make tweaks. Again, not every use case you might need. You might not need you might not need a transparent, you might not need an outline. Um, and again, we go through more complex like options of this on our academy where we get into different sizing things like subtle buttons and like things like success and error, but this is a great starting component for you.

So now let's work in our label component. And our label component is going to go on top of things like our field and other components that would necessarily like need a label. Now, we separate our label component out because what it allows us to do is create variants for the label that we can actually swap out on an input component to avoid like a ton of other components for our input later on. Anyways, you're going to see what I mean.

So, make sure this is set toward body medium and then set this to our text body. And let's go into our assets panel and search for like a help icon. Now, one thing we might do later is like come back and swap this out on the label for our actual tool tip component. But anyways, we're going to continue with this for now. Set that to our icon action. Uh, and let's go ahead add some auto layout. Let's make sure that uh our properties here are set to hug and hug for our label.

And let's center align left that label property as well. And maybe we can set the gap to eight. And we'll leave horizontal and vertical padding both set to zero. Let's go ahead, let's call this label. Let's go ahead and create the component of this. Now, if we think back to our button, what's uh some properties that we might need here. First off, label property or text property for the label. So, we easily swap that out.

So, now I can change this to something like uh first name really easily with just a click. And we're also going to want the option to hide the icon, but are we going to want the option to swap out the icon if it's a label? But would you really ever want an icon besides like the help icon for some type of information? Chances are probably not. So, we're going to leave that as is for now. Okay. But what's one thing that we noticed here when we toggle on and off the icon?

It's like our frame shrinks a bit. And it's because our icons out of the box are pretty large at 24x4. So again, as we go to the button, we'll shrink them to 20 x 20. So now when we toggle these on and off, there we have it. Okay, perfect. So there's our label out of the way. And one variant we're going to want to add here is this here is going to be it's going to be just our type. This here is going to be our defaults.

And this one here is actually going to be our required. So what we're going to do with require is we're actually going to add a small asterisk. Okay, small asterisk. Set that to our text error or sorry our icon error. Excuse me. Best to stay consistent. icon air on the inside. Okay. But what we're going to do is if we think about a label, all of a sudden, if we were to like sw the component, say you have like two form fields stacked on top of each other, all of a sudden the asterisk is going to push the label further to the right and it's going to look a little bit wonky.

So, what we're actually going to do is if I add back in uh actually probably don't need a guide there, so I don't know why I did that. Is we're actually going to absolute position this. Okay, just simply to the left just like that. So, the asterisk is actually going to come in front of the label and it's not going to be inside the frame itself, but it's just absolute positioned outside. Okay, so that's going to allow us to keep all the labels in line with one another.

Now, a question I get all the time is, "Kirk, can't the asterisk just go at the end?" But for accessibility purposes, what you're going to want to have happen is for a user to see the field is required and then see the field name. Okay? Just best practice from accessibility. Okay. So, there we have uh our required. Beautiful. So, with our label out of the way, let's look at our input and then also our field. So, we're actually going to start off with our field uh and then our input.

Now for our field here, let's go ahead uh and just uh so let's set this something like placeholder. Just add some text and set this to our text body. Okay. Um and then what we're going to do is just add in two icons. So again, maybe we can add in this help outline icon and then maybe also person or profile uh profile icon or user. or should see it comes back with user or we'll go with a smiley face. It doesn't really matter for now because we can swap it out either way.

Okay, what we are going to do here is we are going to select each of these, add some auto layout. Okay, let's make sure that this is set to hug and hug to start and set the app to just like something like 12 or eight. So, it's very similar to our button. Let's go ahead. Let's add in some padding here. So, like 12 and then also uh eight. And uh let's add in a quick stroke just so you can start to visualize some things.

Okay, so it's going to be our border default. And let's add in our surface, which is going to be our surface default. Now, if you think about like an input field, okay, you know, it might have a placeholder that's like first name. It might have a placeholder that's like name or email. What's awkward about this is that the the these icons are not in line. Okay. So, very similar to what we just looked at with the label.

It's best to keep like related elements in line with each other. So, what we're going to do is actually just always set this to fill. So, it's always going to push um this icon at the right to the right. Simple, right? So, let's call this field. And uh let's also add in a radius here of something like 2 pixels. And sorry, I should also set a border width. Use my variables. Set that to one. And there we go. things are looking in some pretty good shape.

And also for consistency purposes, I don't like the 24x 24. I want it 20 x 20 just to keep things nice and snug. Okay, so let's go ahead and let's create the component of this. And now let's add in some properties here. So now this is looking a little bit more like a field. So start off with our icon. Let's go ahead. Let's add an icon uh left. There we go. And also add an instant swap for that icon left. Of course, add that downward facing arrow where I put edit emojis and symbols.

Add the downward facing arrow. There we go. Icon left. Create the property. Let's do the same. And again, make sure you're doing this on the main component because you can't do it on the instance of the component. Uh so let's add for our icon right. There we go. And then add in uh a property for that icon right. There we go. So now we have our icon left, icon left, icon right, icon right, too. Oops, something went astray here.

So sorry about that. Forgive me. So this should actually be our icon right. Sorry. And let's make sure we rearrange these. So this is no longer not used in the component. Sorry, I was going to start from scratch here. So we have our icon, right? And now let's add in our instance swap for that icon, right? Sorry, my mistake. Silly mistakes. It's the morning here. Need more coffee. There we go. Perfect. So now that should work as intended.

Perfect. Now, of course, we're also going to want uh a text property for the first name or not, not for the first name, sorry, for the label. There we go. So, now on our instance, okay, we have our icon left, icon left, icon right, uh icon right, and then also our label. Perfect. So, with that out of the way, let's go ahead and add in some variants. So, let's go ahead. Let's add in uh our first hover effects. Um actually, because these are kind of long, maybe we'll just go downwards this time.

Okay. So, let's go with our first off. This is going to be our status. Uh so, this is going to be our defaults. And then this here is going to be our hover. So, when it comes to our hover, what I like to do is just set our border default to our border action hover. You can also change the icons if you want. But um when it comes to the surface, what's kind of nice is maybe even have like an action hover two. Okay, so action hover.

It can even be like action hover two or action hover lights. Okay, so with that, let's just set it like a 50. And then this one, of course, like the darker one for dark mode. So what we can do now is we can get like a surface action hover light. Sort of adds sort of like a makes it stand out a little bit more that something's being hovered. Okay, you can play around with it. I know it doesn't look great as it stands right now.

Uh, but you can also set it to like a certain like your icon on action or like a darker version of that. Um, so it's not just so it's not so harsh if you know what I mean. So like even like an icon action hover, like a text action hover, that's the you have that option to do that too. And I don't think that looks half bad at the end of the day. Okay, so there's our hover effect. Um, and again, you can also go ahead. Yeah.

Yeah, enough of that. uh is go ahead and add like a while hovering. You know, you're going to change it to to hover. Okay. Um let's also go ahead and let's add in also our focus. So, this is going to be very similar to what we did with our button. It's just two pixels all the way around. Add a stroke border width uh of two pixels. Uh drop the fill. Uh set this to our border focus. Okay, there we go. Copy. And then paste it all the way around.

Again, use your absolute positioning tool. There we go. One, two, one, two, one, two. Then we have our one, two. So, we can set those constraints again, remember, to left and right and also on top and bottom. And we're set the radius to something like four. Okay, so there we have our focus. And then lastly, let's do our disabled. So when it comes to our disabled, uh let's go with a surface disabled, border disabled, uh icon disabled, and then our text uh disabled.

There we go. And then there is our disabled field. Okay. So there I think we're in some pretty good shape uh for our field. So one thing um I also covered in our legacy series is the idea of like a state. Okay. Uh so whether it's filled or not filled. So that this here is going to be not filled. This here these ones here can be if this is filled. Basically what this is saying is that sometimes what you might want to have here is if we go into our variables and into our text you might want to have like a body placeholder.

Okay. And with that you tend to get a little bit of like a lighter shade. It's maybe like a where on your not filled maybe these are a little bit lighter. Okay, so these are your text placeholder. So some things like filled versus not filled like you've enter text versus not entered text. Okay, um it's a little bit more of an advanced topic. Um and there's a lot of other things that you can do with that. But that's just touching it at uh a nutshell for now.

The state not filled or if that or if that field is actually filled itself. So now we're going to do is we're going to work on our input. Okay. So with your input, what you're doing is just taking your like your label property. Okay, just a copy of it and then also a copy of like one of your fields and uh just pasting it uh below. And we're sort of piecing the two uh together. So maybe for this we want to hide both the icons just to keep it nice and clean.

Okay, let's group these in auto layout. Set that to something like eight. Okay. And let's go ahead and let's uh create the component of this and call this uh art input. Now, one thing you might want to do as well is also just add in uh like placeholder text here. Placeholder uh text. You can also create the component of this placeholder text if you would like to. Okay? But I'm not going to do that for now. Um, you can do that if you'd like to, if you want like more control over your placeholder text.

Uh, we're just going to set this to to hug and also to hug or sorry, fill and hug vertically. This to our, uh, text body. There we go. And uh, let's go ahead and just add in some nested instances to start. So, what nested instances are is if we look at uh, our field component here, if I was to click on this field component, notice how I have access to all these properties. But if I click on our input component, notice how all of those properties are now gone.

Okay. So, we're going to want the option here to toggle on all the great properties that we had before. So, to do that, we just hit um I'll do that again slowly. So, properties, nested instances, then toggle on label and field. So, now when I hit this, notice how I have all retained all the properties from our components inside of these components, right? But what's something else is that we might not always want this placeholder text.

So, let's go ahead and add in a lab layer property for uh placeholder text or uh what's the word I'm looking for? Explainer text. Explainer text. Probably a better term for it. Explainer text or hint text. Sorry, that's the word that I'm going to use. Uh sorry to throw you for a loop there. So, this here is going to be our hint hint text. There we go. And now I can also toggle on and off that hint copy if I'd like to.

And of course, one thing we're also going to want is a layer proper is a text property, sorry, for that hint text. And again, just because we can't have two properties with the exact same name, what we're going to do is add in that downward facing arrow here. There we go. So hopefully that shows how you can like piece use components that we built in order to combine them together to build other components. Now, that concept's actually called like atomic design.

Uh, it's a guy named Brad Frost, who's also a design system expert, who like came up with that concept. Uh, I'm going to cover that topic a little bit more in depth in a future video. So, be sure to like subscribe for that. But now we have this completed input component. So, again, we added hit hit text. Um, we added our label component, our field component, combined those together, and we added our nested instances here as well.

So, now we can toggle everything on and off. And hopefully this also shows you like why it's a pretty good idea to have a label um as a separate component and not just include it in an input as I see a lot of people do because now we have like a lot of control over that label whether it's defaults or whether it's required. Okay, we don't need necessarily different variants for our input field. Now one thing we might want to do is just hide this hint text by defaults.

And you can also get creative with this. Okay, like uh if you do have certain inputs, this can just sort of be um you know your type and maybe this is your like your defaults. But you can also get into specific use cases. Okay, so this here might be email. Uh and with your email, maybe like that button is actually hidden or that icon is actually hidden. And then you have an icon left with u oops with something like a mail.

There we go. So you can use that to sort of set all like these different, you know, variants for different fields that you might need for your components. And you can set this to something like email. And then there you go. And of course, you can always toggle on and off these different icons and all the different properties still. Okay. So I'll leave that to you to get creative around what kind of like properties you want for your input component or what variants, sorry, you want for your input component.

But here's a great starting point. So now let's go ahead and let's uh build out our menu component. And so it's going to look pretty similar the setup at least to a lot of like the other items. So it's going to be like uh our other components we might have built so far. So it's going to be our menu item. Let's go ahead and add in just maybe like um I don't know like a settings like a gear. No, it's not there. Okay, we're going to add a person.

Um and then also like a I don't know like a arrow. Whatever. It doesn't really matter what icons we use. So, let's go ahead add in some auto layout. And something got all messed up there. Okay. So, let's just ignore that. Let's ungroup that. And then let's go ahead and do this again. So, let's add some auto layout. And then we're going to set this to something like 12 uh as a gap. Again, make sure that this is set uh to hug and left center align.

Okay. So, we're going to build our menu item. And the menu items are going to be com are going to be combined into like one menu component, if that makes sense. So, very similar to what we looked at with our placeholder is like we're always going to want or not our placeholder, sorry, our field is we're always going to want the icon right to always be at the end. So, we can set that to fill and make sure it's set to our text uh body.

There we go. And we're going to set this to something like 12 and then also something like eight vertically. Let's add in a quick fill, which is going to be our surface uh defaults. We're not going to add in a radius. Uh let's also add in a stroke maybe just on the bottom. And a border uh defaults. Uh and again just on the bottom. So always be sure to set that as one pixel. And then just on the bottom. And you're going to see why we set that just on the bottom as well.

So let's call it is this our dot menu item. Okay. And we set this as like a dot menu item because when we publish this component ideally like it won't get published. Um, and adding that that period in front of it sort of signifies to Figma that hey, we don't want to publish this. Okay. So, let's then go ahead and uh so there's our initial menu item, but again, we're going to need to add in some properties here. So, starting off with our icon uh left, icon left.

There we go. Create the property. And then also an icon left as well. Add in that downward facing arrow. Sorry, I know you can't probably see this part, but icon left. Create the property and then also an icon right. Oh, sorry. I need to do on the main component. Oops. There we go. Icon right. Icon right. And drop the arrow that I copied in. There we go. Because we got to add that on the instance swap. And then uh create the property again. icon, right, for the instant swap.

Beautiful. So, things are looking good. And of course, we're going to need a text property uh for that label. Okay, there we go. Just like that. Now, so there is our initial uh menu item, but let's go ahead and add in some variants here. Okay, so let's go ahead and let's uh start creating some variants here. So, of course, we're going to need a hover. And this here is going to be our status. And this here is going to be our default.

So for this, what we have is our set this to our border uh action and our surface is going to be our surface uh action hover lights. And maybe we just want to keep like those like the same colors and the same the same colors. Actually, you know what? What the heck? Let's set it to our icon action hover and our text action hover as well, just for consistency purposes. And also, we're going to need it disabled. Okay. So, with our disabled, what we're going to do again, you guessed it, surface disabled, border uh disabled, icon disabled, text uh disabled, and there we have it.

Okay. So, now that we have that out of the way is you could introduce like another variant which is going to be called like our like like a it can be a state, it can be a type, doesn't really matter. Um, and our first is going to be unselected cuz you think about a menu, you might always have one option that's selected and one option and and one option that's selected and all the others are not selected, right? So then these here are going to be our selected variants.

So with our selected variants, again, this is going to be our surface uh action. Again, sort of signify that it's selected. This is our going to be our border action and then our icon uh on action and then our text on action. So that's as if like that menu item specifically is selected. Okay. And now it's going to be our surface action hover and our border action hover. And then this is going to become our uh icon on action and then our text on action.

And then there's also uh like our disabled just going to stay the same. Okay. And when I check there's no overlaps in componentry. So, I think we're off to a pretty good start. Okay. So, now what we're going to do uh is let's start piecing together uh the menu component. Now, let's piece together a menu component. So, I'm going to take our menu item here. And something strange just happened where you can see it all of a sudden it added a border on all sides.

When on our component here, we only have a border on the bottom. I haven't seen that one before. And it did it again. So, I think we're witnessing a Figma bug in real time here. So, we're just going to proceed. One thing I had done is I just increased the size of our padding like horizontally just to give ourselves some more room. And I just hid the icon left in the layers here. So, it's still there. I just hid it. So, let's go ahead and just add in a bunch. 1 2 3 4 5 6 7 and then eight.

And maybe we can just go ahead and just hide a couple. Okay. And it'll just set one to to selected. Okay. So, let's call this uh our menu. And now one thing you might want to do as well, and I think just the fact that it might get a little weird with the fact that we have borders on all sides now with our menu item, but anyways, um, what you should realistically do is add in a stroke. Okay, so this would be like a border defaults.

And one thing you can do is add in a quick scroll bar. So how to do that is I just add in this scroll bar looking thing. Set it to like your border default. Set the radius to something like round and um add an auto layout frame. Call this your scroll bar. Uh create the you can create the component if you want to have that level of control. We're not going to do it here. But then inside your menu items is you're actually going to add them inside of a frame.

Okay? So shift A to add them inside of a frame. And then inside the parent menu, you're going to paste that in. So now you can see we sort of have two frames here. one with the menu items and then one with just the scroll bar and then using um what's the word I'm looking for? Uh auto layout, you can just set it from set it side to side. Okay. And we can even just set this to something like eight and then eight just to achieve the look that you're going for.

Um so then set this to uh fill. So this is just sort of showing here that like um you if there's a menu that's scrollable multiple options, you can do that too. And then maybe we can set the radius here to two. And it looks it might look a little weird just because we shouldn't have like the the border on the right. Um but anyways, and sorry, I should probably set the apply a variable for our border width. Let's create uh the component of this.

And you can also just toggle on have an option to show scroll bar or not. Oops. By adding in a layer property for scroll bar. There we go. So we can turn that on and off. But we still lost all our great properties that we set with our menu items. So let's go into our properties and our nested instances and just simply toggle all of those on. There we go. So now I can see on our menu we have all those great components uh upgrade properties and perfect there is our menu item with a live Figma bug.

So now let's piece together a menu component. So, I'm going to take our menu item here, and something strange just happened where you can see it all of a sudden it added a border on all sides. Went on our component here. We only have a border on the bottom. I haven't seen that one before. And it did it again. So, I think we're witnessing a Figma bug in real time here. So, we're just going to proceed. One thing I had done is I just increased the size of our padding like horizontally just to give ourselves some more room.

And I just hid the icon left in the layers here. So it's still there. I just hid it. So let's go ahead and just add in a bunch. One, two, three, four, five, six, seven, and then eight. And maybe we can just go ahead and just hide a couple. Okay. And we'll just set one to to selected. Okay. So let's call this uh our menu. And now one thing you might want to do as well, and I think just the fact that it might get a little weird with the fact that we have borders on all sides now with our menu item, but anyways, um, what you should realistically do is add in a stroke.

Okay, so this would be like our border defaults. And one thing you can do is add in this quick scroll bar. So how to do that is I just add in this scroll bar looking thing. Set it to like your border default. Set the radius to