Build it in Figma: Create a design system — Components

uh let's build a design system asterisk uh and if any of you are wondering what that asterisk is for it's because i talked last time about how uh design systems aren't 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 uh there's lots there there's also the code that goes uh that accompanies the design system and uh that's a translation of that and all the rules around that that uh 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 be able to 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 uh so i did promise you that i would have that moment where when i pull uh when i pull the design system back out here we're gonna have some new cool things and so uh if any of you haven't ever seen uh uh 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 uh let's see yeah what did it look like here so this is what our design system looks like at the end of our stream as of last week and so asura 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 was promised that i was just gonna 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 uh 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 blah blah the reason for that is when i go to publish so when i go to publish this design system 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 yesterday good job raj so let me do this if i hit this uh we're not on a team right now i'm in drafts right now so we'll show this in a few uh 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 uh to help structure your design system so here's what i've created i actually created a little icon grid here um 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 create a little swatch and this swatch has a few things on it's got a color name on it it's got the color hex code and then it's got potential shades of different uh 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 uh like a type pairing like what happens when you have a article heading uh or a title and then a subtitle and then body copy here uh what how do those rules work so i started working on that uh 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 um and then i've got in here all the different uh 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 uh but that way i can fill out all of my stuff here uh all right now with the colors i kind of did the same thing i gave them their numbers are there their names here fuchsia iris p i had some more fun with these yes i did a little bit too much coffee this morning uh 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 if 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 uh and that way it'll be ready for you to go pick apart and see what we did uh we're just doing this thing all live hey roggi yep can i um interrupt you and have you turn off your video just i think it might be easier to see the whole screen if your video is off my video okay um your little face yeah there we go 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 keep going thank you no problem okay so uh let's see what else we've done all right so i set up some uh 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 um 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 uh 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 uh and those were our underscore name ones but hopefully what we can get to today is some of these these will be fun uh text input multi-line text 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 uh there's this idea out there now let me let me explain something with an example really quick here so say i put some text here 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 um 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 uh 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 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 uh 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 uh you might even have another variable up here saying like uh 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 uh padding equal base padding times two so this is how often uh in code something like this would be systematized so then if you ever went back and changed this you said you know what man those buttons are feeling a little cramped i want to go ahead and bump it up to 12. uh 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 uh 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 uh 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 um 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 space or 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 azra you bless me okay here we go so uh right now i've got a flexible grid on here if you look at that link for that material design uh the responsive grid section you'll understand a little bit more about this but the idea is that in a in an era where uh 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's 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 we've got the same kind of a thing we can now bump this thing up to eight columns we do twelve columns whatever we'd like to uh we can also set gutters and margins so 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 okay these are responsive grids or these are fluid grids probably fluid is 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 going to go ahead and set our margin of 16 our gutter to 16. now these aren't set in stone we're just going to go ahead and go with them for now and i'm going to go ahead and just click this here i'm going to put fluid then we can put mobile remember you got to think through your naming convention here but i'm just going to put small screen okay we're gonna create that style there okay now you can see here that we actually have this set uh 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 gonna 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 uh what those what those uh 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 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're go 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 the shortcut but there's this control 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 uh 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 can always get 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 re 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 red here i'm gonna 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 eight pixel grid created for us oh i see your comment there dennis uh you're so lost you need figma for beginners yeah this one's 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 uh more beginner focused uh on our youtube site all right so i'm gonna go and pretty this up and document this and document the things the decisions that we've made for our grids here uh 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 uh 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 gonna talk about spacing now i did a little 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 for our design system how will we align things how will how will the padding work for these things we'll go ahead and start getting to components in just a few minutes um so we're gonna come back to spacers here because it's not gonna make a lot of sense uh if i tell you some of these tricks right now but basically there needs to be a system by which you define uh spacing between elements for instance i think a really good example might be what if i draw a heading onto uh my designs but this is my 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 do we just take the two and just eyeball it and notice as i i drag the space in between these two things um and say that's something that i feel looks good visually this is pleasing the distance between these two items is good uh 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 uh one way to do it would be to quite literally just auto lay out 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 uh 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 uh yep it looks like i'm sure we'll say material design uses forex multiplier of text related spacing there's a lot of different schools of thought i just want to let you know this is some code uh for a type system called gutenberg and this uh 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 uh the a 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 uh whatever the line height is maybe that's 140 percent 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 uh one time of that base this leading uh number and then notice on h2s it changes it says oh there's gonna be only two times that space above and the margin bottom will only be one uh but as we get further down and you may notice this in blogs and things that you read uh 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 uh there's a lot of great reading and a lot of great scholarship out there about like the relationship of headers and body texts 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 uh spacing uh blocks that we could use just little bits and spacers so one could be like a linear spacing algorithm and it's just like hey what if we just took uh every number and just added 8 to it or subtracted 8 to 8 from it this would be this um 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 uh 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 the stuff i just wanted to plant this in your minds but 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 all 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 uh i'm gonna pause for just a second ozra do we have any questions that i can answer um yeah um i matt wants to ask would you rather write out the documentation or use the built in description option and color text styles i think i think my answer to that would be i would do both especially since if my text styles and everything's housed here um right in figma so let's come on up here to a text style here this is the h1 and this is what my i believe could be my tay mat 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 terts here could be something like class name like css class name here and then i could put a title and maybe it's uh like an h1.title something like that i would prefer to put because this is in 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 going to put as much documentation in these description fields as i can including i'm also going to probably have some dev notes in here and 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 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 um 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 um once again i think it all really matters what your source of truth is so 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 plug-in to be able to bring and sync all that up with my figma doc so with sigma 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 uh with your developers um i'm sure wants to know do you prefer linear or non-linear spacing i think linear is probably ensure i think that linear is probably the easiest for me to understand and wrap my head around um but going with that uh golden ratio you know what feels more like natural and what we see in the real world uh sort of more of a natural pattern uh i might prefer to go like i might tackle non-linear spacing but i think linear especially if you're beginning it's a lot easier to understand cool and one more question um david wants uh the shortcut for hide and show grids again oh no problem that's going to be uh that's going to be a control g for hiding show grids let me go to a grid so you can see one um 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 uh 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 commander control forward slash all right all right so let's get into uh creating a text field let's start our first baby baby component all right so i'm gonna go ahead and ditch both of these um these were something i was just working on but i'm gonna go ahead and just draw out and this will be the the more fun and simple and easy part of setting up our components so i'm gonna 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 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 eight pixel uh 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 uh 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 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 or two columns and i'm going to line this sucker left and let's look at the qualities here ah this is a little weird um i don't want 17 padding i want 16 padding here and i probably want 16 padding here and maybe eight spacing in between and 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 you'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 right so we're going to need let's just put in the states that we need here we're going to need a um kind of like 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 alt dragging them down and okay so we need an active state who knows what that might look like what else am i going to need for this component oh um maybe like a a entered like a 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 check box 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 uh we've got a disabled right yeah absolutely disabled state now i'm not going to demonstrate all these but we'll do a few of these on screen and then 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 um and 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 um i'm down here and i've created this disabled state maybe that looks like this super super grayed out text or something like that and maybe this is also grayed 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 uh this would 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 uh 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 now 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 uh this will help us be able to propagate changes uh to do component swaps and all that kind of stuff much more easily uh 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 um and this will be like our subtle text color so i'm just going to put in here let's call it um enter text here that'll be our default one a lot of people actually they have the trick of putting the actual uh 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 all right 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 all right uh 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 uh we'll call this um 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 uh let's style this a little bit let's make it look like it is active uh maybe maybe uh an active if we go look at our colors our color system up here we've actually said this uh 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 aerostate 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 uh uh laura uh just to 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 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 call 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 don't 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 gonna go ahead and turn it into white and i'm just gonna create a white i feel like everyone's gotta have a little white there okay 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 uh this style what if we wanted to have like a little bit of like a i don't know like a glow or something like this around this uh 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 two yes uh 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 twenty percent maybe that's at four 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 uh we'll take care of that we'll change that to that blue that's going to 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 like that that was a subtle value okay 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 uh 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 but we did that if for any reason some of these things change maybe this uh this maybe this uh font goes up and gets bigger we want all of our text fields they all inherit the same kind of stuff they're all they all have the same padding and spacing and this and that we don't want to uh we don't want to repeat ourselves here we don't want to have to constantly uh 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 uh we're honoring the do not repeat yourself uh 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 uh and the more components we start adding into this naming convention over here text field slash this menu will honor that it'll honor uh 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 uh 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 our style guide to say desktop grid we don't want that at all um 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 a 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 frame 12. that's not at all uh 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 as a layer of um 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 okay 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 at texting in 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 can 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 layout if we wanted to but i want to be able to change the size uh horizontally so we're not going to do horizontal uh all right so what i'd like to do here is maybe set up the constraints on this one here to uh to be able to stretch to its 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 enough 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 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 um i don't it really depends on a component that has uh like shapes you may struggle if you're wanting to add auto layout into that uh in which case i would be using frames uh notice on this text field structure here if i would just if i were to just draw a shape in uh with auto layout it's very difficult to just draw right into the into the layer there like right into this auto layout container so i tend to use the outer frame for that um pouya wants to know what's the best width for label icons and text fields outlined or filled let me see would you uh can you repeat that one more time also what's the best weight for label icons and text fields ooh that's a tough one um first of all i feel like it's it 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 uh if this 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 uh it may not exist well with the typography that typography is pretty thin this is really really beefy so uh i think it depends i'm gonna give you a resounding it depends uh also those line weights can be way too thin which are not legible as well um i think the smallest i've ever seen people go is like a one pixel uh line weight but if you're creating icons that are scalable it really just depends uh because of one pixel at 24 pixel by 24 pixel uh 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 um another question is what naming convention do you use for spacers um spacers are pretty new being completely honest with you spacers are a pretty new uh a new concept to me in figma not in uh not in code but in figma so i'm pretty new to it all uh and i'm going to demonstrate using some spacers but uh spacers are kind of a weird thing because i think that they're a bit of a like we're gonna grow out of them at some point because i feel like once we can get design tokens we're gonna be we're gonna be out of the need for like a spacer component so i don't really have a great answer for you sorry um corrine wants to know can you show this 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 um not working with like a complex component so let's just add a stroke on this here all right so we've got this uh this frame uh and i'm just gonna add like a little 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 i 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 up but what if i want this thing to be left aligned it's left aligned now actually let's do this go away like this left and line now but i can go right aligned i can go center line you can also drag it and it'll go left to right center left a 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 is 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 so 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 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 uh in this brand system uh i'm just gonna have dark i'm not gonna 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 um 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's just all up in the air so much and i'm trying to figure out the 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 wants to know are these tints yeah those are going to be different shades or different tints of of these main three brand colors uh 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 and 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 uh 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 because 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 and 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 um next week it's going to be on tuesday same time so we hope to see you all there roger do you have any parting thoughts i do i have a little bit of uh like some homework for you all uh so one thing that i was gonna 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 uh and these key lines to be able to help all of my icons in my system feel unified uh i don't know if y'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 gonna go ahead and drop this in here that figma file's also on that youtube link so i advise that you go ahead and download and duplicate that sigma 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 be able to drop in some icons here it's going to be pretty sweet uh 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 uh super stoked that y'all came thank you everyone for coming uh there's so much so much stuff to cover here so thank you all for all your great questions have a great day

Channel: Figma

Views: 104,312

Rating: 4.9556174 out of 5

Keywords: design system, figma, components, design, product design, forms, fields, buttons, illustration, design systems, figma plugin, UI, UX, UI Design, UX Design, UI/UX, Product design, Digital design, Graphic design, Figma plugin, Build it in Figma, Design System, system, style guide, brand design, color theory, color styles, text styles, team library

Id: 9xUXTFzDDCo

Length: 54min 48sec (3288 seconds)

Published: Tue Aug 04 2020