Creating the Most DYNAMIC Buttons in Figma

buttons buttons buttons this tutorial is not just about buttons but i'm going to be demonstrating a process i saw from a previous youtube video i'm going to link that in the youtube description but i've expanded on it a bit more to make it more flexible and dynamic and so this process will allow you to create components that are extremely dynamic and flexible you can choose to create these boolean values or these properties that allow you to determine stuff like if you want your button to have an icon um and you also allow you to customize the icons very easily within your components and the variants just looking at this obviously this is all from a single component variant and the possibilities are really just endless and it makes your life much easier as a designer working with a big figma project so as always make sure to subscribe let's get started now wait one second i want you to check out designcourse.com which is going to be launching here in 60 days or january 4th of 2022 um if it's not launched based on the time you're watching this i want you to enter your email address because it is my new very robust ui ux design course and it's not just a course with video only there's also interactive ui tests there's also design mentorship with challenges and so much more so if you really want to level up your game and become a great ui ux designer definitely enter your email or if you're watching us at a time that it's released consider joining all right let's get started alrighty so let's get started here with this project you can download this starter project it's a fig file dot fig um in the youtube description and then you can just drag it on to figma uh where the it lists all your projects out and then you'll be able to open it um so right here we want to have a call to action this is where our button is going to go now if you're kind of a stickler when it comes to alignment we can come over here to turn on the grid and then we'll take our rectangle tool now some people they kind of just those design a button without context like they'll they won't put it in a design maybe they'll just do it off here in the canvas or whatever i like to see what it looks like first in the context of the design um that we're working with so i we can hide that now and by the way when it comes to a call to action button you really want it to stand out well so we're going to use this color right here and ideally if you're working with a real project with many artboards and stuff you want to um save this here to your not that button sorry your color styles right here so you'd save this name it primary whatever um and all that good stuff so then what we're going to do is we're going to round the edges just a bit i like five typically it's very small works well and then we're going to get our type tool we're going to come over here left click and we're just going to put uh download now something like that um i'm using nunito bold size 21. that's all that's good stuff right there and then additionally we're gonna start off with an icon as well um right click plugins we're gonna go to iconify and we're just going to get a download one right here just type in download hit search and you'll find this right there all right so now what we'll do is put in i will get it placed in there and then we will double click into it and change the fill to white and there's a button all right very simple um if you just stop at this and then you just you know you have a bunch of artboards um and you or frames rather just just different layouts and you start to add this button in different places and then you want to change it or the client says hey let's change this or your employer says that let's change the color let's change the type you have to do it a million times all right so that's why we want to do things a little bit more intelligently um when it comes to this stuff so the first thing that we're going to want to do is um i want to see how this button responds based on this art board when we adjust it in and out kind of like testing responsive design now on you know an actual website that's been realized in front of development so right now this is what's happening it's not ideal at all um and the reason i think this is important because if you do make if you if you go to take this button and you replicate it across another artboard that might be a little bit larger of a phone size or a tablet it just makes your life a little bit easier sometimes when it comes to um scaling it and making sure things are just situated where they should be so what we want to do is the first thing um and there's sometimes you can mix and match these steps um what we'll do is we are going to make this so that um when we expand this artboard in and out we want to make sure that this element right here um is structured left and right so now when we pull it out it's going to be left and right all right so the next step is we want to take both of these elements and we're going to auto layout it so we're going to add plus right here and that automatically creates an auto layout we can also do this to align it here to the actu absolute center so when we do that and they're kind of essentially grouped up into an auto layout it's almost sort of working but now what we want to do is we also have to have foresight we we i want this to be a button that has a hover state and that has an interesting animation that will take place with smart animate um so what i envision is having like a an ellipse that kind of grows out from the center um so to do that we have to think ahead a little bit before we make it a component it makes life easier what we'll do is we're going to duplicate this rectangle 4 which is the button right here so ctrl d now we have rectangle 5. now our intention isn't to keep just a second copy of it it's going to serve as a mask so what we'll do is we're going to take an ellipse and just somewhere around the center i'm going to hold oops we don't want that to happen um let's see here what we'll do is just i'll just come over here off the side and we're going to put it near the center and then we're going to hold shift select that rectangle 5 and then we're going to come out and click this mask that way we can make this ellipse any size we want and it will still stay within the confines of that button container or that rectangle five right here as you can see um let's let's select our ellipse right here we need to give it a color um and this color will be that and then just darker right around there is pretty good all right so now we want to make sure this is placed underneath where i the actual let's see here we have our mask group we have a frame we want it to be underneath the frame so let's collapse the frame and let me make sure this works all right there we go so now it's placed where it needs to be let's open up that um the the mask group here and change our ellipse to zero percent opacity because by default the default state is obviously without that all right we're getting very close so now we're going to take everything notice it's selecting all these layers and we're going to create a component ctrl alt k or command um option k or just come up here and just hit component so now it's a component let's see what happens now okay so we have to reset some of that stuff when you make it a component it messes things up sometimes um we change it to left and right and there we go perfect staying in the center exactly what we want at this time okay all right so now that we have that done what we want to do is create um a variant out of it now a variant is a relatively new feature i've talked about this a couple videos but it's over here it's it's in this section right there so we're going to move this off here just so we have some more space to work with because when we click on variants it's going to expand it into this little container right here all right so what we'll do now is we're going to create the state for hover so we're going to double click into here we're going to get access to our ellipse to we're going to drag it up holding shift and alt right around there just so it consumes the whole button and then we're gonna change this to a hundred percent so now we can see it is darker all right next up we're going to select our component and then out the whole outline or whatever you want to call it and we're going to add a property so property one by default we're gonna change to hover all right then we're gonna select on our first one and we're gonna change this property here from default just to false because this is not the hover version this is so we're going to put true now here's where the fun stuff comes in we're going to go to assets drag in our component get it placed you know roughly where we want and then we're going to hit play now let me get things um let me get this moved over here for a second or rather this way there we go now watch this it doesn't when we when we drag it in sorry i shouldn't hit play yet because we haven't done anything when we drag it in we have this option of hover to like turn it to a hover state or whatever that's not necessarily what we want you're gonna see why this hover little um toggle switch becomes important um in a little bit so for it in order for that hover to work and for us to see it animate in we have to switch to prototype take this drag it down we're going to change this to while hovering and smart animate we'll leave it there 300 milliseconds and now there we go look at that and what's also cool is because we made it so that we can easily adjust the size we can move this in that works very solid now what about if we wanted to change the height that works as well okay so now what if for instance we wanted to change this so that we can have another button state without an icon well to do that let's go ahead and duplicate this we'll just kind of move this down a bit and take this bot this bounding box here just and uh decrease that we'll get rid of um any of this stuff right here we're gonna switch the design tab and then what we'll do is we're going to duplicate or double click rather not duplicate we're going to delete this which we can easily do because it was an auto layout then we'll duplicate this and we want to make sure we access the correct layer here when we open this up we want to come out to rectangle 4. we don't want to choose the mask group and try to change that color we want to change it to the hover state color and again it would be a good idea to add these to the library and all that stuff if this were a real project so we'll change this to that same color next up we're going to go back to our component 1 and we're going to add a new property by clicking the three dots add new property we're going to put icon and then we're going to over here i specify icon is false icon is also false oh wait i'm slow icon is true it's a little bit late icon is true all right and then this one's going to be icon false hover state is going to be false and then right here icon is false as well but hover state is true okay so now what we can do temporarily obviously this is going to look silly in the context of this layout we're going to move things down let's take these just kind of move them down here move that back up and we're going to have a couple buttons so now we're going to go back to our assets we're going to drag on download now or rather we could just replicate this holding alt shift move down and so now we can toggle icon off look at that now in order for our hover state to work because it's not working on this we have to go back to our prototype section we'll drag this here oh no drag this here rather and this is going to be a while hovering and it's going here all smart animate all that's working all right so why is it changing i it's not animating in like we want it to with that um that little circle well what we'll do is come back over here we're going to change or take our ellipse drag it out shift and all make sure it's a hundred percent all right and make sure we are dealing with the same color here and there we go now one final tip one thing you might be wondering it's like okay we have this really flexible button we can change the the copy in the button um to like whatever and it still stays centered it's awesome um what if we want to change the icon that's going to be difficult like changing the icon on the component instance it's not really possible um just by trying to drag in a new icon here or just deleting this this right here it's it's it's not going to work the way you want it to so here is a workaround so what we can do is let's get a let's use a conify real quick we'll just do like right just type in right um we'll get yeah we'll just use this one right here and we'll make sure i will double click it make it white oh god it's going to be one of these things let's uh adjust it there there we go all right so then what we can do is we can just drag that right there all right so that's a right arrow you can do this for a bunch of them and then what we do is we're going to come down here we can see um this is the actual arrow and we can hide it all right now what we'll also want to do is replicate it for any other variants that you have of that particular button right now we just have the hover you may also have you know focused and all that stuff and pressed and whatever but what we'll do is now we have to replicate it um and that's up here so this one's here let's get these closer to each other um let's so this is that one and this has to go underneath it okay so this and this right underneath each other or this one's at the top what am i doing there we go okay so now i we're going to expand both of these and this one has that icon that this one doesn't so where it says download now we have to open frame six we will alt drag it down and we're gonna put it underneath download now all right so now watch this we will double click this and we'll come in here we'll hide that and then we'll bring it back look at that and it still works now we have interchangeable icons very very very very awesome i so we'll do one more duplicate down here just to show you how cool this is and this one of course same thing we can just reverse this bring it back all of them work that is so exciting it's a massive time saver really flexible dynamic buttons all right everybody always fascinated with all the new techniques that we have available at our disposable with tools like adobe xd and figma if you know of perhaps some other tricks or even a more efficient way to do what i did please share it here in the youtube description i mentioned me on twitter if you wish and also give other ideas if you want to see other things in terms of workflow anyhow as always make sure to subscribe [Music] you

Channel: DesignCourse

Views: 15,462

Keywords: figma buttons, figma button, how to create a figma button, figma variants, figma properties, figma variant properties, figma booleans, figma icons, tutorial, gary simon, designcourse, figma tutorial

Id: KWUlkXZOj4g

Length: 17min 10sec (1030 seconds)

Published: Fri Nov 05 2021