Buttons Design System: How to Create a Button UI Library with variants and Component Properties

hi guys welcome to today's video in this video i'm going to be showing you guys how to quickly create a button ui library for your design system um the first thing we want to do is to create a button um there's a couple ways you can create a button the first way would be to have your text let's see important um then the next thing you might want to do is draw a rectangle leave the width of 100 and the height of let's say 42 then i'm just going to add a stroke to this rectangle and round up the corners and then what we're going to do is to fit our texts in the rectangle um select all the elements and properly align them then hit ctrl g to create a group um this is one way you could create a button but i don't like using this i would want to use the auto layout method for our button library so i'm going to create a text let's say text the button label and i'm going to hit shift a to create an auto layout on the text the next thing i'm going to do is to increase the padding on the left and right part of the button i'm going to increase it to 20 px0 and i'm going to add a stroke around this auto layout button i'm also going to go ahead to round up the corners um a little more so from here the next thing i would want to do is to have an icon on this button because we want to we want to have um a button library with um the options of and a button with icon and the button without icon so i'm just going to paste in the set of icons i'm going to be using um the sets of icons i'm going to be using which is this um my set of like iconify icons right here so i'm just going to select the ones i'm going to be using for this button i'm just going to pick this home button for now i'm also going to cut the icon and paste it in the button frame that we are creating um i'm also going to update my auto layout section right here so as you can see this button is not properly aligned with the icon so i'm going to go to this auto layout section here and i'm going to sensor align the text with the icon i also want the icon to be before the text so i'm going to move it to the right um the next thing i would want to do from here is to reduce the size of this icon to 20 pixel right then i'm going to reduce the spacing between them so i also want the option to have um like a call to action on our button so a call to action usually carries this right arrow button i'm also going to um bring in this right arrow button into our button so now we have this button component here um [Music] for some people you might want to create a base component um before using the base components to create other components now what i want to do for this particular button is to create different button types and different button states on this particular button so let's say we have our primary button we also have a secondary button i'm just going to duplicate this text and rename this secondary button we also want to have like a text button all these typically depend on the types of button you'll be using in your project um before creating a button library for it most times we must have used some of these things to be sure what direction your designs are heading before you create these boston types i'm also just going to add one more button type which is the elevated button type so we have all these different button types for our button library we also want to have um various button states right so once we have states like um the enabled states on the enabled states i'm also want to have like a hover states we also want to have um either a focus state or a press state i'm going to go with a pressed state um that is more like when a user presses on the button or clicks on the button and they want to have a disabled states now we have all these states um the next thing to do is start creating the buttons for this particular states now for our primary enabled states i'm just going to bring in this button components let me just duplicate it and then bring it in i'm going to delete this group button here so that we don't get confused so for this button here which is the primary enabled button i'm just going to give it a particular styling i'm going to give it um a blue fill i'm going to remove the stroke um i'm going to give it a particular blue fill which is this blue fill right here and i'm going to change the contents of the button to white so that it's readable um now we have our primary enabled button sorted out what we want to do next is to have the hover states of our primary button and for the overstate of our primary button i'm just going to um darken the fill a little bit and that's it i'm going to go to the unpressed states i'm doing prestige it's going to look something really similar to the hover states um but then i think i'm just going to make the hover state a little bit elevated so i'm going to add an effect which is a drop shadow and i'm going to give it a custom drop shadow um just the way i like it so the next thing would be to create the disabled states of our primary button um the stable states of all the buttons will probably look the same but just to have um that option there i'm just going to have create the disabled states i'm going to gray out most of its content so it looks disabled so i'm not going to explain every single decision behind the button types and the button states so i'm just going to fast forward the video to when i have all my buttons created this is supposed to be custom to how you want your buttons to look or how you want them to work so you have to create um your custom button types and of course if you want to use the particular button types i used in this video you can just um watch the video in the slower playback speed so that you can um get the exact stylings i use for the buttons [Music] [Laughter] [Music] [Laughter] [Music] so guys from here um this is where we start using um components variants components properties to properly um structure our button library here we are going to give each button its own property so that we can use a single instance of this button to navigate through all the possible options we might need while designing so um now we have all the button setup the first thing we are going to do is to select every single button here i'm just going to select all the buttons i'll make sure you capture every single frame and i'm going to go to the component section and create component set now we have a set of components um with different variants um now the variants are just going to be frame one frame two pending depending on the name of the frame that we used to create the component brilliant and we want to change that to have the specific properties we want so one of the first thing we want to do is to have an option of a button without an icon so i'm going to select the first icon there and click that target button to target all the same icons um in the component sets then i'm going to head over to the layers panel um to this layer section here in the control panel and i'm going to click this button here that says apply boolean property and i'm going to change the name to icons because that's the icon i want to change it by default to be true i'm going to leave it at true by default so we can see our icons in the button now we have this the option to turn on and off icon i'm going to do the same thing for our cta because not all buttons will be a call to action i'm going to click on that target button there that's going to target every single arrow i've just reduced the size to have the same size which is 20 pixels as the icon i'm going to go to the layer section i'm going to click on create property and i'm going to call this cta um icon and i'm going to set the value by default to be false so now we have uh buttons with the boolean property of the icon and cta icon i'm just going to create an instance of this button so we can see the effects of the changes we've made so as you can see on the right hand side of the panel the height of the button is a specific height but once we switch over to this section and turn off our icon the height of the button reduces this is not what i want i want the height to be consistent um regardless of if the icons are on or off even though the icon size is larger than the text size so i'm going to select all the buttons in this component set i'm going to switch to the sizing section i'm going to switch from hulk to fixed height and i'm going to leave it at the particular height there it is so now once we turn on and off the icon we see that our height remains the same so that's the first thing we are going to make sure is uncheck now you can see our boolean property is working perfectly fine we can turn on the icon and the cta button icon on and off um so now i want to start working with the properties which is the primary and the rest um to do that we're going to first work with the primary button but then i'm going to click on the entire component and i'm going to go to this you see it has a default property you can edit the property i'm just going to change the property name to button type because we want to start working with the type of buttons in our component set um i'm just going to ignore these values here that's a frame one once we have all our frames um sets to the property value we want it's going to replace all these frame sizes we see here so the first thing i'm going to do now is to select the entire first row which is the primary button and i'm going to switch over to um this content section here this and i'm going to change the button type you can see it's mixed at the moment and that's understandable we'll change the button type to primary you'll see this little message here you're just going to ignore once you're done the message won't be there anymore i'm going to select all secondary buttons i'm going to change the button type value to secondary i'm going to do the same thing for the text button i'm going to select the entire text button change the button type value to text and i'm going to do the same thing for the last button type which is the elevated button i'm going to change it to elevated now if we click on our component and we go to our button type you can see that we have primary secondary text and elevated we no longer have the frame 1 frame 2 that was initially there so if you click on our instance of our button just like we did you can see a button type property with different values we can then switch between different button type now what's left is to be able to switch between different states of different button types now so um to do that just like we've done for our button type we are going to create um a property of button states i'm going to click on the entire component i'm going to click on this properties section that has a plus sign i'm going to click on variance i'm going to click on variants and i'm going to name this property button states and i might as well leave the value to default so now we have a button states now we have to start setting the values of our button state the first value will be this enabled states so i'm going to select the entire first column here and i'm going to switch to this button states property and i'm going to change this from default to enabled after that i'm going to do the same thing for the hover states i'm going to select the entire buttons in the hover state i'm going to change the button state to hover and this is the same thing we are going to do for the pressed states and for the disabled states it's similar to what we did for the button types um this way every single button with how will have its distinct property so i'm going to just do for the last column which is the disabled column um button state after that you can now see that all our button types on our button states have been specified now if i click on the instance of our component out here we can see we have button type button states icon and cta icon we can then switch between different button types and also different button states and this is really really super useful and it reduces the number of um variance options we are going to have with the introduction of component properties so guys from here um something else would want to do is to be able to change um the icon in our button so we have this home icon what if we want a different icon the first thing you're going to make sure is all the icons you are using is a component because you will want to use the instance swap property to achieve this so i'm just going to select the icon and use this target button here to target all the icons in the components um sets then i'm going to click on this you can see the icon name is showing here i'm going to click on apply instance swap property and i'm going to name this section icon and i'm going to leave the defaults but once you click on this icon section you should see all the icons we have in our board it's only going to show if those icons are a component because it's an instance swap we are trying to swap the instance of those components like the icon components right so once we've created our instance to a property we can see the option below here that says icon type and we can then select from an option of icons that we want to be in our button i can select this message icon as you can see the message icon is dark because the icons i'm using on this board are dark so you might want to have two variants of your icon which is the dark and the light theme so that if you have a button that requires you to have a light icon or a light themed icon you can easily switch it up so in your design library you will have want to make sure your icons are properly set and most likely your typography also so that you can easily use them in your buttons so um from here what else another thing we would want to do is to create um a text property right um but before then you can see we can switch between different instances um of icons that is the use and the importance of an instance swap property and we can also still navigate through other button types and button states the next thing we'll start looking into is the um text property now we also want to change the text the bottom text at all times so to do that i'm going to target all the texts in the component sets and i'm going to go to this content section here so that i can add a text property i'm going to click on this apply text property and i'm going to call it button label or label and the value is going to be um let's say button let's call the value button so i'm going to type in button for the um value and the text the property name is going to be label so now you can see the text have changed to button and once we click on this instance here we can see all our properties here we can change the label to submit or play we can change the icon type to it totally different icon type um we can also turn on and off the icons and the cta um and we can also switch between different button types and button states so this is very powerful it has limited the number of um the number of buttons we are going to have in our component sets and we can do a lot more with the use of component properties and variants so this is it guys i'm just going to show you guys i'm just going to play around this button because this is really interesting to use i'm going to create some um button types i'm going to just call this wallet balance and some and so many fun stuff you could do with this um so guys we've come to the end of this video please please don't forget to like comment um subscribe turn on the notification bell um if you're interested in more videos like this this is the end of the video thanks for watching and i'll see you in my next video do do do you

Channel: Thefemijohn

Views: 76,456

Keywords: design system, ux design, figma design system, ui design, design systems, ui design system, figma variants, figma design, how to build a design system, web design, variants, ui design tutorial, design, how to create a base component for a large button set in figma, ux design tutorial for beginners, ui design tutorial for beginners, user interface design, design system tutorial, how to create a figma button, figma components, how to make button variants in figma

Id: VZSXq7VgeGU

Length: 24min 5sec (1445 seconds)

Published: Thu Jun 30 2022