Create a Figma Design System - Button Systems W/ Variants Tutorial (Part 4)

whoa hey beautiful people it's misco here and this is part four of the design system series that you have all been asking for all right so in this video we are going to be combining things that you've learned in series one two and three to create a highly dynamic and scalable button system in your design system so are you ready let's dive in now i'm gonna be walking you guys through exactly how to create this this very scalable design system so let me just show you a very quick example so grab a button right we'll grab a button over here and i want to show you guys how to create things like this where you can turn the buttons in primary secondary size large small and the states are like hovers right so i'm going to show you guys how to do this from scratch and we are going to be leveraging things that you've learned in episode one two and three to create this so if you haven't watched it make sure to gently smash that link above to watch those videos oh and before we continue another disclaimer is that if you do want access to this design system make sure to check the link in the description i've also attached a juicy juicy coupon to help you get 10 bucks off so feel free to check that out so without further ado let's get right into it guys so example project put down a frame right now what we're going to do is we need to do a bit of planning and you might have realized that every video in this series i've told you guys to do planning before you get into designing the design system so when we think about it we are going to create quite a few different variations of the buttons that we need to create so for example we are going to create a primary button right so it's going to be the primary button so let me just quickly make this a little bit larger and i'll just utilize the actual type scale i type styles that we have already so you can see all this being used in uh cool so we've got the product we're going to create the variance of the primary button right and we don't want to go in and start designing the button right away so watch me understand process and then become an absolute pro so here we go primary button now let's think about it what type of buttons i'm going to create there's going to be a default button right just the default state of the button right so let's just quickly make this um h5 all right a little bit bigger so you guys can see all right so h4 one cool so we've got a button over here a default one and then what else is there there's gonna be a hover state right and then it potentially is going to be an active state okay and like every other video in this series i'm going to teach you how to fish so you guys can go fishing afterwards okay so then you have an active state okay and then remember we are going to be creating a small medium and large button right so we have to do that planning ahead right so we're gonna have a small button right and then we're gonna have a medium button and it wouldn't have a large button and obviously you i don't need to rationalize this but if you do need me to well in ui design you're not gonna just have one style of buttons you want to be able to pull the button onto it onto a design and just say i need it small i need it large i need it hover i need a default so you want to make sure you plan out the matrix now obviously this is an example if you want to go like i said in other videos as well if you want to go extra large go ahead do extra large if you want to do um i got a ghost button as well which we have in our design system go ahead add the ghost button as well this is just to help you guys get started to understand how to think about and how to plan out your design system so you can be an absolute pro and if you appreciate that make sure to smash that like button guys so let's think about it now so we've got to first design the very first variation of this primary button and we're going to start off with the small one first and for the default state so let's think about it what do we need in this small button right we need a label so let's just say button and obviously we want to make sure that we're utilizing the type styles that you've learnt before in our series so let's just say this is going to be a let's say p2 right so there's going to be a label in this and then let's think about it there might be an icon in there as well so i'm gonna jump ahead you guys might not have an icon set attached but i'm gonna show you guys this so you can plan ahead while you guys start building out your design system and you might go okay cool and then what else would there be there will be a background color right so how do we define that background color well we can either put it in a frame or use auto layout so i would normally use auto layout so i've got it here shift i selected the two items hit shift a to turn it into a frame right and i might put some padding on the side so maybe padding on the side and then from what we've learned i might grab the primary button a primary color sorry and then we might actually make this a little bit taller so 40 40 pixels high and then i might center align this right and then we might change the black text to actually white see see that is why you need white in your designs uh your design system guys and then we might go eight right so now we have a scalable button right perfect now you're probably thinking um now what happens for hover so obviously command d and then we'll bring that over to the hover and for hover we want to make sure that it's let's say darker right and then on the active we want to make it lighter so we'll pick a lighter color and if you have if you don't understand this you have to watch part one part two part three before you watch this one because i've already taught you guys how to create all these uh color styles or the textiles so if you're jumping in to watch this without context then it's obviously not gonna you're not gonna understand it so please make sure to check the link in the description for all the prerequisite videos to help you understand this now obviously what we want to do is now we want to duplicate all this and for the medium size buttons right so we'll put it down and we need to make sure that for median medium the text is going to be a little bit larger so let's make sure it's going to be a 18 point right so let's push this up and there we go right so it makes a little bit bigger right and then we also maybe want to make the padding a little bit bigger because these buttons are generally a little a little bit bigger so we'll go 16 and we might even want to add maybe some spacing on the top actually whoops boom right and then we can go here 16 16 whoops we could add padding actually or we could just simply extend it um for this example i'm just going to extend it i'm going to cheat and then we want to duplicate this command d and bring it down for large and for large maybe with for a very bad example sake we want to make it a h5 right h5 is actually pretty small let's make it a h3 right we're gonna make it these juicy very very juicy right so h3 semibold cool there we have it and for some and then we also want to extend the spacing as well so let's just make it 20 guys all right so 20 20 and 20. cool so we're nearly there already we're nearly at the end already so let's just hit uh option l right that will collapse all your layers little trick for you guys and that when i open it up it's all cleaned up for me now it's time to actually do the naming conventions and this part is a little bit tricky right so let's make sure that all the small buttons are grouped together and let's make sure all the medium ones are grouped together and then let's make sure the large ones are all grouped together all right cool so what we want to do is we want to do the naming conventions and you would have learned this in the topography and also the color videos as well so when we are thinking about naming conventions we want to make sure they're named correctly so on the right hand side the little toggles the berlin settings are defined correctly so the very first thing we want to do is we want to name it as a button i would normally capitalize this but i've already got a button system set up so i don't want to replace it and if i use this it's going to replace what i already have so i'm going to use this for an example so i have a button and then i'm going to think about okay what size is this button right because the first thing i want to do when i look in my assets is i want to type in button and i want to be able to see the button and then i want to be able to define the size of it so i want to say that this is the a small button right and then i also want to say that this is the small default button because there's no start it's not a hover and it's not active either right so that's done and then i can copy copy that i can turn this one into hover and then i can turn this one into active right so now when i look into my assets when i combine all these components together which i'll show you guys shortly i'll be able to search for button that's exactly what i want and then i can define whether it's a a small button and then i can also state whether it is a default style or a hover style or an active style and then we'll go ahead and we'll make the changes for these as well so this one would be medium right boom and then we can change this one to medium and then this would also be the hover and then this one would be the button it would be medium and then this will also be active all right and then over here we have a large button right and it's default and then we have a large button that is the hover state and then we also have a large button and this is the active state right so now we want to turn these order layout components into an actual component so that's command option k on your keyboard and you'll see that the icon will change so let's go ahead and turn all these into components do it you and you have to do these one at a time or so we'll group them all into a component right you highlight all your components and then you hit combine as variant and this is where the magic happens guys ready boom [Music] now you get the dotted line and now you have created all you combined all these components into one main master component so here we have a button now watch watch this magic so we can type in button look for the lowercase button so i've got this one put it down and now i can set this as a medium button with an active state perfect and because i've already pulled through an icon that is actually a component itself i can go in and change this to whatever i want so this could be a check this could be a chevron this could be a cloud grain oh it's a little bit broken but it's okay don't cry then you can have a sad button right so this is exactly how you can start to create a very very scalable button system in your design system so hopefully you guys found that extremely useful and i hope that me teaching you how to fish now you can go ahead and take the learnings that you've made and go fishing and now you can build out the secondary buttons the ghost buttons and all sorts of buttons because we all love a good juicy button now make sure if you have any questions make sure to leave them in the comments below and if you did appreciate this video make sure to leave me a comment because it really does make my day when i hear from you guys and before i let you go if you do want to grab a copy of this design system make sure to check the link in the description below i have left you a juicy juicy coupon to get 10 bucks off all alright guys hopefully you found this useful and i will see you in another video very soon so that is command k boom no option k so [Music] you

Channel: Mizko

Views: 15,865

Keywords: figma, figma tutorial, ux design, web design, ui design, figma tutorial for beginners, ux design tutorial for beginners, figma web design, ui design tutorial for beginners, user interface design, ui design tutorial, figma basics, figma design, figma ui design, yt:cc=on, figma design system, design system, ui design system

Id: cOHx7bTo0KU

Length: 12min 27sec (747 seconds)

Published: Thu May 13 2021