Creating and Using VARIANTS in Figma

[Music] hey what's going on mds here and in this video we're going to take a look at figma component variants very very experienced how to create them how to use them and how to make it more approachable because it can be a little bit confusing at first so let's just dive straight in so we're looking at a simple to-do list screen that i've designed with a collapsed view and an expanded view based on different versions of these components and it's all created with this one to do component here with all of these different variants now a couple of features of this particular component we have a type for default and child and then we have two switches one done and one for more so if we open up our panels and we select this actual component you can see our more toggle is going between this one and this one and our done toggle is going between here and here and here and here and here and here depending on which one is selected so we can change it to child and do lots of quick little fun stuff to change all of these variants but this can be a little bit difficult to understand when i'm okay apparently my autofocus wasn't working there i was just saying that it can be difficult to understand going through someone else's example so we're gonna take a look at another screen and just put it all together so i'm going to click on building blocks here and we have our same screen just without all of the component stuff going on so you can see i've got a simple frame here it's got a background shape a label and a little rectangle for a check box all right so the first thing i'm going to do is grab this check box and you can see that variant is not an option here because it's not a component so i'm going to hit command option k to turn that into a component all of a sudden i have variance as a possibility so i'm going to go ahead and just hit the plus button there to kick off our variant endeavor so now that i've got this created as a variant you can see it is named default and variant 2. i'm just going to ignore what's happened so far and i'm gonna work on the visual differences between these two so let's go ahead and sample our color for the selected state and pop in the check mark as well so now i have the actual visual differences that i'm after with this checkbox the first thing we're going to look at is how to create a little toggle switch when i pull this over this is a variant and i can currently choose between default and variant 2. this is the perfect example for when to create a little switch so what i'm going to do is go over here and i'm going to call this done and then i'm going to call this one no just by clicking on this input field over here i'm going to call this one yes so now this instance of the component variant turns into a magical little done toggle switch now there's two different types of variants there's just one with a drop down and you have multiple selections or there can be a toggle switch which is a boolean binary on off state you can name the states on off you can name them true faults you can name them yes and no any three of those will work to create a switch like this you can see that if i went back and i changed this to nah and yes left that so now now all of a sudden it's back into a drop down which is useful but in this particular context it's much more useful to have no and yes as a toggle switch it's just very nice and easy and again we can call this right here whatever we want to by going back to the frame here and then double clicking right there and we could say selected selected on off but since we're using a to-do list we'll call this done and leave it at that and this is one thing that i like to do i like to have an instance of the variant outside of the variant control panel just so i can click it and kind of test it as i'm building it so now we're going to add two more of these i'm just going to click this one here and hit command d twice to create two more variants i want this little circle inside of this area get that in place delete and i want this check box inside of this one now let me just delete that background all right so there we go but you can see that this has created some odd naming over here again i'm just going to ignore all of this what i really want to do is click the variant component name up here that way it gives me access to all these variants so i don't want anything to mess with my on off state i don't want additional names in my on off state so this one is going to be off and this one is going to be on now i can go back to my variant to test this you can see that i have the little thing that's telling me there's something wrong this is still going to work to some degree but you can see that now it's not going to the correct one so this is where we're going to introduce a new property to our variants because we're going to have this is going to be our regular check box stuff here and that's going to be our kind of child check box stuff down here and this is going to be our drop down so what i'm going to do is go back here i'm going to add a new property and i'm going to call this type and now the fact that i've added this as a type i can click on individual children of this variant group and you can see that type is just set to default that's going to be the first name so i want this to be rectangle this one is also going to be rectangle and you can also choose two of these at the same time and name it circle but maybe this is weird maybe because there's not a circle here maybe that doesn't make sense and maybe because we have this kind of parent child relationship maybe it makes sense to call this parent and child check boxes instead of rectangle in circle maybe that makes a little more sense so now that i've changed the type that's going to create a drop down child and parent so you can see now if i toggle between child and parent and the done toggle is on it's basically going back and forth between these two because those properties line up i think that type should be above done in the panel here this feels a little bit odd having this attribute above the actual category i feel like this is more important so what i'm going to do is go back to this and just hover and grab these tiny little handlebars and i can rearrange the order of this content so now the category is on top and the toggle switch is down below so child and parent but what if i wanted parent to come first instead of child i could just go in here and rearrange these that way parent comes first and then child so that's just like an easy way to kind of set up this panel so everything that you've set up in this area everything inside of the variant list is going to be controlled by clicking on the name and fiddling with all this stuff adding new properties if you add a new variant it's going to change things up so this is kind of a simple example of both a drop down and a toggle let's delete this stuff because we don't need it anymore and let's move on to our bigger to-do's right here so inside of this frame we're basically going to do the exact same thing all right so if you look in our layers panel you can see i've got this background shape this label here and this kind of placeholder rectangle which i'm now going to replace with this one so i'll just delete that out and i'm going to click and drag while holding option to place an instance of this component inside of this frame so now i have access to change this however i want to and remember when it's not a component you cannot create variant so the first thing we're going to do is hit command option k to turn this into an actual component second thing we're going to do is add a variant so now we have our to do component with variance now again like i like to pull this out so i can have one to test this is an instance instead of the main component and you can see now same thing happened i've got a drop down with default and variant two so now let's get in here and do the same thing we did to this only now instead of actually needing to go in here redesign it i can select this nested component and i'm just gonna call this done and so now that that's changed i just need to update the variance and how everything is working so i'm going to call this the same thing i did the check box and this is going to be done no and done yes and again we've created a simple little toggle switch which is great but we also need a more category so if we have more to do is associated with this main to-do we want the kind of child option with this different check box style that's slightly indented to show ownership so what i'm going to do is grab this command d and i'm going to option drag this over here just to create a little dot dot by hitting option 8 three times and i'm going to change the color of this kind of put it over here on the right a little there we go so this is going to indicate that more are available and i'm not going to worry yet about fixing the variant names i did want to show yes and no it's still there it just is not a toggle switch anymore because now this has turned into done three which is not ideal but it has to turn into some kind of name we'll go back after the fact and fix this so this one's going to be more and now you'll see i need to create the two child versions of this as well as well as more done let's go back over to building blocks hit command d on that again make that checkbox done another thing i'm going to do for both of these is just add a little bit of a gray color and i'm going to change the the style the decoration to a strikethrough just for a little bit more clarification so now we've got done and then more and now i'll create the children here so i'm going to select this one here command d and we're going to indent these i want this to be kind of like right in line with the left edge of this text so i'm going to do 64. i'm just holding option to pull up the measurements there and i'll put that 64 from the edge and now we've already created these which is very handy so now i can go in and just change this component to a child i'm going to remove this more thing and so now we have our child instance right here and i'm going to command d again and change this one to done and then i'm going to copy the same style right here by hitting command option c click this command option v and so that's basically everything we need so again you'll see that we have all these different variants all these different property names of the variants and we need to clean this up a bit because it's not really going to be that usable like this so i'm going to introduce a new category a new property i'm going to go to the to do name right here and i'm going to create a new property and i'm going to call it type now that we've done that when we click on an individual instance you can see now the type is available and we can start editing the value of each one of these types i'm going to select these two and i'm going to go done as off and then these two done is on so now that's going to turn this back into oh i did yes and no so you have to actually be consistent with with your labels or it will turn into a drop down so let's go back and say yes and no or true or false or off and on these are all going to be no they're not done and these are all going to be yes they are done now our toggle is back but you can see it's going back and forth between this one and this one because it still doesn't know what to do because we haven't added that type yet so this type is going to be default this type we're going to do more and this type we're going to do child now we have the done for default we go to child and the done is working properly and we go to more and the done is working properly i still don't like the organization of this just yet i also don't like that child is before default i kind of want to change that up so i'm going to go back to this name and i want type to be on top and i want default to be first and i want more to be second so i'm just going to rearrange that and now i'll just test it here default done not done more child and that's working now now another thing that we can do here more is technically not another type it's really a default style with just it has more it is definitely a boolean statement so this is where variants can be tricky it's not that they're confusing on their own but they expose the complexities of naming things early on and it might be difficult but this is probably a good thing so if you're working with a development team on this this would be a great time to pause what you're doing dm someone get a conversation going about how this stuff should be named do we want this to be a type do we want it to be a boolean value what makes the most sense here because we could very easily call this default and then we could create a a new property that says more and this one is let's actually all of these let's turn more as no and then these two are more yes so now instead of more being a type we just have default and child and more is a switch you turn it on and off now it doesn't really change how you design these variants but it does change how you use the variance later on how you want to use it it's really up to you do you want it to be a boolean value or do you want it to be more of a category type this can have drawbacks because if you have if you have the child selected there's not a more version of the child so that can be a little bit confusing so maybe category types if i go back and undo everything that i just did maybe having more as its own category type makes sense for this particular example i'm just going to copy these screens into my building block screen for reference for how many i need to put in now i'm going to just copy by option dragging over into here and we've got one two three four five so i'm going to grab this option drag and then hit command d and now oops these got a little bit misaligned so let's put them back in place this one is going to be done and this one is going to be more and now i can go ahead change the names of each one of these for a little bit more actual content context all right so let's copy these over here and let's move color and style down and we'll do one two three four five more one two three four five just tidy this up all of these right in here are going to be child and just to show the differences we're going to click on three of these to do done and quickly rename this stuff just so it has a better feel delete these and there you go we've done it we've got all of this created with just a single component made with a bunch of different variants all right that's it for figma variants i hope you found this helpful and if you have any questions please let me know in the comments below if you want to see more content like this feel free to subscribe or head over to shift nudge on twitter where i'm posting just about every other day some kind of interface design tips and tricks and critiques from the chef nudge interface design course thanks so much for watching and i'll see you in the next video [Music] you

Channel: MDS

Views: 24,916

Rating: 4.9513812 out of 5

Keywords: matt d. smith, mds, designer, interface designer, freelancer, athens ga, athens, vlogger

Id: gaoM_8rsYac

Length: 16min 44sec (1004 seconds)

Published: Mon Dec 07 2020