Lecture Notes on Building a Design System in Figma

Let's build a design system asterisk. And if any of you are wondering what that asterisk is for, it's because I talked last time about how design systems aren't just the Figma file. There's always so much more to it. There's communication, rules, documentation. Where do you put your documentation? Is it all in Figma? Do you have it sitting somewhere else? There's lots there. There's also the code that goes, that accompanies the design system. that's a translation of that and all the rules around that that you've talked with your developers about. So design systems a conversation It's a lot of different things all working in tandem some kind of system to build a sync up all these things But anyways, we're talking specifically though about design systems and designing them in Figma because that's what we're doing So I did promise you that I would have that moment where When I pull the design system back out here, we're going to have some new cool things. And so if any of you have ever seen Figma's automatic version history, you can see here, if we go back and back and back, we can actually go and see what happened this morning. What did this thing look like this morning? Or what did it look like, let's see, yeah, what did it look like here? So this is what our design system looked like at the end of our. stream as of last week. And so, Asra, if you could help me too and just throw the link out for the previous stream out there, just in case people haven't got that, at least they can have that now. That would be awesome. Okay, so this is what our design system looked like. It didn't look like much. It wasn't very organized, but it was the basics of something good. I always promised absolutely nothing. I always promised that I was just going to build and we would see where we would get. Okay, but... as of today, this is where we're at. So I did a little bit of work on it. Now, I didn't do too much stuff without you. So what I did is just kind of document some of this stuff. And so what I would encourage you as you build your design system, start creating little design system components. So I actually underscore name these things. So you can see here, it's underscore design system, blah, The reason for that is when I go to publish, so when I go to publish this design system, when I go to publish styles and components, and I publish this to my team that I'm working with, that little underscore there is going to be ignored by Figma. So if you actually, I went back to the version history. Good job, Raj. So let me do this. If I hit this, we're not on a team right now. I'm in drafts right now. So we'll show this in a few episodes. But you would see. that all of these ones with an underscore at the beginning of the name are actually ignored. So what I encourage you to do is create all these little helper components. There's no reason that you can't use components to help structure your design system. So here's what I've created. I actually created a little icon grid here. We'll talk about that in just a second. I'm going to show you that grid. I'll show you another stream that you can watch that might help you out with icon design. As well as I created a little swatch. And this swatch has a few things on it. It's got a color name on it. It's got the color hex code. And then it's got potential shades of different shades of that color in case we want to, especially since this one is our brand color. And then I created like a color listing. And I used all the bells and whistles for this. I used auto layout. That way I can make this thing get bigger and smaller. And that way I can actually take things out or put them back in. And. the whole container will resize. I started creating like a type pairing, like what happens when you have a article heading or a title and then a subtitle and then body copy here. How do those rules work? So I started working on that, but really what you'll see here is that I've got all this here now. I've kind of documented out each one of our, here's our title or header one, header two, header three, and then I've got in here. all the different qualities of that. So if you'd like, and if you remember, let's say on this header two, you can see here it says H2. And if I go over to this code area and I don't do the actual CSS code, I just go to this tabular view here. Look at this here. This is awesome. So I can just copy those values out, change them a little bit. But that way I can fill out all of my stuff here. All right. Now with the colors, I kind of did the same thing. I gave them the same color. I gave them Their numbers are their their names here fuchsia iris. I had some more fun with these. Yes, I did a little bit too much coffee this morning. We've got peach onyx slate light slate Dorian because I thought Dorian gray cloud because I thought of cloud stripe and little light fluffy clouds for that color. Anyways, I've got our colors kind of documented. We can always now come back and change these for some reason I need to add more documentation to these. All I have to do is go. to the main component here. And in this main component, it's got sort of like this base layout. So I think that's super cool. Remember, once again, I'm going to publish this all out to the community. As soon as we're done with this stream, I'll publish it right away. I have no shame. I'm just going to publish it. And that way it'll be ready for you to go pick a part and see what we did. We're just doing this thing all live. Hey, Roger. Yep. Can I interrupt you and have you turn off your video? Just, I think it might be easier to see the whole screen if your video's off. My video, okay. Your little face. Oh, yeah. Yeah, there we go. No problem. Okay, thank you. I would much rather you see what I'm doing than see my face, which really isn't doing much. Perfect, thanks, bud. Keep going. Thank you. No problem. Okay, so let's see what else we've done. All right, so I set up some little test areas. I set up a couple of icons here just so we don't have to do too much work on those. Who wants to see me draw on icons all day long? I want to talk to you about some of that stuff. Now, today's stream is going to be all about a couple of things. We're going to talk about grids and spacing, and I'm going to give you some different potential tools that you can use with grids and spacing, as well as we're going to be talking about... beginning our components. Now we did start by beginning our components for the actual design system itself, and those were our underscore name ones, but hopefully what we can get to today is some of these. These will be fun. Text input, multi-line text input, buttons, icons, things like this. Let's start using Figma's auto layout and components to create those things. That's going to be super fun. So the first thing we're going to talk about is grids and spacing. So... So there's this idea out there. Now, let me explain something with an example really quick here. So say I put some text here, and this is going to be like my button text here. Let me get in a little closer for you. And let's say there's going to be like an icon potentially next to that here. We'll just put a square. And I'm going to put a auto layout container on that. Hold on a second. Okay. And I'm going to hit Shift A with both selected. to put that into an auto layout container. Another way I can do that is to right click it and I can go to add auto layout. It'll also tell you the little shortcut command right there too, which will help. Okay, now what we need to do is have a system. How far away is this icon from this text? But also, if this is a button, how much padding should it have? So let's just say we put in eight here. I'm just holding shift and going up. That's eight pixels. And let's just put a quick look. like rudimentary background color on this and let's say this is a white button. Now the question really is for me like these numbers eight eight and then let's just say this is eight as well like what controls these how are these systematized well right now they're not systematized because they're actually just in a field. Now this opens up a much larger discussion about design tokens. Now Design tokens are a little bit like coding and code variables where you would store a value in a variable In in code and how this would often get pulled off is that you wouldn't even have eight and eight on your button like this You wouldn't say horizontal padding vertical padding What you would do is you would store that in a variable and that variable would say something like this so I'll just put it here, let's say a Variable or let's say it was in JavaScript, it might say something like let padding equal eight. You might even have another variable up here saying like let base padding equal eight, and you might even just reference that. So you would say something like that, and then you would say something like let button padding equal base padding times two. So this is how often in code Something like this would be systematized. So then if you ever went back and changed this and you said, you know what, man, those buttons are feeling a little cramped. I want to go ahead and bump it up to 12. You could do that and everything would change. Well, in this case, let's say we have a button here. And let's say this is actually our input field here. The problem here is that what if I come in here and I go, ah, yeah, you know what, this is a little tight. I want to go ahead and bump this up to 16 and 16 for my buttons. The issue now is, well, this doesn't have that same relationship. It's not inheriting or getting those 16 pixel values. Also, what if you needed to up this here? So there's a lot of, like I said, a much bigger conversation around this. Right now in Figma, there's not really a native built-in way to do this. But I just want to kind of put a pin in that and that's where I'm going to bring in this idea of a spacer component. So first of all, let's before we jump into the spacer component, let's first just talk about grids. So I'm just going to take these two things that we set up last time and I'm going to get rid of the stuff that I was designing on them. And right here, I'm going to go ahead and share a link with you. And this is just maybe good reading about grids and how flexible and responsive grids might work. But let me go ahead and share this in the chat for all of you. Here we go. Oh, I just caught that pick in the nose joke. Thank you, Asra. You bless me. OK, here we go. So. Right now I've got a flexible grid on here. If you look at that link for that material design, the responsive grid section, you'll understand a little bit more about this. But the idea is that in an era where, yes, we have a desktop here, but we don't know actually how big, maybe somebody has their browser a little bit smaller, or maybe they're on a smaller device. There are so many devices, right? Like if we look in here, we can see here, if I click on this frame tool, You can see that there are all kinds of devices here, and this isn't even all of them. This is just a few, but there's also tablets and all kinds of different screens that we could be designing for. So this is why it's important, and I really like designing with a flexible grid, because at least you don't have to design static elements. Things can resize and squish and grow. So this is what I've done here. I've just added this eight-column grid, and you can easily get to this by... just clicking plus here. Now in the default, it'll actually be an eight pixel grid. So if we go to a columnar grid, you can see now that we've got this same kind of a thing. We can now bump this thing up to eight columns. We can do 12 columns, whatever we'd like to. We can also set gutters and margins. Maybe we want the margin off the side of the screen here to be 32 pixels. Maybe the gutters in between are going to be a little bit smaller, so 16 pixels here. So Let's just say we want to systematize and keep this grid around so that all of our designers will use it. Remember that in Figma, you can always take anything, any one of these little attributes over here. Anytime you see this here, this style icon, you can always come in here and add a create a style from this actual grid type. And I'm going to call this grids. We can even call this large screen. And we can even put in responsive if we want responsive. For now, we're not going to do that. And the reason I'm going to put a slash naming here is because I could actually potentially change this to say, OK, these are responsive grids or these are fluid grids. Probably fluid is a more accurate word for this. So we'll put fluid large screen. And this one here is actually a four column and this will be for our small screen. Let's go check it out We've changed things a little bit here We're gonna go ahead and set our margin of 16 our gutter to 16 now. These aren't set in stone We're just gonna go ahead and go with them for now. I'm gonna go ahead and just click this here and I put fluid Then we can put mobile remember you got to think through your naming convention here, but I'm just gonna put small screen Okay, we're going to create that style there. Okay, now you can see here that we actually have this set. These can also contain multiple grids within them. So this style here, if I go to edit this, I can add another grid. So I could actually put in both eight column or both eight pixel grids and four column grids. And now you can see that it's actually just all saved in this grid style, which is super cool. I'm going to take that out for now. All right, so we've gone ahead and set up our grids. Now if we want to document these grids, there's going to be a lot more grids here. There's going to be a lot more grids that we would potentially make for various sizes of the screen. And then we would want to actually demonstrate what those what those grid sizes would look like on the right canvas size. So here, if we ever wanted to change this, we could choose from the frame drop down menu here. And then we can come down and let's say go to like MacBook. And so we could show various sizes and then we would want to communicate out. Now, I'm not going to do this all on screen because we're going to move on so we can fast forward. But I will do this in my off time and we'll publish this in the design system. But we'll want to communicate out at what sizes we actually want to change grids. So we'll definitely want to do that. But I do have a cool little hint for you right now. So say we go ahead and have these grids now. I'm going to go ahead and ditch this one. We're going to keep these two. We'll just keep these around for now. Now let's say that I want to take these grids and I want them to be kind of solidified into the design system so I can document them and talk about them. Well, I don't know if you know this shortcut, but there's this Ctrl G and it actually turns off and on grids. So the problem would be what if somebody comes in your design system and they don't see these grids because grids are turned off? I have a very cool, very cool plugin to share with you all. And that's actually by our boy Tom Lowry, designer advocate here. Check it out. It's called a layout grid visualizer. Now, this is how you run it. I sent the link right there to y'all. But if I hit command slash, it'll open this quick menu. I could always just go here and hit search as well. And I could always get at this through the plugin menu as well. But I'm looking for a layout grid visualizer. Great. So I need to select a frame or a component with a layout grid. All right, let's do that. Layout grid visualizer, boom. What this plugin does, it doesn't really have a UI. What it does is it takes something, a frame with a grid, and then it replicates that grid with shapes. But that way we can use it for documentation. So, super easy, super cool. I really love it. So we'll go ahead and take this, and then we can turn off grids here. And you can see now that our grid is actually saved on here for us. And we can actually put some documentation and say, hey, there's eight different columns. And this is our margin. This is that. This is our our gutter. All right. Let's do the same thing with this layout grid. Great. Now it went ahead and put that one on there, too. And I believe that this would also work. We'll just do a quick test on this. I believe that this would also work for those eight pixel grids as well. So let's just add layout grid here. I'm going to get rid of this auto generated shape there. Let's see if it works. Yep, sure does. Go ahead and turn this off. We can still see that it has that 8-pixel grid created for us. Oh, I see your comment there, Dennis. You're so lost, you need Figma for beginners. Yeah, this one's going to be a little bit more in-depth. I'll try to go a little bit more slow and explain things as I go as well as I can. But we do have some streams out there that are... more beginner focused on our YouTube site. All right. So I'm going to go and pretty this up and document this and document the things, the decisions that we've made for our grids here. But remember what we did. And the good thing is, is that we actually created those grid styles. So now look what we've got here. We've got, if we click on the canvas, you can see all of the things that we've created. We've got all of these different. type styles, we've got these color styles, and we now have these grid styles. So we're beginning to amass our design system. Excuse me. Okay, so now we're going to talk about spacing. Now I did a little bit too much research on this, and there's lots of schools of thought. And if you remember from the last stream, we talked about type scale. Yeah, Danielle, this is design grids. These things are all to set up the foundations for our design system. How will we align things? How will the padding work for these things? We'll go ahead and start getting to components in just a few minutes. So we're going to come back to spacers here because it's not going to make a lot of sense if I tell you some of these tricks right now. But basically. There needs to be a system by which you define spacing between elements. For instance, I think a really good example might be what if I draw a heading on to my designs, but this is my article title. And I go ahead and I choose and I want it to be a header level one. And then I add below it a subtitle. more about the article here. Now, as designers, we have to ask ourselves and we have to systematize, how do we describe the relationship of space between these two objects? Do we just take the two and just eyeball it? And notice as I drag the space in between these two things and say that's something that I feel looks good. Visually, this is pleasing. the distance between these two items is good. I still need to systematize this and I still need to think how do I describe that relationship between this header and the space below it. One way to do it would be to quite literally just auto layout everything, right? So I'm just going to take both of these objects. Let me just unframe this thing. I could take both of these objects. Okay. Both of these objects here, and I could just add auto layout to them. And then I could use some spacing value in between until I like that. But what happens if now under the subtitle, I now have some body text under here? How do I describe the relationship between all three of these things? Like some of these are getting really cramped. And so if you go over that material design grids and spacing area, I think you're going to understand a little bit more, a little bit more than I can do on the stream. Yep, it looks like Unshul is saying material design uses four X multiplier of text-related spacing. There's a lot of different schools of thought. I just want to let you know this is in code for a type system called Gutenberg. And this, don't worry, this shouldn't make sense. This is cryptic. But I went through some of this and I noticed that there was like a relationship here. And you can see defined by these numbers, you can see that this relationship is something like this. The header level one is going to have three times the leading and the leading is the base font times the line height. So that base font size is 16 pixels. We chose that at the beginning. whatever the line height is, maybe that's 140%. So this is how they define it. Hey, those header level ones, we'll just speak in plain speech here, those header level ones, they need a lot of breathing room. So we're gonna have three times on the top. And on the bottom, we're only gonna have one time, one time of that base, this letting number. And then notice on H2s, it changes, it says, oh. there's going to be only two times that space above, and the margin bottom will only be one. But as we get further down, and you may notice this in blogs and things that you read, websites online that have good typography, you may notice this relationship. Once you get to like a header level three, there's no margin bottom at all. It's just very close to the text. And then, of course, header level four, in this case, this one basically just looks like bold text. So anyways, I didn't want to get... too far into this, but just know that there's a lot of great reading and a lot of great scholarship out there about like the relationship of headers and body text and subtitles and all this stuff. But there's a reason we need to be thinking about all this spacing and all that ahead of time. So I put together some different potential spacing blocks that we could use, just little bits and spacers. So one could be like a linear spacing algorithm and it's just like a linear spacing algorithm. Hey, what if we just took every number and just added eight to it or subtracted eight from it? This would be this. And that's what those spacing units might look like. Or you could do one based off the golden ratio, which is exactly what we did when we did our type system. We will mess around with this in just a second. I know this is probably all getting really, really weird and really like, why do we have to think about all this stuff? I just wanted to plant this in your minds that it is important to think about this kind of stuff ahead of time. But I do want to get into some practical stuff now. So let's head on over and by practical I mean components. I feel like as a designer, I can wrap my head around this and this is going to be pretty fun. So let's get into creating some components. Now I just started something here. Right, I'm going to go ahead and grab this little to do list. I love Figma because I can just do this. I can just grab little bits of text and put it here and that's my to-do list and it just lives with my document. All right. I'm going to pause for just a second. I'm going to pause for just a second. Osra, do we have any questions that I can answer? Um, yeah. Matt wants to ask, would you rather write out the documentation or use the built-in description option in color textiles? I think my answer to that would be I would do both, especially since if my textiles and everything's housed here, right in Figma, so let's come on up here to a textile here. This is the H1, and this is what I believe could be my T, Matt. I can add my description in here to talk more about where I can put like for instance I can say this applies to to the main heading on a page and I can put some documentation here in code it's represented or maybe, you know, more terse here could be something like class name, like CSS class name here. And then I could put a title and maybe it's like an H1.title, something like that. I would prefer to put, because this is, in this case, this is the source of truth from which all of this is derived, all of the code and everything is derived. Let's say this is actually going to be exported into. HTML and CSS, but as well as maybe this relates to iOS or some kind of mobile app I would like this one document to be my source of truth So I'm gonna put as much documentation in these description fields as I can Including I'm also gonna probably have some dev notes in here I might even actually create and this is what we did at my last job. I might actually create a little notes component So maybe I've got some cool thing here and I put a little color on it Let's say let's say that's my note color, I might convert this as well as some text here and create a notes component. So I would really encourage you to do this as well for internal communication. Say this is our notes component, convert this into a note thing, and then put these little notes everywhere like stickies. That way you can communicate. Maybe you have a big layer that's on your document and it's a huge layer. And it's just dev notes and you normally have it turned off, but the devs can turn it back on if they want. I would do any and all things that I could do to communicate out my design system for sure. Once again, I think it all really matters what your source of truth is. So if for some reason, really the source of truth is all the development, the class names and everything that's happening from the developers and the engineers, and it's more of an engineering driven kind of organization, then I might work on having those engineers help me. write a plugin to be able to bring and sync all that up with my Figma doc. So at Figma, you can actually do that. You can actually hit endpoints and pull back and sync. You can sync names and things like that with your developers. Cool. Anshul wants to know, do you prefer linear or nonlinear spacing? I think linear is probably, and sure, I think that linear is probably the easiest for me to understand and wrap my head around. But going with that golden ratio, you know, what feels more like natural and what we see in the real world, sort of more of a natural pattern, I might prefer to go, like, I might tackle nonlinear spacing. But I think linear, especially if you're beginning, it's a lot easier to understand. Oh, and one more question. David wants the shortcut for hide and show grids again. Oh, no problem. That's going to be a that's going to be a control G for hiding show grids. Let me go to a grid so you can see one. Another thing for you, David, if you hit command slash I always remember that's like my master key combo that I remember because if I ever forget anything. Notice I just typed in grid. You can see here. all of those commands will come up here. So if I forget what it was, I can see here, oh look, layout grids. So I can actually just trigger that command and it'll turn it off, but I can also see that the shortcut is right there for me as well. So remember this one above all is going to be your command or control forward slash. All right, all right, so let's get into creating a text field. Let's start our first baby, baby component. All right, so I'm going to go ahead and ditch both of these. These were something I was just working on, but I'm going to go ahead and just draw out, and this will be the more fun and simple and easy part of setting up our components. So I'm going to go ahead and draw out something that's probably maybe 40 to 48. I'm not sure how big our fields are going to be. Just going to start drawing it on the screen. There's really no rhyme or reason to what I'm doing here. I'm just sort of feeling out. I'm sure lots of us designers have done this. I'm going to turn off my grid so I can really see the coloration of what's happening. Maybe I'll put a 8 pixel in here. Notice this is just another reminder that really, as Figma, I think it's something we need to grow into and design systems. I need a way to be able to bind this 8 to a value. What is my border radius value for a normal element on the screen? 8. I don't want to have to repeat that everywhere. because that's like a magic number for me. So once again, things that we could do later, ways that we can improve and grow. All right, so I'm gonna go ahead and put in here my label input text here. All right, and I'm gonna go ahead and keep it on my body style. There it is, my body. And the cool thing here is if I select both of them and I just hit Shift A, I'm going to now convert this into an auto layout frame. Now, this doesn't really work for me because this is more like a button and I don't want it to be a button. I want my input text to be able to align to my grid potentially. And so if I turn that grid on here, my large screen grid, really what I'd like to do is be able to stretch it. So what I'm going to do is turn this from horizontal to vertical. And now I have begun my first element for my design system. All right, perfect. So I'm just going to stretch that out here for now to be two grid segments here, two columns. And I'm going to align this sucker left. And let's look at the qualities here. Ah, this is a little weird. I don't want 17 padding. I want 16 padding here. And I probably want 16 padding here and maybe eight spacing in between. I turn off this grid once again and just look at this thing. Now what's my height here? It's 54. Perfect. All right, so it looks like we've already got ourselves the beginning of a really cool little component. We can even name it to text field. Great. Now if we'd like to turn this into a component, it's pretty simple. We just click this button right here. It's pretty magic. Turns that thing into a component. Now We're going to need a lot of different states for this. So really, we need a bunch of them. So we're going to need let's just put in the states that we need here. We're going to need a placeholder or a default state. We're going to need a active state for this. All right, and I'm just cloning these objects. I'm just dragging them down. And OK, so we're in an active state. Who knows what that might look like. What else am I going to need for this component? Oh, maybe like a entered, like a filled state. And there could be lots of these states, right? Like maybe there's going to be like a verified or a valid state. Maybe that has like a checkbox in it. But the more you see that I'm duplicating all this out, the more you see that like it's probably important that we don't, that all of these have. Some. Hey, there we go. We've got some good ideas. Look at all these great ideas coming out. We've got a disabled right yeah absolutely disabled state. And I'm not going to demonstrate all these, but we'll do a few of these on screen and I'll take care of this work off off screen. Yeah, exactly. An error state. Look at y'all. Oh man, look at so many. There's so many. There's so many. There's like a read only state. Yeah, y'all are smart. And if I could type, we would be in a really good place. Okay, so The problem here is like what if I'm gonna go ahead and take all these and I'm just gonna detach this instance because I did create that to be a component. What if all of a sudden I'm down here and I've created this disabled state. Maybe that looks like this. Super super great out text or something like that. And maybe this is also great out or something. What if all of a sudden I'm like, oh wow. This field, I need it to be just a little bit narrower. It needs to be like a 12 pixel padding. This is, this will be a problem, right? Because all of a sudden here, this field isn't representing this here. All right, so enter this idea of component structures. That's a lot fancier than it really, sounds fancier than it really is. So what I might do here is just put in underscore text field structure. That's because I don't want to publish this. This is once again a helper component. So I'm going to take this and I'm going to option drag it down. And what we're going to do here is we're going to use this one object as the basis for all of those states. This will help us be able to propagate changes to do component swaps and all that kind of stuff much more easily instead of like repeating all of our work. So in this case, we're going to be the default state. We're going to go ahead and drop this down here, our fill. And this will be like our subtle text color. So I'm just going to put in here. Let's call it. Enter text here. That'll be our default one. A lot of people actually they have the trick of putting the actual name of the object in there. So this could be a default text field and that might be something you want to do. Okay, so what I'm going to do now is I'm going to put a wrapper component around this. I'm going to take this instance. I'm going to create it in to be a component. And this one I'm going to call text field. And I'm going to use a slash naming here. Slash. default and you'll see in just one moment why we're gonna do use that slash naming here. Alright so then the next one here I'm not going to duplicate it from here I always want to use this structure as my base. Alright there's two ways to go about this. One way to go about it is just to do the same thing that we did. Duplicate this structure, create a wrapper component around it, And now we'll just call this text field. We'll call this active. The other way to do it would be to just clone this and then detach this instance and recreate it to be a component. But I think we did just fine. So I'm going to call this an active text field. Now, let's put style this a little bit. Let's make it look like it is active. Maybe maybe an active if we go look at our colors, our color system up here. we've actually said this primary fuchsia is actually for focus and active states. So let's see if we like that. It might be a little too pink, and that pink is a little bit close to a red, which may look like an error state, but we'll give it a try. So I'm going to go ahead and add maybe a stroke to this. And we'll do outside. We'll go ahead and change it to our brand pink. Cool. And maybe it's two. Maybe it's one. Now, right off the bat, it is totally looking... Ah, Laura, just to clarify what I said there, a wrapper component is basically if I take this and I create an instance of it. So right here, we have a main component. Now, if I alt-drag or copy-paste this, you'll see here that the icon changes. This is now a instance of this component. Now I'm going to create a component out of this instance, and that's what I call a wrapper component. So if I just hit create component while it's on this instance, you'll see what happens. You'll see that inside of this it still has an instance of it. Right here you can see it's an instance of this text field structure, but here is my now what I'm calling wrapper. component. Thanks for asking. Thanks for getting clarity on that. Okay, so in this active field, maybe we're going to get rid of this kind of subtle gray background and we'll just go with like a white. So let's do that. We actually don't have a white in our system, so we might want to create one of those. So I'm going to go ahead and break this color here, this color style. I'm going to go ahead and turn it into white and I'm just going to create a white. I feel like everyone's got to have a little white there. OK, cool. Now, one thing I want to showcase really quick, because I was a part of this feature and I'm super excited about it, is this style. What if we wanted to have a little bit of, I don't know, like a glow or something like this around this? And we can't normally create double borders in Figma, but we just released this. Check this out. If I add a drop shadow to this, I can actually create a simulation of a double border. by hitting spread to yes Ari you're following me awesome I'm gonna go ahead and change this to my local colors choose my color there and maybe that's at 20% maybe that's it for who knows what it's gonna be but hey there's my active text field I'm very quickly realizing that this looks like an error we'll take care of that we'll change that to that blue that's gonna be our secondary brand color and we can use that as well Since I'm also the designer and the brander on this thing, I guess I can make those kind of decisions. All right. Oh, I just made a mistake. Let's go back down to that 20 percent like that. That was a subtle value. OK, we're only going to create two of these. I know you put a ton of states in there and there's so many different things that I now need to do. Thank you for my homework. But I want to get on to some new thoughts and new ideas here. But basically what we've got now is we've got a default text field. So let's go over what we did. We created a structure here. And why did we do that? Well, we did that if for any reason some of these things change. Maybe this font goes up and gets bigger. We want all of our text fields. They all inherit the same kind of stuff. They all have the same padding and spacing and this and that. We don't want to We don't want to repeat ourselves here. We don't want to have to constantly create, like we don't want to have to go and create a change here and then create a change in eight other components. So we're honoring the do not repeat yourself rule there. So we created a structure component and now we have those structure components inside each one of these. Text field active, text field default. Now the reason that we name them this way is this. Let's take an instance of this. Now every time you have a main component, if I simply copy paste or alt or option drag it off over here, you'll see here now I have an instance of this. The reason that we named it the way that we did is because notice now here in this menu, we have an active and a default. And the more components we start adding into this naming convention over here, text field slash, this menu will honor that. It'll honor that naming convention, which is super cool. Also if we look in the assets here and we go into the style guide now. we've got a couple of problems here because I've framed this with a desktop grid and I'll show you how to get out of that. We don't really want our style guide to say desktop grid. We don't want that at all. So one way we could do that, let's just get out of this grid. One thing to note is that these, the frame that you put your components on can be a form of naming, almost like a foldering system. So if I take all of these out of here, and I ditch that grid, and I just put my components out right here on the canvas, notice that we have now style guide text field. That's because of this naming convention here. And if I open up text field, you'll see my different text fields there. You see my default and my active. So in this same way, I can use grids to my advantage by creating. grid around this or not a grid sorry a frame I can use frames to my advantage by drawing a frame around here notice now my style guide says style guide slash frame 12 that's not at all helpful so what I want to change this name to is maybe this is our form elements so form elements so now under the assets we'll see here style guide form elements and then underneath these form elements we have text fields. So we can use a combination of things. We can use the page name as a layer of almost like a foldering system, an organization system. Then we can use the frame name to be able to organize items underneath it. And then we can use slash naming inside of the component. So let me come right back here. Remember this one here? We can use slash naming here to create another layer of menuing or... Foldering within this. OK. All right, so let's let's just kind of push at the edges of this field, because we really as the creators of design systems, we have to be able to make these things work for a lot of different cases. Our designers that are using them are going to have lots of different ways that they use this. And right now. We just have these two things. So let's just see here. Does this work? Does it scale? So I always do this as a test. I take my instances. Oh, notice we already broke it. I always take my instances like this and I try to scale them and see what's going on. Add text into them. Do they work the way that I think they should? So the first thing that we've got wrong is I'm moving this, but this is not scaling to that. So let's just go into this. field here and look and see what's going on here. So probably a way that we could fix this is that notice on this text field structure, we have it set to a vertical auto layout, where we could just set this to a vertical auto layout as well here, which we did. We could set it to a horizontal auto layout if we wanted to, but I want to be able to change the size horizontally, so we're not going to do horizontal. All right, so what I'd like to do here is... maybe set up the constraints on this one here to be able to stretch to its container. So since this is a vertical auto layout, I don't know how much you all know about auto layout, but one thing that's really powerful is that if you have a vertical auto layout container, its child components or child objects really can stretch. So I'm just going to click that stretch left and right. And let's see if that fixed our problem. And indeed it did. Awesome. Now we're probably gonna have to fix it for this one as well. But once we have it fixed, it's fixed. Perfect. All right, now. I would love to see, we're going to need some like left prepended icons and some right prepended icons on these things. So I'm going to jump you into some thoughts around icons. I think I have about 10 minutes. So I want to address your questions first, and then I would like to show you some tricks with icons, some cool things I know. But let's take a pause and see if I can answer a few questions. Sure, thank you. TJ wants to know, is it best to use frame color or solid shapes for components when defining background color? I don't, it really depends. On a component that has like shapes, you may struggle if you're wanting to add auto layout into that, in which case I would be using frames. Notice on this text field structure here, if I were to just draw a shape in, with auto layout it's very difficult to just draw right into the layer there, like right into this auto layout container, so I tend to use the outer frame for that. Cool. Puya wants to know, what's the best width for label icons and text fields, outlined or filled? Let me see. Can you repeat that one more time, Azra? What's the best weight for label icons and text fields? Ooh, that's a tough one. First of all, I feel like it relates a little bit to your typography. What we don't want, let's just go ahead and we'll do a little bit of jumping ahead here. Let's just say I want to put this icon in here. If this weight of this icon, which I've actually created some very complex stuff in here. because I wanted to show you some cool tricks. If this thing's super, super thick and chunky like that, it may be very legible, but it may not exist well with the typography. That typography is pretty thin. This is really, really beefy. So I think it depends. I'm going to give you a resounding, it depends. Also, those line weights can be way too thin, which are not legible as well. I think the smallest I've ever seen people go is like a one pixel. line weight. But if you're creating icons that are scalable, it really just depends. Because a one pixel at 24 pixel by 24 pixel frame size might be okay. But if you actually like scale it down, it could be very illegible. I know from a frame size perspective, I know that a lot of people work with like a 24 pixel by 24 pixel icon size as far as a frame goes. Great. Another question is what naming convention do you use for spacers? Spacers are pretty new, being completely honest with you, spacers are a pretty new concept to me in Figma, not in code, but in Figma. So I'm pretty new to it all and I'm going to demonstrate using some spacers but Spacers are kind of a weird thing because I think that they're a bit of a, like we're going to grow out of them at some point because I feel like once we can get design tokens, we're going to be out of the need for like a spacer component. So I don't really have a great answer for you. Sorry. Corinne wants to know, can you show the stretch left and right again? Yeah, I'll do it for you. And I'll do it in a way that's like just probably maybe a little bit simpler. not working with like a complex component. So let's just add a stroke on this here. All right, so we've got this frame and I'm just going to add like a little square in the middle of it. Now if I go to this frame and I just go to the auto layout portion of it, I hit plus here, I can actually change it to a vertical auto layout and then I can adjust things here, right? Like I can adjust horizontal padding and I can adjust vertical padding. But what if I want this thing to be left aligned? It's left aligned now. Actually, let's do this. Let's go away like this. It's left aligned now, but I can go right aligned. I can go center aligned. You can also drag it, and it'll go left aligned center, but left, right, and center. But what if I want to stretch it? All I have to do, notice when I select the auto layout frame, I don't see that control here, but as soon as I select a child layer of a... Auto Layout container, you'll see right here those three align options plus stretch here. Watch as I hit stretch, it'll stretch and that means if I adjust this that will actually stretch to adjust. Cool? One more question. What are you utilizing the color scale for? I see some values listed under the primary, secondary color, but not as published styles in the design panel. I'm guessing you're talking about this here. So we've got these values. We've got these color values here and notice we only have these here. So this is something that I'm working on that I'd love to loop back to But it's this notion of like I'd like to be able to use maybe not every single color here. So some colors in this brand system. I'm just gonna have dark. I'm not going to these all these shades of it. I've already got those shades here that I want. I've got the dark the slate light slate Dorian and cloud but For these three main brand colors, I really wanted to create some flexibility around those to be able to use lighter tones of this for different reasons. Like especially notice here with this light light light tone here, we're effectively kind of doing something like that here on this focus state. So I'm probably going to want to utilize that color. I have not published these into styles yet, but I absolutely will once my design system kind of settles a little bit. Right now everything is just all up in the air so much and I'm trying to figure out this system but I will probably go in and take these shades and then communicate them in here and then come in and publish them out. So you're right, you're right to observe that like we don't have those yet. Um, Ashul wants to know are these tints? Yeah, those are gonna be different shades or different tints of of these main three brand colors. We did this a lot. I've done this a lot at two different companies where we would take the brand colors and then we would have different tints of those so that we, and there'll be a naming convention around them that I think will be really helpful. And I'll talk more about that on a later stream, but these will be able to use for things like subtle notes of that brand when we want to focus states, but we don't want just screaming at you. So. We'll probably use these for like subtle buttons. Cause remember we haven't, we haven't even talked about buttons yet, primary buttons and sort of like a secondary button. We haven't really talked about what that looks like and we still need to design that. But I imagine we're going to be getting to that next stream. Awesome. Speaking of the next stream, I know we're out of time. Our next stream, these are usually on Mondays, but next week it's going to be on Tuesday, same time. So we hope to see you all there. Raji, do you have any parting thoughts? I do. I have a little bit of like some homework for you all. So one thing that I was going to share with you that we didn't get quite enough time for was that I set up this icon component. And I actually set it up with this really cool grid and these key lines to be able to help all of my icons in my system feel unified. I don't know if you all watched our stream that Noah Jacobus and I did, but I've got that for you right here. I've got that stream for you, but we also have a really, really amazing Figma file that Noah made for the stream. And I'm going to go ahead and drop this in here. That Figma file is also on that YouTube link. So I advise that you go ahead and download and duplicate that Figma file so that you can see the way these key lines work and a little bit of the philosophies behind creating icon design and icon systems and cohesive icon sets. But I guess I'll leave it at that. And just let you know that on the next stream, what we're going to get into is making this component not not just text in it, but we're going to build a drop in some icons here. It's going to be pretty sweet. You can see here a little bit of what I'm doing on screen, but I'll talk about some different methodologies for being able to swap those icons out or turn them off or on and make this one little input this text input like a powerhouse of a component so Super stoked that y'all came. Thank you everyone for coming. There's so much so much stuff to cover here so thank you all for all your great questions. Have a great day!

There's communication, rules, documentation. Where do you put your documentation? Is it all in Figma? Do you have it sitting somewhere else?

There's lots there. There's also the code that goes, that accompanies the design system. that's a translation of that and all the rules around that that you've talked with your developers about.

So design systems a conversation It's a lot of different things all working in tandem some kind of system to build a sync up all these things But anyways, we're talking specifically though about design systems and designing them in Figma because that's what we're doing So I did promise you that I would have that moment where When I pull the design system back out here, we're going to have some new cool things. And so if any of you have ever seen Figma's automatic version history, you can see here, if we go back and back and back, we can actually go and see what happened this morning. What did this thing look like this morning?

Or what did it look like, let's see, yeah, what did it look like here? So this is what our design system looked like at the end of our. stream as of last week.

And so, Asra, if you could help me too and just throw the link out for the previous stream out there, just in case people haven't got that, at least they can have that now. That would be awesome. Okay, so this is what our design system looked like.

It didn't look like much. It wasn't very organized, but it was the basics of something good. I always promised absolutely nothing.

I always promised that I was just going to build and we would see where we would get. Okay, but... as of today, this is where we're at.

So I did a little bit of work on it. Now, I didn't do too much stuff without you. So what I did is just kind of document some of this stuff.

And so what I would encourage you as you build your design system, start creating little design system components. So I actually underscore name these things. So you can see here, it's underscore design system, blah, The reason for that is when I go to publish, so when I go to publish this design system, when I go to publish styles and components, and I publish this to my team that I'm working with, that little underscore there is going to be ignored by Figma. So if you actually, I went back to the version history. Good job, Raj.

So let me do this. If I hit this, we're not on a team right now. I'm in drafts right now.

So we'll show this in a few episodes. But you would see. that all of these ones with an underscore at the beginning of the name are actually ignored.

So what I encourage you to do is create all these little helper components. There's no reason that you can't use components to help structure your design system. So here's what I've created. I actually created a little icon grid here. We'll talk about that in just a second.

I'm going to show you that grid. I'll show you another stream that you can watch that might help you out with icon design. As well as I created a little swatch. And this swatch has a few things on it. It's got a color name on it.

It's got the color hex code. And then it's got potential shades of different shades of that color in case we want to, especially since this one is our brand color. And then I created like a color listing. And I used all the bells and whistles for this. I used auto layout.

That way I can make this thing get bigger and smaller. And that way I can actually take things out or put them back in. And. the whole container will resize.

I started creating like a type pairing, like what happens when you have a article heading or a title and then a subtitle and then body copy here. How do those rules work? So I started working on that, but really what you'll see here is that I've got all this here now. I've kind of documented out each one of our, here's our title or header one, header two, header three, and then I've got in here.

all the different qualities of that. So if you'd like, and if you remember, let's say on this header two, you can see here it says H2. And if I go over to this code area and I don't do the actual CSS code, I just go to this tabular view here. Look at this here.

This is awesome. So I can just copy those values out, change them a little bit. But that way I can fill out all of my stuff here. All right. Now with the colors, I kind of did the same thing.

I gave them the same color. I gave them Their numbers are their their names here fuchsia iris. I had some more fun with these. Yes, I did a little bit too much coffee this morning.

We've got peach onyx slate light slate Dorian because I thought Dorian gray cloud because I thought of cloud stripe and little light fluffy clouds for that color. Anyways, I've got our colors kind of documented. We can always now come back and change these for some reason I need to add more documentation to these. All I have to do is go.

to the main component here. And in this main component, it's got sort of like this base layout. So I think that's super cool.

Remember, once again, I'm going to publish this all out to the community. As soon as we're done with this stream, I'll publish it right away. I have no shame.

I'm just going to publish it. And that way it'll be ready for you to go pick a part and see what we did. We're just doing this thing all live.

Hey, Roger. Yep. Can I interrupt you and have you turn off your video?

Just, I think it might be easier to see the whole screen if your video's off. My video, okay. Your little face.

Oh, yeah. Yeah, there we go. No problem. Okay, thank you. I would much rather you see what I'm doing than see my face, which really isn't doing much.

Perfect, thanks, bud. Keep going. Thank you. No problem. Okay, so let's see what else we've done.

All right, so I set up some little test areas. I set up a couple of icons here just so we don't have to do too much work on those. Who wants to see me draw on icons all day long? I want to talk to you about some of that stuff. Now, today's stream is going to be all about a couple of things.

We're going to talk about grids and spacing, and I'm going to give you some different potential tools that you can use with grids and spacing, as well as we're going to be talking about... beginning our components. Now we did start by beginning our components for the actual design system itself, and those were our underscore name ones, but hopefully what we can get to today is some of these. These will be fun.

Text input, multi-line text input, buttons, icons, things like this. Let's start using Figma's auto layout and components to create those things. That's going to be super fun. So the first thing we're going to talk about is grids and spacing. So...

So there's this idea out there. Now, let me explain something with an example really quick here. So say I put some text here, and this is going to be like my button text here.

Let me get in a little closer for you. And let's say there's going to be like an icon potentially next to that here. We'll just put a square. And I'm going to put a auto layout container on that. Hold on a second.

Okay. And I'm going to hit Shift A with both selected. to put that into an auto layout container.

Another way I can do that is to right click it and I can go to add auto layout. It'll also tell you the little shortcut command right there too, which will help. Okay, now what we need to do is have a system.

How far away is this icon from this text? But also, if this is a button, how much padding should it have? So let's just say we put in eight here.

I'm just holding shift and going up. That's eight pixels. And let's just put a quick look.

like rudimentary background color on this and let's say this is a white button. Now the question really is for me like these numbers eight eight and then let's just say this is eight as well like what controls these how are these systematized well right now they're not systematized because they're actually just in a field. Now this opens up a much larger discussion about design tokens. Now Design tokens are a little bit like coding and code variables where you would store a value in a variable In in code and how this would often get pulled off is that you wouldn't even have eight and eight on your button like this You wouldn't say horizontal padding vertical padding What you would do is you would store that in a variable and that variable would say something like this so I'll just put it here, let's say a Variable or let's say it was in JavaScript, it might say something like let padding equal eight.

You might even have another variable up here saying like let base padding equal eight, and you might even just reference that. So you would say something like that, and then you would say something like let button padding equal base padding times two. So this is how often in code Something like this would be systematized.

So then if you ever went back and changed this and you said, you know what, man, those buttons are feeling a little cramped. I want to go ahead and bump it up to 12. You could do that and everything would change. Well, in this case, let's say we have a button here. And let's say this is actually our input field here. The problem here is that what if I come in here and I go, ah, yeah, you know what, this is a little tight.

I want to go ahead and bump this up to 16 and 16 for my buttons. The issue now is, well, this doesn't have that same relationship. It's not inheriting or getting those 16 pixel values. Also, what if you needed to up this here?

So there's a lot of, like I said, a much bigger conversation around this. Right now in Figma, there's not really a native built-in way to do this. But I just want to kind of put a pin in that and that's where I'm going to bring in this idea of a spacer component.

So first of all, let's before we jump into the spacer component, let's first just talk about grids. So I'm just going to take these two things that we set up last time and I'm going to get rid of the stuff that I was designing on them. And right here, I'm going to go ahead and share a link with you.

And this is just maybe good reading about grids and how flexible and responsive grids might work. But let me go ahead and share this in the chat for all of you. Here we go. Oh, I just caught that pick in the nose joke. Thank you, Asra.

You bless me. OK, here we go. So.

Right now I've got a flexible grid on here. If you look at that link for that material design, the responsive grid section, you'll understand a little bit more about this. But the idea is that in an era where, yes, we have a desktop here, but we don't know actually how big, maybe somebody has their browser a little bit smaller, or maybe they're on a smaller device.

There are so many devices, right? Like if we look in here, we can see here, if I click on this frame tool, You can see that there are all kinds of devices here, and this isn't even all of them. This is just a few, but there's also tablets and all kinds of different screens that we could be designing for. So this is why it's important, and I really like designing with a flexible grid, because at least you don't have to design static elements. Things can resize and squish and grow.

So this is what I've done here. I've just added this eight-column grid, and you can easily get to this by... just clicking plus here.

Now in the default, it'll actually be an eight pixel grid. So if we go to a columnar grid, you can see now that we've got this same kind of a thing. We can now bump this thing up to eight columns. We can do 12 columns, whatever we'd like to.

We can also set gutters and margins. Maybe we want the margin off the side of the screen here to be 32 pixels. Maybe the gutters in between are going to be a little bit smaller, so 16 pixels here. So Let's just say we want to systematize and keep this grid around so that all of our designers will use it.

Remember that in Figma, you can always take anything, any one of these little attributes over here. Anytime you see this here, this style icon, you can always come in here and add a create a style from this actual grid type. And I'm going to call this grids. We can even call this large screen. And we can even put in responsive if we want responsive.

For now, we're not going to do that. And the reason I'm going to put a slash naming here is because I could actually potentially change this to say, OK, these are responsive grids or these are fluid grids. Probably fluid is a more accurate word for this.

So we'll put fluid large screen. And this one here is actually a four column and this will be for our small screen. Let's go check it out We've changed things a little bit here We're gonna go ahead and set our margin of 16 our gutter to 16 now. These aren't set in stone We're just gonna go ahead and go with them for now.

I'm gonna go ahead and just click this here and I put fluid Then we can put mobile remember you got to think through your naming convention here, but I'm just gonna put small screen Okay, we're going to create that style there. Okay, now you can see here that we actually have this set. These can also contain multiple grids within them.

So this style here, if I go to edit this, I can add another grid. So I could actually put in both eight column or both eight pixel grids and four column grids. And now you can see that it's actually just all saved in this grid style, which is super cool. I'm going to take that out for now. All right, so we've gone ahead and set up our grids.

Now if we want to document these grids, there's going to be a lot more grids here. There's going to be a lot more grids that we would potentially make for various sizes of the screen. And then we would want to actually demonstrate what those what those grid sizes would look like on the right canvas size. So here, if we ever wanted to change this, we could choose from the frame drop down menu here.

And then we can come down and let's say go to like MacBook. And so we could show various sizes and then we would want to communicate out. Now, I'm not going to do this all on screen because we're going to move on so we can fast forward. But I will do this in my off time and we'll publish this in the design system. But we'll want to communicate out at what sizes we actually want to change grids.

So we'll definitely want to do that. But I do have a cool little hint for you right now. So say we go ahead and have these grids now. I'm going to go ahead and ditch this one.

We're going to keep these two. We'll just keep these around for now. Now let's say that I want to take these grids and I want them to be kind of solidified into the design system so I can document them and talk about them.

Well, I don't know if you know this shortcut, but there's this Ctrl G and it actually turns off and on grids. So the problem would be what if somebody comes in your design system and they don't see these grids because grids are turned off? I have a very cool, very cool plugin to share with you all.

And that's actually by our boy Tom Lowry, designer advocate here. Check it out. It's called a layout grid visualizer. Now, this is how you run it.

I sent the link right there to y'all. But if I hit command slash, it'll open this quick menu. I could always just go here and hit search as well.

And I could always get at this through the plugin menu as well. But I'm looking for a layout grid visualizer. Great.

So I need to select a frame or a component with a layout grid. All right, let's do that. Layout grid visualizer, boom. What this plugin does, it doesn't really have a UI. What it does is it takes something, a frame with a grid, and then it replicates that grid with shapes.

But that way we can use it for documentation. So, super easy, super cool. I really love it.

So we'll go ahead and take this, and then we can turn off grids here. And you can see now that our grid is actually saved on here for us. And we can actually put some documentation and say, hey, there's eight different columns.

And this is our margin. This is that. This is our our gutter.

All right. Let's do the same thing with this layout grid. Great. Now it went ahead and put that one on there, too.

And I believe that this would also work. We'll just do a quick test on this. I believe that this would also work for those eight pixel grids as well.

So let's just add layout grid here. I'm going to get rid of this auto generated shape there. Let's see if it works.

Yep, sure does. Go ahead and turn this off. We can still see that it has that 8-pixel grid created for us. Oh, I see your comment there, Dennis. You're so lost, you need Figma for beginners.

Yeah, this one's going to be a little bit more in-depth. I'll try to go a little bit more slow and explain things as I go as well as I can. But we do have some streams out there that are... more beginner focused on our YouTube site. All right.

So I'm going to go and pretty this up and document this and document the things, the decisions that we've made for our grids here. But remember what we did. And the good thing is, is that we actually created those grid styles. So now look what we've got here.

We've got, if we click on the canvas, you can see all of the things that we've created. We've got all of these different. type styles, we've got these color styles, and we now have these grid styles. So we're beginning to amass our design system. Excuse me.

Okay, so now we're going to talk about spacing. Now I did a little bit too much research on this, and there's lots of schools of thought. And if you remember from the last stream, we talked about type scale. Yeah, Danielle, this is design grids. These things are all to set up the foundations for our design system.

How will we align things? How will the padding work for these things? We'll go ahead and start getting to components in just a few minutes. So we're going to come back to spacers here because it's not going to make a lot of sense if I tell you some of these tricks right now.

But basically. There needs to be a system by which you define spacing between elements. For instance, I think a really good example might be what if I draw a heading on to my designs, but this is my article title.

And I go ahead and I choose and I want it to be a header level one. And then I add below it a subtitle. more about the article here. Now, as designers, we have to ask ourselves and we have to systematize, how do we describe the relationship of space between these two objects?

Do we just take the two and just eyeball it? And notice as I drag the space in between these two things and say that's something that I feel looks good. Visually, this is pleasing.

the distance between these two items is good. I still need to systematize this and I still need to think how do I describe that relationship between this header and the space below it. One way to do it would be to quite literally just auto layout everything, right?

So I'm just going to take both of these objects. Let me just unframe this thing. I could take both of these objects. Okay. Both of these objects here, and I could just add auto layout to them.

And then I could use some spacing value in between until I like that. But what happens if now under the subtitle, I now have some body text under here? How do I describe the relationship between all three of these things?

Like some of these are getting really cramped. And so if you go over that material design grids and spacing area, I think you're going to understand a little bit more, a little bit more than I can do on the stream. Yep, it looks like Unshul is saying material design uses four X multiplier of text-related spacing. There's a lot of different schools of thought. I just want to let you know this is in code for a type system called Gutenberg.

And this, don't worry, this shouldn't make sense. This is cryptic. But I went through some of this and I noticed that there was like a relationship here.

And you can see defined by these numbers, you can see that this relationship is something like this. The header level one is going to have three times the leading and the leading is the base font times the line height. So that base font size is 16 pixels. We chose that at the beginning. whatever the line height is, maybe that's 140%.

So this is how they define it. Hey, those header level ones, we'll just speak in plain speech here, those header level ones, they need a lot of breathing room. So we're gonna have three times on the top.

And on the bottom, we're only gonna have one time, one time of that base, this letting number. And then notice on H2s, it changes, it says, oh. there's going to be only two times that space above, and the margin bottom will only be one.

But as we get further down, and you may notice this in blogs and things that you read, websites online that have good typography, you may notice this relationship. Once you get to like a header level three, there's no margin bottom at all. It's just very close to the text. And then, of course, header level four, in this case, this one basically just looks like bold text.

So anyways, I didn't want to get... too far into this, but just know that there's a lot of great reading and a lot of great scholarship out there about like the relationship of headers and body text and subtitles and all this stuff. But there's a reason we need to be thinking about all this spacing and all that ahead of time. So I put together some different potential spacing blocks that we could use, just little bits and spacers. So one could be like a linear spacing algorithm and it's just like a linear spacing algorithm.

Hey, what if we just took every number and just added eight to it or subtracted eight from it? This would be this. And that's what those spacing units might look like. Or you could do one based off the golden ratio, which is exactly what we did when we did our type system.

We will mess around with this in just a second. I know this is probably all getting really, really weird and really like, why do we have to think about all this stuff? I just wanted to plant this in your minds that it is important to think about this kind of stuff ahead of time.

But I do want to get into some practical stuff now. So let's head on over and by practical I mean components. I feel like as a designer, I can wrap my head around this and this is going to be pretty fun. So let's get into creating some components. Now I just started something here.

Right, I'm going to go ahead and grab this little to do list. I love Figma because I can just do this. I can just grab little bits of text and put it here and that's my to-do list and it just lives with my document.

All right. I'm going to pause for just a second. I'm going to pause for just a second.

Osra, do we have any questions that I can answer? Um, yeah. Matt wants to ask, would you rather write out the documentation or use the built-in description option in color textiles? I think my answer to that would be I would do both, especially since if my textiles and everything's housed here, right in Figma, so let's come on up here to a textile here.

This is the H1, and this is what I believe could be my T, Matt. I can add my description in here to talk more about where I can put like for instance I can say this applies to to the main heading on a page and I can put some documentation here in code it's represented or maybe, you know, more terse here could be something like class name, like CSS class name here. And then I could put a title and maybe it's like an H1.title, something like that.

I would prefer to put, because this is, in this case, this is the source of truth from which all of this is derived, all of the code and everything is derived. Let's say this is actually going to be exported into. HTML and CSS, but as well as maybe this relates to iOS or some kind of mobile app I would like this one document to be my source of truth So I'm gonna put as much documentation in these description fields as I can Including I'm also gonna probably have some dev notes in here I might even actually create and this is what we did at my last job. I might actually create a little notes component So maybe I've got some cool thing here and I put a little color on it Let's say let's say that's my note color, I might convert this as well as some text here and create a notes component.

So I would really encourage you to do this as well for internal communication. Say this is our notes component, convert this into a note thing, and then put these little notes everywhere like stickies. That way you can communicate.

Maybe you have a big layer that's on your document and it's a huge layer. And it's just dev notes and you normally have it turned off, but the devs can turn it back on if they want. I would do any and all things that I could do to communicate out my design system for sure. Once again, I think it all really matters what your source of truth is. So if for some reason, really the source of truth is all the development, the class names and everything that's happening from the developers and the engineers, and it's more of an engineering driven kind of organization, then I might work on having those engineers help me. write a plugin to be able to bring and sync all that up with my Figma doc.

So at Figma, you can actually do that. You can actually hit endpoints and pull back and sync. You can sync names and things like that with your developers.

Cool. Anshul wants to know, do you prefer linear or nonlinear spacing? I think linear is probably, and sure, I think that linear is probably the easiest for me to understand and wrap my head around.

But going with that golden ratio, you know, what feels more like natural and what we see in the real world, sort of more of a natural pattern, I might prefer to go, like, I might tackle nonlinear spacing. But I think linear, especially if you're beginning, it's a lot easier to understand. Oh, and one more question. David wants the shortcut for hide and show grids again. Oh, no problem.

That's going to be a that's going to be a control G for hiding show grids. Let me go to a grid so you can see one. Another thing for you, David, if you hit command slash I always remember that's like my master key combo that I remember because if I ever forget anything. Notice I just typed in grid.

You can see here. all of those commands will come up here. So if I forget what it was, I can see here, oh look, layout grids.

So I can actually just trigger that command and it'll turn it off, but I can also see that the shortcut is right there for me as well. So remember this one above all is going to be your command or control forward slash. All right, all right, so let's get into creating a text field.

Let's start our first baby, baby component. All right, so I'm going to go ahead and ditch both of these. These were something I was just working on, but I'm going to go ahead and just draw out, and this will be the more fun and simple and easy part of setting up our components.

So I'm going to go ahead and draw out something that's probably maybe 40 to 48. I'm not sure how big our fields are going to be. Just going to start drawing it on the screen. There's really no rhyme or reason to what I'm doing here.

I'm just sort of feeling out. I'm sure lots of us designers have done this. I'm going to turn off my grid so I can really see the coloration of what's happening.

Maybe I'll put a 8 pixel in here. Notice this is just another reminder that really, as Figma, I think it's something we need to grow into and design systems. I need a way to be able to bind this 8 to a value. What is my border radius value for a normal element on the screen?

8. I don't want to have to repeat that everywhere. because that's like a magic number for me. So once again, things that we could do later, ways that we can improve and grow.

All right, so I'm gonna go ahead and put in here my label input text here. All right, and I'm gonna go ahead and keep it on my body style. There it is, my body.

And the cool thing here is if I select both of them and I just hit Shift A, I'm going to now convert this into an auto layout frame. Now, this doesn't really work for me because this is more like a button and I don't want it to be a button. I want my input text to be able to align to my grid potentially. And so if I turn that grid on here, my large screen grid, really what I'd like to do is be able to stretch it.

So what I'm going to do is turn this from horizontal to vertical. And now I have begun my first element for my design system. All right, perfect. So I'm just going to stretch that out here for now to be two grid segments here, two columns.

And I'm going to align this sucker left. And let's look at the qualities here. Ah, this is a little weird. I don't want 17 padding. I want 16 padding here.

And I probably want 16 padding here and maybe eight spacing in between. I turn off this grid once again and just look at this thing. Now what's my height here? It's 54. Perfect. All right, so it looks like we've already got ourselves the beginning of a really cool little component.

We can even name it to text field. Great. Now if we'd like to turn this into a component, it's pretty simple. We just click this button right here. It's pretty magic.

Turns that thing into a component. Now We're going to need a lot of different states for this. So really, we need a bunch of them.

So we're going to need let's just put in the states that we need here. We're going to need a placeholder or a default state. We're going to need a active state for this. All right, and I'm just cloning these objects.

I'm just dragging them down. And OK, so we're in an active state. Who knows what that might look like.

What else am I going to need for this component? Oh, maybe like a entered, like a filled state. And there could be lots of these states, right?

Like maybe there's going to be like a verified or a valid state. Maybe that has like a checkbox in it. But the more you see that I'm duplicating all this out, the more you see that like it's probably important that we don't, that all of these have. Some.

Hey, there we go. We've got some good ideas. Look at all these great ideas coming out.

We've got a disabled right yeah absolutely disabled state. And I'm not going to demonstrate all these, but we'll do a few of these on screen and I'll take care of this work off off screen. Yeah, exactly.

An error state. Look at y'all. Oh man, look at so many. There's so many. There's so many.

There's like a read only state. Yeah, y'all are smart. And if I could type, we would be in a really good place. Okay, so The problem here is like what if I'm gonna go ahead and take all these and I'm just gonna detach this instance because I did create that to be a component. What if all of a sudden I'm down here and I've created this disabled state.

Maybe that looks like this. Super super great out text or something like that. And maybe this is also great out or something. What if all of a sudden I'm like, oh wow.

This field, I need it to be just a little bit narrower. It needs to be like a 12 pixel padding. This is, this will be a problem, right? Because all of a sudden here, this field isn't representing this here.

All right, so enter this idea of component structures. That's a lot fancier than it really, sounds fancier than it really is. So what I might do here is just put in underscore text field structure.

That's because I don't want to publish this. This is once again a helper component. So I'm going to take this and I'm going to option drag it down.

And what we're going to do here is we're going to use this one object as the basis for all of those states. This will help us be able to propagate changes to do component swaps and all that kind of stuff much more easily instead of like repeating all of our work. So in this case, we're going to be the default state. We're going to go ahead and drop this down here, our fill.

And this will be like our subtle text color. So I'm just going to put in here. Let's call it. Enter text here.

That'll be our default one. A lot of people actually they have the trick of putting the actual name of the object in there. So this could be a default text field and that might be something you want to do. Okay, so what I'm going to do now is I'm going to put a wrapper component around this. I'm going to take this instance.

I'm going to create it in to be a component. And this one I'm going to call text field. And I'm going to use a slash naming here. Slash.

default and you'll see in just one moment why we're gonna do use that slash naming here. Alright so then the next one here I'm not going to duplicate it from here I always want to use this structure as my base. Alright there's two ways to go about this. One way to go about it is just to do the same thing that we did. Duplicate this structure, create a wrapper component around it, And now we'll just call this text field.

We'll call this active. The other way to do it would be to just clone this and then detach this instance and recreate it to be a component. But I think we did just fine.

So I'm going to call this an active text field. Now, let's put style this a little bit. Let's make it look like it is active. Maybe maybe an active if we go look at our colors, our color system up here. we've actually said this primary fuchsia is actually for focus and active states.

So let's see if we like that. It might be a little too pink, and that pink is a little bit close to a red, which may look like an error state, but we'll give it a try. So I'm going to go ahead and add maybe a stroke to this.

And we'll do outside. We'll go ahead and change it to our brand pink. Cool. And maybe it's two. Maybe it's one.

Now, right off the bat, it is totally looking... Ah, Laura, just to clarify what I said there, a wrapper component is basically if I take this and I create an instance of it. So right here, we have a main component. Now, if I alt-drag or copy-paste this, you'll see here that the icon changes. This is now a instance of this component.

Now I'm going to create a component out of this instance, and that's what I call a wrapper component. So if I just hit create component while it's on this instance, you'll see what happens. You'll see that inside of this it still has an instance of it.

Right here you can see it's an instance of this text field structure, but here is my now what I'm calling wrapper. component. Thanks for asking.

Thanks for getting clarity on that. Okay, so in this active field, maybe we're going to get rid of this kind of subtle gray background and we'll just go with like a white. So let's do that. We actually don't have a white in our system, so we might want to create one of those.

So I'm going to go ahead and break this color here, this color style. I'm going to go ahead and turn it into white and I'm just going to create a white. I feel like everyone's got to have a little white there. OK, cool. Now, one thing I want to showcase really quick, because I was a part of this feature and I'm super excited about it, is this style.

What if we wanted to have a little bit of, I don't know, like a glow or something like this around this? And we can't normally create double borders in Figma, but we just released this. Check this out. If I add a drop shadow to this, I can actually create a simulation of a double border. by hitting spread to yes Ari you're following me awesome I'm gonna go ahead and change this to my local colors choose my color there and maybe that's at 20% maybe that's it for who knows what it's gonna be but hey there's my active text field I'm very quickly realizing that this looks like an error we'll take care of that we'll change that to that blue that's gonna be our secondary brand color and we can use that as well Since I'm also the designer and the brander on this thing, I guess I can make those kind of decisions.

All right. Oh, I just made a mistake. Let's go back down to that 20 percent like that. That was a subtle value.

OK, we're only going to create two of these. I know you put a ton of states in there and there's so many different things that I now need to do. Thank you for my homework.

But I want to get on to some new thoughts and new ideas here. But basically what we've got now is we've got a default text field. So let's go over what we did. We created a structure here. And why did we do that?

Well, we did that if for any reason some of these things change. Maybe this font goes up and gets bigger. We want all of our text fields. They all inherit the same kind of stuff.

They all have the same padding and spacing and this and that. We don't want to We don't want to repeat ourselves here. We don't want to have to constantly create, like we don't want to have to go and create a change here and then create a change in eight other components. So we're honoring the do not repeat yourself rule there.

So we created a structure component and now we have those structure components inside each one of these. Text field active, text field default. Now the reason that we name them this way is this. Let's take an instance of this. Now every time you have a main component, if I simply copy paste or alt or option drag it off over here, you'll see here now I have an instance of this.

The reason that we named it the way that we did is because notice now here in this menu, we have an active and a default. And the more components we start adding into this naming convention over here, text field slash, this menu will honor that. It'll honor that naming convention, which is super cool.

Also if we look in the assets here and we go into the style guide now. we've got a couple of problems here because I've framed this with a desktop grid and I'll show you how to get out of that. We don't really want our style guide to say desktop grid. We don't want that at all. So one way we could do that, let's just get out of this grid.

One thing to note is that these, the frame that you put your components on can be a form of naming, almost like a foldering system. So if I take all of these out of here, and I ditch that grid, and I just put my components out right here on the canvas, notice that we have now style guide text field. That's because of this naming convention here.

And if I open up text field, you'll see my different text fields there. You see my default and my active. So in this same way, I can use grids to my advantage by creating.

grid around this or not a grid sorry a frame I can use frames to my advantage by drawing a frame around here notice now my style guide says style guide slash frame 12 that's not at all helpful so what I want to change this name to is maybe this is our form elements so form elements so now under the assets we'll see here style guide form elements and then underneath these form elements we have text fields. So we can use a combination of things. We can use the page name as a layer of almost like a foldering system, an organization system.

Then we can use the frame name to be able to organize items underneath it. And then we can use slash naming inside of the component. So let me come right back here.

Remember this one here? We can use slash naming here to create another layer of menuing or... Foldering within this.

OK. All right, so let's let's just kind of push at the edges of this field, because we really as the creators of design systems, we have to be able to make these things work for a lot of different cases. Our designers that are using them are going to have lots of different ways that they use this. And right now. We just have these two things.

So let's just see here. Does this work? Does it scale?

So I always do this as a test. I take my instances. Oh, notice we already broke it. I always take my instances like this and I try to scale them and see what's going on. Add text into them.

Do they work the way that I think they should? So the first thing that we've got wrong is I'm moving this, but this is not scaling to that. So let's just go into this.

field here and look and see what's going on here. So probably a way that we could fix this is that notice on this text field structure, we have it set to a vertical auto layout, where we could just set this to a vertical auto layout as well here, which we did. We could set it to a horizontal auto layout if we wanted to, but I want to be able to change the size horizontally, so we're not going to do horizontal. All right, so what I'd like to do here is...

maybe set up the constraints on this one here to be able to stretch to its container. So since this is a vertical auto layout, I don't know how much you all know about auto layout, but one thing that's really powerful is that if you have a vertical auto layout container, its child components or child objects really can stretch. So I'm just going to click that stretch left and right. And let's see if that fixed our problem. And indeed it did.

Awesome. Now we're probably gonna have to fix it for this one as well. But once we have it fixed, it's fixed. Perfect. All right, now.

I would love to see, we're going to need some like left prepended icons and some right prepended icons on these things. So I'm going to jump you into some thoughts around icons. I think I have about 10 minutes.

So I want to address your questions first, and then I would like to show you some tricks with icons, some cool things I know. But let's take a pause and see if I can answer a few questions. Sure, thank you.

TJ wants to know, is it best to use frame color or solid shapes for components when defining background color? I don't, it really depends. On a component that has like shapes, you may struggle if you're wanting to add auto layout into that, in which case I would be using frames. Notice on this text field structure here, if I were to just draw a shape in, with auto layout it's very difficult to just draw right into the layer there, like right into this auto layout container, so I tend to use the outer frame for that. Cool.

Puya wants to know, what's the best width for label icons and text fields, outlined or filled? Let me see. Can you repeat that one more time, Azra? What's the best weight for label icons and text fields? Ooh, that's a tough one.

First of all, I feel like it relates a little bit to your typography. What we don't want, let's just go ahead and we'll do a little bit of jumping ahead here. Let's just say I want to put this icon in here. If this weight of this icon, which I've actually created some very complex stuff in here. because I wanted to show you some cool tricks.

If this thing's super, super thick and chunky like that, it may be very legible, but it may not exist well with the typography. That typography is pretty thin. This is really, really beefy.

So I think it depends. I'm going to give you a resounding, it depends. Also, those line weights can be way too thin, which are not legible as well. I think the smallest I've ever seen people go is like a one pixel. line weight.

But if you're creating icons that are scalable, it really just depends. Because a one pixel at 24 pixel by 24 pixel frame size might be okay. But if you actually like scale it down, it could be very illegible.

I know from a frame size perspective, I know that a lot of people work with like a 24 pixel by 24 pixel icon size as far as a frame goes. Great. Another question is what naming convention do you use for spacers?

Spacers are pretty new, being completely honest with you, spacers are a pretty new concept to me in Figma, not in code, but in Figma. So I'm pretty new to it all and I'm going to demonstrate using some spacers but Spacers are kind of a weird thing because I think that they're a bit of a, like we're going to grow out of them at some point because I feel like once we can get design tokens, we're going to be out of the need for like a spacer component. So I don't really have a great answer for you.

Sorry. Corinne wants to know, can you show the stretch left and right again? Yeah, I'll do it for you. And I'll do it in a way that's like just probably maybe a little bit simpler. not working with like a complex component.

So let's just add a stroke on this here. All right, so we've got this frame and I'm just going to add like a little square in the middle of it. Now if I go to this frame and I just go to the auto layout portion of it, I hit plus here, I can actually change it to a vertical auto layout and then I can adjust things here, right?

Like I can adjust horizontal padding and I can adjust vertical padding. But what if I want this thing to be left aligned? It's left aligned now.

Actually, let's do this. Let's go away like this. It's left aligned now, but I can go right aligned.

I can go center aligned. You can also drag it, and it'll go left aligned center, but left, right, and center. But what if I want to stretch it? All I have to do, notice when I select the auto layout frame, I don't see that control here, but as soon as I select a child layer of a... Auto Layout container, you'll see right here those three align options plus stretch here.

Watch as I hit stretch, it'll stretch and that means if I adjust this that will actually stretch to adjust. Cool? One more question. What are you utilizing the color scale for? I see some values listed under the primary, secondary color, but not as published styles in the design panel.

I'm guessing you're talking about this here. So we've got these values. We've got these color values here and notice we only have these here. So this is something that I'm working on that I'd love to loop back to But it's this notion of like I'd like to be able to use maybe not every single color here. So some colors in this brand system.

I'm just gonna have dark. I'm not going to these all these shades of it. I've already got those shades here that I want.

I've got the dark the slate light slate Dorian and cloud but For these three main brand colors, I really wanted to create some flexibility around those to be able to use lighter tones of this for different reasons. Like especially notice here with this light light light tone here, we're effectively kind of doing something like that here on this focus state. So I'm probably going to want to utilize that color. I have not published these into styles yet, but I absolutely will once my design system kind of settles a little bit. Right now everything is just all up in the air so much and I'm trying to figure out this system but I will probably go in and take these shades and then communicate them in here and then come in and publish them out.

So you're right, you're right to observe that like we don't have those yet. Um, Ashul wants to know are these tints? Yeah, those are gonna be different shades or different tints of of these main three brand colors.

We did this a lot. I've done this a lot at two different companies where we would take the brand colors and then we would have different tints of those so that we, and there'll be a naming convention around them that I think will be really helpful. And I'll talk more about that on a later stream, but these will be able to use for things like subtle notes of that brand when we want to focus states, but we don't want just screaming at you.

So. We'll probably use these for like subtle buttons. Cause remember we haven't, we haven't even talked about buttons yet, primary buttons and sort of like a secondary button. We haven't really talked about what that looks like and we still need to design that. But I imagine we're going to be getting to that next stream.

Awesome. Speaking of the next stream, I know we're out of time. Our next stream, these are usually on Mondays, but next week it's going to be on Tuesday, same time.

So we hope to see you all there. Raji, do you have any parting thoughts? I do. I have a little bit of like some homework for you all. So one thing that I was going to share with you that we didn't get quite enough time for was that I set up this icon component.

And I actually set it up with this really cool grid and these key lines to be able to help all of my icons in my system feel unified. I don't know if you all watched our stream that Noah Jacobus and I did, but I've got that for you right here. I've got that stream for you, but we also have a really, really amazing Figma file that Noah made for the stream.

And I'm going to go ahead and drop this in here. That Figma file is also on that YouTube link. So I advise that you go ahead and download and duplicate that Figma file so that you can see the way these key lines work and a little bit of the philosophies behind creating icon design and icon systems and cohesive icon sets. But I guess I'll leave it at that. And just let you know that on the next stream, what we're going to get into is making this component not not just text in it, but we're going to build a drop in some icons here.

It's going to be pretty sweet. You can see here a little bit of what I'm doing on screen, but I'll talk about some different methodologies for being able to swap those icons out or turn them off or on and make this one little input this text input like a powerhouse of a component so Super stoked that y'all came. Thank you everyone for coming.

There's so much so much stuff to cover here so thank you all for all your great questions. Have a great day!

Transcript for:Lecture Notes on Building a Design System in Figma

Transcript for:
Lecture Notes on Building a Design System in Figma