Office hours: Get started with Variants

all right let's jump in and do it i'm gonna head into our file before we before we jump in and show you all the variants goodness we just want to talk briefly about what a variant is and the simplest way to describe that really is that historically you've had a bunch of different components that you've been managing within your design files and that can quickly get out of hand when you're consuming them in the assets panel you can get to a situation where you're trying to search for a button for example in the assets panel and you set you are surfaced with all of these other buttons coming up variance allows that you to can consolidate all of that into one single property and component best way for me to show you this is with an example so i have this button here which lives in you can see our friends of figma pinging off in the corner we've got a variance set in here and i have my components inside and i have my default button set up you'll notice over on the left hand side that the layers panel is slightly different we have all of our different components from before nested inside this main component here we call this component set this button over here then can be switched rather than using the instance swapper over here we can use our panel on the right hand side so i can change that state just using this menu over there secondly we have our alignment to code so if i zoom in a little bit on here you'll see that traditionally when you're building out your coded components you have a situation where you have your properties and your properties can map to different values so this value here we've got primary which maps into my variant set over here for my primary button my size maps down the bottom and my focus state too and then i also have this option over here which is disabled and has an icon so it really consolidates that experience consolidates that consumption and do you have anything to add on that no i mean i think that that's a great point uh you know one of the big things that's that's obviously difficult for for um us to interpret is exactly what type of code what type of abstraction layers what type of systems you might be using in your development environment right so for us to make big sweeping assumptions about the actual uh internal structures of things can be a little bit trickier and what this provides you is with that layer that we know is translatable to anyone who's building components at any different layer so however you choose to interpret those properties and values from your development side you're going to have access to that kind of stuff directly within sigma so you can actually communicate better with your team again having that shared language with your development team this is how we work faster together we're all building the same product right so so this is going to really make that a lot easier by understanding and getting closer to your components that being said you know obviously there's going to be some difference for how designers are thinking about things and how developers are working out but this is going to give us some of that shared language together so absolutely amazing summary thanks anthony right with that in mind let's jump in and start building some stuff firstly i'm going to go ahead and create a tab bar variant component what i have in my file already is just a few icons and i want to create a tab bar that i'm going to use inside my app so the first thing to do is to create my tab bar background i know that my iphone is set up as 375 wide so i'm going to set that in here i'm going to make this 80 high what i want to do here is also just give it a nice black background and then we've got our background set up nicely after here i want to make some tabs so let's make three tabs i know that this needs to be a third of the width so three seven five followed by three and i'm going to make this eighty high two and this is going to can contain my figma icon like so you didn't want to do three three three three three three repeating percentage yeah absolutely it's going to make sure that's centered then i'm going to duplicate this a few times and swap out that icon using the instance swapper to my play icon and then lastly make my search as well all the search is the middle one i'm going to rename this tab slash let's say home tab slash search and tab slash play then i'm going to turn these into some components at the top just drag these out of the way like so and then i'm going to pull these into my tab bar i want to send this one pull this one over to the right and this is going to be my tab bar for my home so tab bar slash home and then i want to make comments coming in around the math and the thing i don't think a lot of people knew that you could do that that you're actually just doing that also in the width panel right and that was up in the in the properties panel over there yeah absolutely awesome i'm just going to duplicate this because i need to make my search version 2. so what i want to have is a state where i have my home button active the other one's inactive i'm just going to select these select these and make these 50 so we have a home that is active search that is active i can then turn these into their own components and then if i select these what you're going to notice is that on the right hand side we have this combiners variance button appear if i go and tap that we get this new property on the outside this purple dash border which signifies that we have our variant set if i then open this menu you'll notice that we have those nested components on the inside this outline here can also be styled if you want you can hide that purple outline you can give it a different color you can change the thickness of the border if you want to you can align this to your design system to make it fit in with what your design system looks like we've seen some companies remove that border entirely some of them style up a different way it's entirely up to you you're also going to notice that i probably forgot to add the third option so to add that third option i can click on my component set and tap this plus icon that will then duplicate this middle this top one and give me another option i'll come back to the naming in a moment so this one is variant three at the moment and i know that i want to have this one inactive and this one whoops this one is active so just click on my tab bar again and check out the properties panel we'll notice that we just have property one which is not super useful i know this is going to be my menu and i can flick that out when i want to use it on the front end so i'm going to rename this as menu and this last one that's popped up this variant three is my play so i can double click on that and type in play if i want to as well i can reorder these by clicking and dragging them like so that just gives you a bit more control about the consumption experience of your variant set so i have my tab bar set up i can alt and drag that out to create a copy and use that like so by going over the properties panel again dropping that drop down and flicking between the different states of my menu we now see on the right hand side i've got this little waiting for tab bar set up i can click and drag drop that in there and we've got our tab bar ready to go this is really cool but we can actually take this to another level as well by having something what we call boolean value so maybe in one part of my app i have a situation where i've got a tab which is either on or off with a border i can do that too so if i select my tabs i'm going to create a copy of these i'm just going to break these up now and rename them so they have a border property so i'm going to group them together like so command r on my keyboard to rename them i'm going to select current name slash border i then want these ones to be without a border so i can rename these current name slash node border and then i need to create a border so let's just create a rectangle in here i'm going to make it four pixels high and one two five for the width anchor it to the bottom and give it this lovely red color i want to rename it as my border copy that and paste it into my other ones i'm too to turn these into a component at the top and then we have a situation now where we have these states set up i can drag a box over these and combine them as a variant as well and we get double properties now so the first one is my tab second one is my border property i can then duplicate this like so and flick that border on or off which is great but we should probably have that as a bit more sophisticated and maybe we can do something like a toggle so if i select my variant like so and just change this to either true yes or so i've got true true in here and false in here and then on my tab here we get this little switch so i can turn that on or off antenna there's three ways that we can use this isn't there what's the other two yeah so you've got uh true false yes no and on off so some pretty standard booleans that you might have this is useful because not everything that you're going to have isn't is necessarily going to be um the actual like programmable true false so you've got a few other options that you can add in and sometimes the word on might just make more sense than the word true for certain situations so yeah absolutely so then i could use that good question i don't know if one and zero supported today but that's some good feedback one on two yeah that would be nice so what you'll notice now is that in my variant set i also have if i select my component i also have this border switch i can ping on and off and then in my instance i can turn that border on or off like so so i can flick between my tabs and i can flick between my border on or off so a few very quick things that we can pull together to create quite quite a complex nested variance set within a variance set and using our boolean operations to take that to the next level anthony's now going to dive into something a little spicier with some multi-dimension migration over to you yeah in fact before we get there i think there was a couple great questions that came in that might be good to just sort of uh do it while we're looking at this particular example um when you were clicking that uh the plus button there it which that was duplicating the the first variant that you had in the variant set so that's like the main variant that you're gonna have uh it's what's going to happen the assets panel it's what's going to be duplicated when you hit that button yeah it's worth noting at this point that the we treat the top left variant as the primary one so if i see this in the assets panel if i search for tab for example you'll notice that this one surfaces because it's this top left and then this one surfaces because it's the primary one as well so that's a great way to think about organizing your components is to think that the top left one or the top one is the one that we're gonna be surfacing in your assets panel awesome very cool um yeah let's go ahead and move on to a little bit more complex example than we've got here we're gonna be building up over the over the section as we go today so we haven't uh put everything all out at once we're gonna try and add a few layers on so we can everybody can follow along as we go as well so um great i'm gonna go ahead and share my screen here awesome and just a quick confirmation that everyone can can see my screen really can you see the uh the figma window i'm just going to stop my share if you can go ahead and try again all right can you guys yes we're in green awesome is it the fake my window correct is that what you said yep awesome fantastic all right so let's build up a little bit from what we were just looking at right so the example that we just saw we did a couple of really interesting things right so we started with having a property that we could turn on and off uh for this component so where we're able to say um we want to switch between these these different options these different properties that we have or sorry different values of this one property so this is what we would call something one-dimensional right there's a single row that we have or in this case a column that we have and we're just switching between the states um or sorry between the the yeah in this case it's kind of like a state um that we're working from um what we're going to do now is just take this a little bit further because the reason why we actually spent so much time on this was and why we call it variants and not just states is because you can actually do things multi-dimensionally as well so when this project originally started of course you know states was our big one of our big ideas in the sense that we want to say hey you know what if we could have a way that you can have an object that has you know maybe a hover state an active state default state all of those types of things but by going a step further than that we can actually do properties in both directions now so not only can we have something like a state but we could also add a type we could also add um you know an action is it destructive is it is it is it um is it a warning and that kind of things and so by having states just be one of the types of variants that you can create it really opens it up for doing a lot more fun stuff so here we have an example and this might look familiar to a lot of people right so this might be how you have your your buttons actually set up today um you may have them all as separate components all directly on on a page like this and you've got all of your different versions i saw a couple things come through in the chat earlier about uh the fact that we now can do um radiuses on a single uh side uh that i believe launched a while ago but yeah you've definitely got the ability to just do uh individual corner radiuses which is awesome too so um cool so how do we go from what we have here to a variant component that's going to be useful for us well a couple of things can help make that experience easier so we saw how we could build from scratch but what happens when we want to actually use the existing components that we have i could just go ahead select all of these right now you can see that because these are all main components i can actually combine them together as variants and i could just hit combine variants in fact let's do it real quick just to see what happens here so we're going to get this and yikes okay that's a lot of different value names all under a single property not the end of the world if i wanted to i could go through and try and rename each one of those uh manually you know i could go in i could try to separate these out into different properties i could try to add a new property because i know i want to have at least a couple of different uh properties that we're gonna have here in fact if we look closely we see there's actually quite a few properties right we see that we have a button that has uh no icon a button with an eye icon a secondary button uh with no icon and then on top of that we actually have columns for each of the states that we have as well so again this is what we mean by multi-dimensional but how can we make this experience a little bit better and for anyone who has checked out that preparing for variance file some of the stuff that we're going to cover right now is is actually covered in that document as well so you've got some take home material so if anything that i say here goes a little fast or is a little bit advanced just know that you've got that as a document to help you as well we're going gonna back up for a second so instead of converting this immediately into a variant here i can actually change the names of these components to make that experience a little bit better and figma will actually try to interpret and understand the naming conventions to automatically group the values into different properties for me so you can see right now if we look at these names we're not using any forward slashes which will put the components into different groups or subgroups here we're just using dashes for everything if we use those forward slashes figma's going to be able to understand how things should be grouped together so for starters let's go ahead and do some of that fancy renaming that that louis was just doing a second ago right so batch renaming is an incredibly powerful tool uh if we select more than one layer so if you if you just have one layer selected and you hit command r uh or if you just double click into the layer it's gonna let you rename that one layer in the layers panel if you have multiple layers selected in this case i'm going to select all of these and you hit command r this is where you get that batch renaming capability so and this is a very powerful tool you can do a lot of very interesting things with this as far as matching existing things in the name replacing those as you saw louis we use we actually have some excuse me what we call smart variables in the sense that you can add the current name back into the file name you can do things with numbers where you count upwards or down like this you can sort of see what's happening over here on the left hand side as i renumber those and then one of the more advanced things is that we can actually use what are called regular expressions directly in here we're going to save that for right now but for anybody who's familiar with them you can do some pretty advanced finding and replacing and moving things around i'll show that in a second but before we get ahead of ourselves let's let's do a couple of things to make these components a little bit better uh as far as how we group them together so for starters let's replace those dashes with forward slashes so i'm going to match uh our dashes as we go through this um keep in mind that if you do a match like this you're going to see here that if we say rename we're just gonna get that first match that it found so it didn't actually do it for every single slash and that's okay um it wouldn't take us too long to go through and do this for each one of those um alternatively you can actually search for all of the slashes if you want um using a little fancy trick here where we actually want to say look for that and then i believe we're going to want all okay we'll have to come back to that one but in this case let's just go ahead and rename those exact slashes louie i don't remember what it is to grab all of the matches simultaneously i actually can't remember but i think you're on the right line no worries we'll come back to that one in this case if you're going through and you're doing this it's just going to take a couple of things so what you want to do is match the dash add the slash rename and then you can match the dash add the slash and then we'll just do it once more for that third group as well and there is a shortcut for this so i i apologize i'll make sure to tweet it out afterwards as well as we go through it um cool so we've done a couple of things now so you can see now from those dashes we now have forward slashes for everything this is probably something that a lot of people have seen this is a common way to organize your component types we were just starting from a pretty aggressively uh aggressive example where everything was a little bit different so i could hit combined variants right now and a couple of things are already going to be better for us in fact if we look and we say combine is variance look at that it automatically knew to take those forward slashes and create three properties based on those three groupings that we had automatically but i'm going to take this a step further and say we can do even better than this as well so look at property three here right property three is that with icon without icon if i wanted to before i converted this group i actually could have renamed those as well so if i come in here and i say match everything that says without icon and replace that with false say rename and then we say match everything that's with icon and set to true and now we say combine as variance i now have that true false already set up for me now with a single property it might have actually been faster to go and just rename these uh by double clicking on them so you can actually just double click into these pills and rename them very quickly but that false true can help a lot when you want to set up multiple boolean values all at once um one other thing that we want to change here and you can probably see what's happening is we have property one property two and property three why don't these have names why aren't these something that we know about and the answer is because we didn't have that information ahead of time we didn't know the names of those properties we only had the values of those properties in the forward slashes so now we want to go and just make sure that we add these names back in so we can say something like type so type in this case we're saying type is something like primary button secondary button and things like that again i would talk with your development team because if they have any specific languages that they like to use for these properties that can be again another just great place to share language between the two maybe instead of the word type if they use something like um you know action or anything like that there's different ways that you can go about that then let's go ahead and this is where we're going to put our state one right so we've got default disabled focus hover and then finally we're going to say icon true false for this so we now have an awesome variant component that if i were to drag any one of these instances out so that's another important thing to note that if you want to you can always grab an instance of your variants from any one of the the ones that comes from the component set so we have the component set here with all the variants in it if you just option drag from any of these you're actually going to get the variance already set for that component automatically like that alternatively if you're using the assets panel you can just go there find the button that you want to use in this case i just want to make sure i'm on the right page because we're going to do a lot of examples today you'll see here we have that button component now and i can go in and i can set the properties that i want to automatically and again what's really cool is that when it's multi-dimensional changing one property will leave the other the others untouched assuming that there's values for the other ones as well so you're going to be able to change between them very easily as well in that sense one case to watch out for and this can happen sometimes as you're going through it is that if you ever find yourself in a position where you're missing values or you have duplicate values the system is going to warn you about that too so for example if i were to take uh this one that says icon true and actually just change this to icon false you'll notice here we actually get a warning that says hey there are properties and values of this variant that are conflicting as in if you went to go set that property icon false there wouldn't be a way for figma to know which of those two components you were actually talking about right so you'd actually have to um if you see these warnings and definitely keep an eye out for them um we've gotten some great feedback too just around like where we want to put this warning is it you know so if you've got if if you're if you're going through and you're working on it please definitely we're this is the time that we want to learn more about how everyone's using it and what's making the most sense here so if you see that um you can go through and actually uh just change your values back in fact if i have that unselected let's try that again real quick then i can come back here if you select your component set so you don't know where your problem is this one's really cool so if i happen to have the right one selected but if i didn't know where that problem was you'll see that it actually says select conflicting variant so you can come in quickly select them and go aha okay so these two have a conflict i can come back in and i can say true for this and now i have my awesome working multi-dimensional component um as you can see here a ton of power with what we're doing as far as building on the stuff that we were showing a minute ago too um i am going to show one other quick example here which is another interesting and quick way to build multi-dimensional components as well so let's assume that you have a button that has a few different properties that you want to turn into a multi-dimensional so we have got a primary button here we want to quickly build a secondary button um what you could do is if you actually so you'll see here that if you look at the naming convention there's a couple of things going on this is button primary and then i've actually already added the words false false and and that's a little confusing right like false false false true true false what's going on there what's happening is that i've actually separated out values for both which one has an icon and which one has a menu icon on the end of it as well if you do too many of these it will be a little confusing but the way that i've organized it now as i said the first false is the first option is the one on the left and the second option is the one on the right so when i go to create this into a variant component i can very quickly if i were to actually have these as components let's go ahead and make sure that those are components there as well zoom window out of the way there we go fantastic uh create multiple components so if you didn't know you can create multiple components at once super fast with a selection which is great um and if we say combine as variants you'll see now i happen to know that this first one is going to be the icon and that second one is going to be the menu that i have on there on the left but again getting a little bit ahead of myself because what i really want to show is let's assume what happens if you want to make another set of these right if you want to make a secondary button you can go ahead drag out and this is true even for if you're not actually creating variants as well if you just need to duplicate components um very quickly you can do this i've created instances of these right i'm going to detach them because i want to create brand new components and in this case what i'm going to do is i'm going to uh let's change some of the properties about these uh let's go ahead and um i'm going to do is go back to the layers panel here first let's do a quick rename right because this is still called button primary so i'm going to do that fast registex thing again i'm going to search for the word primary and just replace it with the word secondary so immediately we actually just bash change that in those sets of components now let's actually change the way that it looks as well and you can use a couple really cool tools for this so you see we have selection colors selection colors is the way that you can quickly select all fills strokes uh text colors anything like that at once and change them all at once so what i'm going to do is i know i want this button to be a black outline button so i know i'm going to want the text and the icon and the menu item to be black i can just go to selection colors and change white to black and it did not care where that white was applied on and it just changed it all at once for me automatically quick way to do that second thing we want to do is we want to change those fills right well right now we don't have access to the fill layer because we only have the top level of the buttons selected so another really cool trick is that if you have multiple things selected in your layers panel you can use enter and shift enter to quickly move in and out of groups of layers so if i hit enter once you'll see it immediately is selecting all of those inner containers that i wanted to grab where i have a color turned on right here i'm just going to break that connection and i can turn off that fill if i want and i'm going to add a stroke on the outside so you can see how quickly i was able to create a secondary button there now if i want to i'm going to convert these to components again i now have my variants i've got the naming conventions the way that i want them i've got uh everything set up the way that i want say combine as variants i know this first property is type again as we just looked at a second ago i know the second property is my icon and the last one is is this a menu does this have a menu option or not if you wanted to have something that was a little bit more generalized you might even say something like left icon and right icon because then if you we're gonna we're gonna look at how you can swap out those instances as well um this is just a quicker example to show you right here so now if we actually grab an instance of this you'll see that we've got our button type we can switch between our primary and secondary we can turn on our icon we can turn off our menu ah so much power i love it [Laughter] anthony just one more thing can you show the reordering of the properties in that too yeah great question so let's look at this example here um what happens if i wanted secondary for some reason to be before primary you can actually reorder the the order in which uh not only that these properties are listed but also these values as well so let's go ahead and do a quick reordering so let's say if i wanted the icon to actually be first go back to your component set so select the component set and then you'll see here that if i hover right in front of the name i get a little tiny drag handle for the uh for the property and i can actually reorder these right from here so if i want icon at the top and then followed by the type and then if i want to go a step further and actually reorder values i can grab primary and put that after secondary it will be in kind of a left to right order as they go down so you'll kind of have to keep track of that as you're going through it but now if we select that component you'll see icon comes first and then it's followed by secondary primary which might be a weird way to order things but hopefully helps in the example of showing you there awesome awesome very cool so um a couple other uh really cool things that we can do here uh just to look at um two more pieces of variants that are gonna be really uh valuable is how we can actually uh document these right so so we've created some components here and you may have seen some examples in uh both the documentation guides or the prepare for variance guides that we have is that maybe we want to add some labels and understand what these components are and how they work some general best practices that we are sort of centering around is the idea that you can use labeling outside of your component to actually just sort of track these things in fact a lot of if you go into the community and you check out some of the design systems a lot of teams were actually already sort of circling around this concept already in the sense that i happen to know that this dimension right is going to be the primary type of our button and i happen to know that this dimension this vertical dimension here is the secondary and then let's make sure we turn off our auto turn on auto list and then if i want to i can go down the other way as well right so i could say something like default yeah in this case you might want to say something like like no icon oh thank you perfect uh or just default is fine here again when you have mixed states where you're using different things to create the state because we used booleans this isn't going to have a name value necessarily right so the true false um you could put like icon false here if you want it's really going to depend on how much granularity you need to explain there on your design system in this case i can just say uh that this is like menu true this could just be menu and this could be the icon and this can be icon and menu right again how literally you want these to match up one to one to your properties is really going to depend on your team and probably a design decision that you should make i do find that having more readable names here probably makes a lot of sense if somebody can interpret what that's supposed to mean and then go over and read the values again you know one of the advantages of having a system like this is that you're still working with your team you're still collaborating you're still talking with your team so everyone should have an understanding of how the properties work you're certainly going to want to play with them as well and make sure but this is a great way to do some of that multi-dimensional work as well we could also slice this another way if we wanted to and we could actually say put a second level of labeling out here meaning that we know for a fact that these both contain icons so let's put icon out here and then we can actually say that we know that this is with menu and this is with menu and we can say default menu and then you know no menu something like this for the booleans it's a little bit weird because it may not make as much sense if you're doing it like this but uh you can kind of see how that multi-dimensional labeling can can work as you go through it um i will put a quick uh mention out to if any plug-in developers who are out there who think that they might come up with a cool way to actually automate this that'd be awesome find me great so the last piece that we want to look at here with these multi-dimensional ones is or even just with variants in general is there's one last piece we haven't talked about which is the documentation of these in the inspect panel as well um i'm going to show one part of it and then i'm going to let louis talk about a bit about the um the properties as well and how that works but first let's look at descriptions right so if you're familiar with a component description let's go ahead and just create a basic one real quick descriptions uh are can be put on main components so you know on the or i'm a rectangle there we go uh that description is going to show up in in a few different places right so if i go to the app sets panel and i find that rectangle i'm going to see that description as i hover over it i can also when i'm in the inspect panel here and i select that rectangle i'm actually going to see that uh that as a description here as well now we have something that is going out very soon that's actually going to put those descriptions uh in a place where you're going to be able to see them even better which is going to be up here next to the component name as well uh so that's like normal descriptions but what happens when you have a varying component right what where's the description going to go for that well it turns out you can actually have double descriptions both your component set can itself can have a description so i'm the component set and you may say i you know inside of it you've got a variant and the very is going to have a description in fact you'll see the component sets description right above it as well right there so if i say you know i'm a variant and again what you're going to be able to see in the inspect panel for this is both of those are going to show up in the inspect panel now this is again the traditional way that we've had it before where it's down here in the code you are going to see this up here directly underneath the component name as well that's going to be coming very very soon uh in fact i think we're turning it on next week so you'll you'll you'll see it there it'll be uh it'll help out a lot too again so why would you use this where would this have a lot of value well if you're combining your components together you probably want to still have some granularity on what they are and what they do right if you have a button that's say a destructive button like something that's going to only be used for actions that are costly or dangerous or anything like that you may want to communicate that but that's not every single variant in the button so you put that description on your on your destructive button and then your other buttons can have some other description or no description at all too if they don't need additional context don't feel you have to fill that in either awesome louie i might pass it off to you if you want to talk about the uh the properties channel sure great well y'all are passing it off to each other there's been a whole bunch of questions in the chat around variance and prototyping and i just wanted to address that one just because it keeps coming up we are building interactivity into this it's something that we launched or announced rather at our conference back in september it is planned for january and for anyone who's interested in that i'm going to post a link time stamp link to that part of the keynote for anyone who wants to kind of see how it works so you can kind of see how it's going to work when we do ship it so it is coming we've heard the request just a little bit longer so thanks for everyone who asked that question and i'll respond to all of your questions and paste the link in the q a for anyone who asked a question about that so anyways over to you louis thanks tom i also saw a lot of questions about seeing some rich examples from other companies as you can imagine with it being so new that they're currently being developed and we'll be sure to put together a resource that lists a bunch of design systems using variants as well as anthony was mentioning there is some updates to the inspect panel regards to variants too if i select my variant set and go to the inspect panel it just treats it like a normal component as you would expect so you have as anthony mentioned your description and any other properties that are suitable for that one there if i select my instance of that variant from the variance set you'll notice we get these new properties in the top right corner and these are our variant properties the developers can come in and copy and then just paste those into their their code tool as well so we get those properties that we mentioned right at the start matching to our component that we're creating in code that gets pulled together i can't remember where we are into this little list that your developers can use really nicely similarly on your component as well get the same the same approach that you would expect from any other component we're listing on the development css properties they can come and copy from here as well so you'll notice this is using flex to align with the flexbox model there anything else wanting to nudge on that one anthony no i i think that's a that's a great example there um one maybe small note for developers you'll notice that true false values are actually not strings they're actual uh literals or actual values that we're going to have here so again a little bit more prep for how we are trying to make sure that this is easier to work with with developers too so um it's the little absolutely there's just a few points on best practices that we just like to cover very quickly i know anthony you've got some strong opinions about this as well for those that are for those that are thinking about scaling up their design systems and thinking what could possibly be a variant what could not be a variant just a few tips from us is to probably not set your icons up as a variant it makes a lot of sense initially but when we when we're thinking about scalability performance and consuming those icons it doesn't make as much sense to use them as a variant property if you have a situation where maybe you have an icon in a bunch of different sizes that could be a variant in itself but again the consumption experience would be limited without the thumbnail preview that we can have in the assets panel for icons yeah i can speak a little bit more to this one example here i might take over on screen sure if that's all right great okay so um just following that uh following that that sort of train of thought in that example that we were just looking at let's go back to that make sure we've got some best practices stuff awesome uh so here what i'm getting at is that this may not be a great way to set it up in fact we're starting with the case that if you find yourself going down this road i may i may suggest stop sort of understand what you're doing because there's some some key things that can really help and and some some sort of principles that i've been keeping in the back of my brain as i'm building things if you find yourself beginning to build lots and lots and lots of variants that might be a point to stop and say okay should this be a variant should this just be a component that i swap in and out or is there some sort of nested thing in here that should probably be unrelated to this component so for example i was building a button like this and i all of a sudden found myself adding a version for every single icon and let's say i've got hundreds of icons all of a sudden my button now has hundreds of variants which are the same as my icons but now i've just put them inside my variants it's sort of doubling up on work that we already have techniques on how we can handle that today right so if i was going to actually build this in what i would say would be a more sustainable way what we could do is i'm going to take out these other icon buttons and we know for a fact we just want to have two variants on the button the button is just whether or not it has an icon not which icon it is right so in this case i'm going to actually name these back to instead of icon star i'm just going to call this icon true and this one icon false again sort of what we saw in the in the earlier example you can use variants alongside a lot of our existing techniques that we have and that's a really important thing to remember not everything needs to be a variant not everything needs to be a massive variant if you don't want to combine all of your buttons into some single massive button variant that's okay especially if your developers actually have them as separate components as well right there might be a point where one button is so different from another that they're not necessarily variations of each other but they are actually different things another great example might be something like form fields right if you have select menus input fields all of those types of things all inside one single thing that could be harder to search for in the assets panel if you just find this one thing that's just called form fields um versus maybe breaking it out into smaller groups like maybe you take your multi-line text and your single line text combine those into a component set um maybe you take your different drop-down menus combine those into a component set and then maybe just have those all on a page called forms you now have an asset panel that has a little bit more expressiveness and a little bit easier to use and you didn't have to create that massive variant up front as well along with that you can also continue to use nesting so swapping nested instances is still a great way to compose more complex components and things like that um especially because it's all going to be preserved in overrides now so there's a huge update to how we preserve overrides which i am so thrilled about and i've been waiting for um you can now if we grab a component like this for example um as i mentioned we're going to use these two concepts together so we've got our icons that are not variant components and we have our button that is a variant component if i go to my assets panel now and i want to actually look at these examples i've got my button and i've got my my icons here as well one of the cool things that you can do directly from the assets panel is that if you hold down option while you're dragging out from the library you can replace components but so if i were to grab a component over here and i hold down uh option it's going to swap out the component i don't actually want that i want to be i want to swap just the icon inside of it so if you hold down option and command you'll see that we can actually swap nested instances very quickly as well so this is just a really quick way to swap oops you got to make sure you have it make sure you actually get the selected there we go and you can actually swap those out very quickly and again because we're able to preserve overrides if i switch this uh icon off if i switched to a different uh button type as well so in this case if i uh was doing this on that earlier example that i had because here let's go ahead and just quickly make another version of this we'll give this a fill uh maybe we'll change the stroke here too as well wonderful uh you'll see here that and again i'm gonna have to give this a a name we'll call this add a new variant in here so in this case i'm gonna go back to my component set and also just create another version of this awesome this is why we do office hours we get to do things live i love it so you can see here now those are all under icon i don't want that i want to add a new a new property here called type and i'm going to have these these two are type secondary and these two are type primary and then what i want to do is say that these two are icon true and these two are icon false and that's a quick way to actually quickly update all of your properties as well you'll see now when i select the component set it actually reduced and collapsed all of those duplicates and and put them into the right groupings correctly too as well but again if i come back over here to my component and i select secondary you can see that that replaced instance is still actually getting preserved so that override is actually going to stay there uh as you're as you change those things out um same is true for um if you override things like fills now too as well there's a little bit of complexity with fills you're gonna have to have a structure internally that makes a little bit of sense uh for us to interpret what can actually be swapped out and what can be preserved uh but now you can actually uh there are ways if you have things like icons and you want to swap those for other icons we can preserve the fill layers i did not set up that one correctly so that is a bad example that must have happened when i copied it over we'll be sure to share an example of how that works uh expectedly but if you do find yourself in that situation there's a good chance that if i look at these um components they actually don't share the exact same structure and i can i can see that um here that i've got one's basically a nested union with a couple of shapes inside of it and one's um got a frame inside of it so you want to make sure that there's a consistent structure to to things that you want to actually preserve those properties for um and we're going to be doing some more announcements about all that stuff too as well so you're going to see some new updates and some tweets from the team around that anthony just want to flick to the emoji values one then i can close up with the community spotlight yeah definitely um let's go ahead and uh i just wanted to show off a couple couple of fun things uh that we have here um you can do some pretty fun things too as well um i don't know if i'd recommend this for production but we are in a time of exploration and we want to learn from everyone and want everyone to take what we've tried to show here today so um we've been trying out some fun things with the uh with the values panel here so you can see here we're using emojis and glyphs in the panel to actually set values again i do not recommend this for production because no developer is going to want to see a value that looks like that so just keep in mind that if you are working with your development teams these things are just sort of fun examples that we have uh you can see here but we've also got another great example with stars um that louis put together so if you go ahead and you grab your stars you can go ahead and use this for things like ratings this one's a much better example and something that that development team might actually find a lot of value in um i could also just as easily set these slider values to something that that makes a bunch of sense right so instead of instead of showing something slowly like that you might actually have these just as values of uh you know 0 20 50 or 25 50 75 so whatever is going to make sense for you for how your team works together but know that you can experiment with those things and as you might already be familiar with we are very strong proponents of using emojis in layer names and file names and things like that you can communicate a lot of information in a very small amount of space if you want to find examples where that might work for your team i think that's a good thing to explore just keep in mind that for most developers if that is going into code it may not make the most sense for them and using plain plain words is probably the best approach so awesome great okay i'm going to share again and just before we have a q a i'm trying to highlight a few things from the community that have already been shipped with the variance feature in mind we've got alexa's excellent material icons kit definitely going to check that if you're using material icons in your designs really well put together and using our variants another one is sir guys table ui design system i know a lot of people struggle with tables and how to build them in design tools this is another really useful resource and this is going to be supercharged again once we release the next version of auto layout lastly our boy tom has done an excellent stickies file in the community there's tons of excellent resources in here using really good nested components and there's also a very fun part of that where he uses his own face about 10 times to highlight avatars i'd definitely go and check it out if i was you all right so we've got well we have four minutes left of the hour but we have plenty of time let's go ahead and have some questions it'll be useful if the da's could jump back in as well and we can all say hello awesome job louis i think that was uh that was like i learned so much on that and i've been playing around with this teacher for a while so thank you for for sharing everything um and also thanks everyone for asking so many questions i've been collecting them all over here and we'll go through and ask a couple um so something that came up uh pretty often was uh really the kind of the the practice around creating like a base or a structural component and what you would recommend for uh kind of the the new way of experience if you'd be able to talk to that a little bit more yeah i'm more than happy to speak to that one and for anyone who's seen the best practice guide we do touch on this a little bit in there too as well um i'll go ahead and share here so we actually have an example uh set up here where we actually are using a base component so again this is getting back to that conversation around variance not everything needs to be a variant you don't need to run off and convert your entire design system into variants variants is another tool in your tool belt that can work alongside a lot of the existing techniques that we have like nesting instances or creating which a version of nesting instances is what we call base components or structure components right so these are the idea that if you have an underlying component that these are all based on instances of that underlying component changes to the underlying component will affect all of the instances that are using that in this case our structure component actually has all of the pieces that are necessary to build any one of these variants and then we are simply setting overrides inside the component sets to actually adjust those as well so what this gives us is the ability to actually make changes at scale um and and again a technique that that you might already be using today in your design system so when you go to create your variant components just keep in mind that you don't actually need to include your base or your structure components as part of your variant um another little technique that we're using is that we've got that period at the beginning of the of the component name or you can also use an underscore this will actually hide this from your design system when you go or from your team library when you go to publish it so you can actually have components that are basically just internal to the design system they help you build out your design system but they're not components that you expect people to use or or actually uh go grab so here is an example where we're using all three of these techniques at once right so we're nesting icons inside of our base component and then our variations here are are basically what we've done is that we've actually just turned off different parts of these uh of the space components so if you come in select something like the disclosure carrot if i hit delete it's just going to hide it because it's an instance won't actually remove it and now we actually have something that looks a little bit different so you can see here that that's a quick way to use base components um you can take this a step further too if you wanted to you can actually then have a base that's actually defined for an entire dimension so let's say in this case we know we've got our base component that both of these are based on i could have gone a step further and said okay i want to have now i want to customize a base that's just for this first set and now i want to customize the base that's just for this first set and it's this big cascade where this base controls these two and then these two each individually control a dimension this is doable it's just again with very powerful tools you just want to make sure that you're being diligent about it um the [Music] as you do more and more nesting you know we see this happen a lot in um programming languages too in particular where people get we get really excited about something because we really want to do it we over nest things and we overdo it and then before we know it um it is so complicated that not only is it difficult for somebody else to understand how to use it but us six months from now we try to come back to it and we don't know how to use it either right so there's a level of balance between um being really clever and having something that's more verbose but but easier to to use and come back to and and striking that balance again it's really a conversation with your team and understanding what's going to make sense uh as you're working through it as well yeah just to back up on that point anthony of i spoken a lot about this and we both agree that if you get to a situation where you do want to have these two buttons managed from two separate stretch components just think about whether that would deserve being split up into two variant sets it makes sense because you've got these two contrasting opinions how about how something should be structured and that goes for all of your design work so ultimately it's a design decision in air quotes and you as your team can make that call our best practice advice really would be to split things up when they start to diverge it's helpful yeah just plain like working with your team we'll come in here so i appreciate you uh explaining that and i hope that answered the question um this is a quick one but definitely an important one um if you would be able to talk about just kind of how you reset variants and which properties you can reset and how that function works yeah uh lou do you wanna take that one or got it open you wanna jump in uh yeah sure great there we go awesome so if you're working with your variant components and you go to grab a variant that's been set um because we have not so so resetting components is going to be a resetting variance is going to be a little bit different than resetting overrides so you can still set overrides on um on these components so i'm actually going to simplify go back to a simpler example that we have that's not using nested instances for this let's go back to this example here so you'll see here if i grab a version an instance of this component and let's say we go ahead and we actually just change something like the background color or anything like that we have actually uh changed in override now right so we've actually adjusted an override this would be much like if you change an override on on any component whether that's a component set full of variance or just a single component you're going to see here in this menu so we we've moved the icon here has changed it's now uh just a little ellipses for the menu and you'll see here that we do get um the reset overrides menu so you are going to be able to reset fills reset all or whatever you've changed you're going to see a list of those properties or you can just reset them all at once if you need to get back to the um to a different variant that's a little more interesting in the sense that we don't necessarily consider one variant an override of another variant so in that case switching back to them or or back to a previous version you can either adjust the properties individually or you can always just go back to the assets panel and grab a new copy of your um of your variant as well um that's a that's a quick way to sort of get back to the original uh version of your variant other otherwise you'd just be setting it back like this as well but again they aren't necessarily considered overrides of each other they're just different dimensions of the component as well so unless that's a slight different mental model slightly different mental model for how you consuming components but the the resetting mindset is is slightly different in this context it's really helpful yeah and again you can continue to use overrides on your variants as well right that's a really important technique too as well not every override needs to be set up as a variant option if you want to continue to use overrides as you're using them today meaning that we know in some cases we're going to have a one-off color for a button you don't need to add that as a variant you can just go ahead and set the override and now it's almost like you're working within the component as you would have before so so i said one of my favorite features was the uh the boolean values and the ability to have a toggle in the variant and we had a question or actually a couple of questions uh just regretting if we could see that maybe time and to cover exactly what the values were i think it'd be helpful uh just kind of make that clear as it's as it is really a pretty cool yeah definitely uh do you want me do you want to take better or should i yeah sure let me just swap over all right so let's go in here and let's say we've got a situation where we want to have let's just say use that very simple border example again so i'm going to create a frame and i'm going to create a copy of this one and then stick a border in here at the bottom again and let's say instead of this red i'm going to make it a wonderful yellow and i'm going to copy this and let's just say i have it in here but i'm going to switch it off just so we have to maintain that consistent structure i'm going to rename these to be ordered thing and then this one's going to have on this one's going to have off i then want to turn these into components combine them as variants and this because we have our off and on automatically brought in let's just say we want to change this to the status of that but of that button or that border thing oops and then select my component drag that out and we get our toggle in here i can then come back and change that whether i want that to be false and true we get the same treatment as well i probably want true to be at the front so i can just drag that to be like so and then it's still reflected within our component down at the bottom and how that works yeah and and that will work for again true false yes no and on and off and this is you might see where we were heading with this and some of the ideas that the team is thinking about is you know how can this be even more expressive right what if there are other types of things than just booleans that might make sense for doing this um there's there's certainly some great discussions going on with the team um i don't want to uh share too much just yet but um just know that that's a that's an area that the team is certainly interested in and how can we make those menus uh more interesting for for um a designer who goes to use that component right because again there's a lot of complex there's not a lot of complexity but there's some complexity in in doing this setup right you certainly have to be someone who knows how the components work how they're organized how they're structured uh and you have to set up these things like values and properties keep in mind when a designer goes to use that they just have that wonderful simple menu experience of these are the options that you can select from so they don't necessarily need to have that same level of understanding or complexity to use the components yeah absolutely and once again the next question i'm just going to show there's these three options here i would then set these up um as having a right or left icon according to what i wanted to do just like you'd do with the layer naming hiding that anthony was showing before yeah i so uh just really excited by this like we have so much enthusiasm and so many questions so we are going to stay on for about another 20 minutes or so so feel free if you do have more questions to pop those in um it's awesome to see all of these come in and we just want to make sure it's useful to everyone so um this is a little bit broader for a question but i would like to ask it just because i think it can be a kind of a big helpful takeaway but um really the question is like when and how should i decide to use variance um like what what really is like the main characteristic of some of the elements that make me decide you know what i should i should go to variance for this or um anthony's you're talking maybe i should just you know kind of keep these in components and use instant swapping and i think if we could just maybe um touch on that that mindset that framework a little bit it could be helpful yeah abs absolutely um well i'll say a few things and um so i try to to keep a few key thoughts in mind as i'm going through this and you'll actually find this in the best practice guide it's actually on the first page um or sorry on the second page of the best practice guide under using variants effectively the three main things that i that i look for are are there properties here that are going to be um that that i'm going to actually be able to take advantage of this in the sense that that um they are actually related to each other and again that can be a very difficult thing to understand up front but there are some concrete examples of this something like state if you know it's the same component and it's passing between different states that's a great example of when to use this um another example would be again something like size size is another great example of where you may have the same thing at different sizes so if you can construct a sentence as you're talking to yourself and say this is the same as this it's just that x property is different you know this one thing is different that's probably a good candidate for doing it another reason would be is the assets panel right so if you combine everything into a single variant that one variant is going to appear in the assets panel which is a huge benefit if your assets panel has been a bit cluttered from having all of your different variants in there as well so if you look through your assets panel today just look just go go into your design system as it is today go to your assets panel and say what about this is the most cluttered piece to me right like i don't need to see this this and this i just need to see this that's a great example to say oh okay so those are probably good candidates for variants and then the final one is that again if you're working with a development team talk with them see how they've structured things i mean this is a i oftentimes you know i'll go in and i'll go where do i put these components what is the folder for this what do i want to name this thing and all i have to do is ask the development team like well how did how did you guys organize that and then um you can come back and uh um be like oh yeah that's a great place to put that and then again more of that shared language with your development team uh yeah i see that message in the in the in the chat there around ben methodologies you can use that as well too right so if you already talk with your development team if you're not familiar with what bem is it's a naming convention for how you can structure classes in css as well as components it's sort of blown up to become a more generalized idea of naming they may have some great tips and techniques on on how you could identify what is actually a variant versus what is um something that is uniquely different and again if you do it and you're not happy with it you can certainly go in and change it too as well or you can revert or you can go back um definitely play with it and try it out and experiment i think that that's that's probably a good a good thing so yeah the way i look at it as well is when i've typically built out libraries and if i have to group things with frames i know they're a consistent set of objects and they're usually related that have a really minor difference in the properties that would make a really good case for a variant things like menus you can have a mobile menu and a desktop menu that could be a variant things like forms a really good case study tables anything like a content row they're all really good examples of very very similar things you typically find creating 10 versions of finding the assets panel and thinking i don't know which one appropriate for this use case and set them up as a variant and it should make that consumption experience really smooth that's awesome louie anthony thanks for the answer um so we have a really good question that came in well these are all really good questions but we have a an awesome question from andrea who uh shared that she's a product designer for an app and uh as you'd imagine she currently has separate components uh component libraries for both uh the ios and android version of components um it's pretty challenging of course as you could also imagine to kind of keep those in sync and up to date and she's wondering if variants could be a way to get around this or if we have any general best practices around that topic this is a tricky one great question yeah um so what we didn't talk about were were examples that you might want to avoid right like if there are if there are places where you may say that this might actually be more troubling uh or longer term maintenance than it should be um the one example so the ios and the android one in particular so like let's call that something like device specific uh variations um i think you probably want to ask yourself a few important questions meaning like if they're in different libraries there's probably a good reason for that to begin with which is that you're only enabling certain libraries on certain files or with certain teams or certain projects right so if you combine those into one you're now dealing with a library that's twice the size and you might have actually reduced the discoverability of those other versions and those other variants as well meaning that if you go down that right and you collapse them you have to now choose which is the which is going to be the primary one that shows up in the assets panel which may not be the best experience if i work on the android team and every time i go to look for my component i'm seeing all of my ios components first you could mitigate this with a sticker sheet that you use but again that's a different workflow it might be challenging if that wasn't how your team was used to doing it already um so i would uh probably say that that's gonna be a challenging example to to try and do it for again i don't wanna say that you know we're all designers and we're capable of making great design decisions ourselves too so if it works for your team certainly try it out practice and communicate with them it is a it is an example of one that i would avoid um and the same goes for things like um this is the big one which i think is like colors and themes it can be challenging and tricky to do it well and um a couple of just quick notes on that one which is that variance seems like a fantastic use case for something like colors or or something like like themes or branding or anything like that what you'll discover and again if you want to please please go and try it it is possible to do it in the system and if you've got a small enough system and it makes sense and it works for you then that's fantastic but what you'll discover is as you're building more and more components you're now repeating those variants as and they're uniquely separate between the component sets but every single one of them is now maintaining those themes individually as well meaning that when you go to create another component you have to go and add all those themes in or worse when you go to add a new theme you know i have to go to every single one of your components and actually add those back in again might be maintainable if you have a small enough system but with a huge system uh that's a lot of refactoring and a lot of work to add all of those back in and you know this is starting to get into a realm where this is a great spot for discussion and if anyone gets into friends of figma slack we're actually having this conversation uh here and there around what is it about themes and colors that's different than components right you know we have this concept called styles there's clearly something unique there and something that we want to uh take advantage of and are there ways that we can be doing that in the future so so that's the that's the cutting edge of the frontier for our conversation and definitely come join us on the slack channel as we're talking about that kind of stuff as well so uh louie and anthony i've got another question for you and it seems to keep coming up and so i'd love to hear what you have to say uh essentially if you update you've got an existing team library and you update all of these components to be a component set now with variants what's the process there like when you push that team library update is it going to break all the connections and can we talk about that a little bit short answer is no it will it will know that it's still referencing that original instance so you shouldn't be too worried about having lots of broken components around your design libraries the the variant's smart enough to know that what you're referencing is still the original parent and you should be fine and dandy so when you pull in your when you when you go and you click the update live update all components button on your library file your component your instance when you go and select it you'll notice that it's now a variant component with all of the right properties already set on it automatically it's it's amazing just worth adding to that answer just as a as an underscore make if you want that to happen make sure you're combining the variance and not taking like one button and then creating new ones because those will have no relationship to what used to be the separate components that are connected to those instances awesome i've got one uh that just came in that i can ask real quick um i'm not sure if there's an answer to the center if we know but uh just ask um is it possible to access variants yet with the plugin api oh great question um so there is a new push that just went out uh to the component uh to the plug-in apis to for support for um variants it was actually a necessary push that we had to push out there as well too so um you'll see that there's two new properties i believe uh i'm gonna get the names wrong here but i believe one is uh component set um and you'll you'll be able to basically access those those properties as well so um this is both a uh to prevent any regressions in the system but also give you access to those new things as well so here's a question that i think about a lot and i'm curious of both of your takes as well the question was around do you recommend setting the sizes of components as variants or having the user change it manually kind of an interesting use case oh yeah yeah that's a good question i would i guess the way that i would prescribe that would be what is the intention of you know who is making the call on what needs to change the size so a good example might be something like iconography right iconography has very generally has very specific sizes for very specific reasons right you're working with very grids that are incredibly um organized you're working with base units that are probably multiples that work across all of your iconography sizes you may even have your icons actually be changing properties about them the way that they look the complexity of the icon may adjust as the icon gets bigger i think that's a great example of where the designer would define those sizes as variants when you start getting into things that are more like how big should this modal be how long should this model be if i'm adding more text all that kind of stuff i think that's a great example of where you can use things like constraints and auto layout to allow them to have a bit of flexibility and that's not necessarily something you have to build into the variants themselves i will let anyone else on the team add to that too as well if they've got ideas yeah i was just thinking that the more we go down the rabbit hole of sort of customization on the front end of your design in the canvas the further we get away from consistency and the building process becomes harder to maintain so if you are if you do want to allow that flexibility within your components and your variants just make sure you're documenting things appropriately alongside the components or in your design system wherever you're documenting your components and real quick um kevin had just asked if there was a way to hide properties in a variant let's say a component didn't need to select one or address one is there a way to do that now so uh there isn't a way to hide them right now but you can give them values that will cause them to adjust automatically meaning that if you have a particular button that let's say does not have an icon um but all of the other ones do support that variation you just create create two variants that also um you don't even have to create a second variant for it basically what will happen is that it will turn it off automatically for you you won't be able to hide it but you can have those properties adjust when another property changes and there isn't a relevant variant that that's going to make sense for that as well which actually puts the power kind of in the hands of the design systems manager because if you're building out this consistent system across the team and you definitely don't want that icon to be on that button it won't be and it means that as i said before that consistency going out across the team is going to be maintained that is a great question though because the idea of having like almost like a faceted menu whereby select your first property that you select impacts the options that you're handed next um it's a really cool concept and you know definitely something the team team has looked at before so um anthony i was wondering if you would be able to i know you addressed this in the best practices guide but maybe if you're able to just speak really high level about um uh why it might might not be beneficial to use variants for all of your icons uh and instead kind of revert back to the old way and i'm i'm curious just to get your thoughts on here if it's okay yeah it comes down to a couple uh simple things so if we i'm gonna go back to this example just because i have some icons that are right here um so if i i could what you know if i wanted to i could take all of these icons and i could convert and let's just pretend that this is a smaller set but represents hundreds of icons i could combine all of these variants right now and i could say they have one property and the property is icon right it's which icon it is and you can go ahead and you can grab it and i can switch between them we've this is totally doable but i find icons to be a very specific example where this kind of packaging up may not actually be the best way to use it in the way that people are using icons because you'll notice a couple of things that we've actually lost here one is that if i go to my assets panel now and i want to look for an icon the only thing i'm going to find on this page is a single icon called icon that's uh just not not as useful as a searching mechanism imagine if i had tagged each of my icons individually with use cases or additional subsets of how i might want to search for them a lot of that data isn't going to be accessible here and so now i just have icon the other big one is that we pushed a huge awesome change to the uh instant swapping menu so that you'll see here that if i wanted to actually swap out an instance of an icon so i'm gonna grab grab this without variants if i'm just swapping an additional icon you'll see here i get awesome thumbnails of these i can have these organized into different sets so this is um there's just a couple practical approaches uh reasons as to why i wouldn't want to do it the third one being when swapping icons uh some people today really enjoy being able to just go to their assets panel you can hit option two to get there really fast and then you can just search for your icon that you want to find and then once you find it you can just do that command option drag to swap things out so that kind of process would change instead of doing that you'd go to the icon here and you'd choose it from a list again you wouldn't have thumbnails and so it's just it's possibly just one use case where it's the traditional approach of nesting instances is a great example of using those in tandem together right so basically instead what i would do is i would uh basically get my component like this and then i can swap out the instances that i need if your icons are only a handful or very specific to the exact variant then that might be a good example of why you would want to have it as a variant right something like a drop down carrot if i knew for a fact that i was only going to have a carrot on the right-hand side and it was never going to be icons i could see that being a valid use case to do it but for the most part i would keep them more expressive because remember you don't necessarily know every single place or or maybe you'll be good to explore every single place where your icons are getting used what if the brand team needs them are they going to know how to use this so what if the you know like how how often are they getting updated um as louis mentioned earlier though there is a good use case that that might make sense which is that you if you have the same icon at multiple different sizes um or let's say see and these are locked at their particular size which is good so somebody who's doing their homework they created these um i'm just gonna i'm just gonna hack this for a second so we can actually take a look at it there we go cool so like let's assume i had two icons at different sizes i could group these into a component set and um that might make actually a lot of sense because now i'm still going to have that one lock icon as an option in my uh in my assets panel and when i go to select it i'll be able to choose size and size from you know large or smaller anything like that as well another example might be something like filled or outlined or or anything that you might use it for those you can combine those into smaller sets of variants but um that's generally my reasoning for not wanting to do that so that's a really good example like just sharing like combining or creating variants from a single icon that way you can still select it and select the size i like that a lot um speaking of uh we we kind of touched on overrides briefly but if we could just address uh kind of text overrides and and how that works or what to expect i think that'd be helpful for a lot of folks i can jump in as well because i answered a few of these questions and anthony or louis if you have any more things that you want to demo or whatever i know one of the biggest questions has been around preserving the text content when you're switching between variants so we turned on the feature we had a very strict matching that was basically the text within those text boxes much match must match so for example if they were both named and the text content said label in both of your primary and secondary buttons and you switched between them it should maintain the text but sometimes people are writing the label as primary and the label is secondary and because that text doesn't match the overrides were getting lost we relaxed that rule and we shipped a hotfix late last night that basically means says that the layers must have the same name but they don't have to share the same content so as long as they're both named label but the content is whatever you want it to be um you should have no issues swapping between those and the text being preserved feel free to add anything on to that anthony or louie or rogie or joey i think that's coveted cool and also may may also be worth just addressing this one head-on i know it came up a couple times with things like icon colors and stuff there are some um heuristics around how overrides get preserved when it comes to like overriding a nested icon within a variant that then gets like an icon replaced and the color sometimes gets lost there is some work that the team is still doing on that one it's a it's a tricky one because sometimes slightly different rules apply and how we apply overrides is a little bit different in this case so i can't i won't go into all the details because it's like a really complicated thing to try to like articulate through words without a visual but um it's something that the team is definitely aware of and continuing to to work on so um thanks for all the questions that came in about that i see a couple a couple good ones coming up right now too just to get to so um there's one question just around when you start combining things into component sets naming conventions might start to look a little funny especially if you've been using frame names and page names and things like that as well a good example would be um and i'm just going to share here again just so that we've got this uh so if i have a new component that i've created uh something like uh what used to be three components and they were all living on a frame previously you know there's a good chance now that i'm gonna have a little bit of redundancy in my naming convention because maybe my single component now lives on a frame and it's just called like you know navbar or tab or something like that so now now i've got tab tab and there's no other components that live in this frame along with it so you've got a few options here one is you can remove these frames entirely because you may not need them anymore alternatively you could actually place it behind it so if you still want to have some sort of visual separation uh you can put a shape behind things if you drag it out of the frame you can drag and if you hold down space it basically is now living on top of it and you can lock that back frame again this is more of an advanced sort of cosmetic approach if you're creating something that you really just want to have a nice visual structure and style to it personally i think it's fine to just not have them at all i mean i it's gonna see a lot of updates to some of the design systems in the community where uh those frames may not be needed for some of these situations anymore you can still use them though right so let's say for example this may just have a new thing where i've actually just moved a few to the same page now because maybe i took all of my inputs that used to be on separate pages i've combined them simplified them and now i just have a set of maybe five or six component sets so i just want to put them into something called forms i could go ahead and add that in as well if you check out the best practice guide on the third page on library organization i talk about each of those examples individually so when you would want to rename layers frames and pages as well too so it's also just worth free resaying that you can style that variance set too so you could add that white background to the variant set to remove the border if you want to style it up to according to your design system yeah uh there was another question i saw come in just around how did i do the descriptions on the components uh so that is just using the component description field so if we come back to let's just grab one of our examples here when you select a component and remember it has to be the main component it can't be an instance so if you select a main component in this case a variant inside of our component set you'll see that there's a description field immediately below that so if you're setting the properties you can do those here here's where you can add the description for that one variant if you want to set a description for the entire component set all you have to do is select the component set and that description will be above the variance as you can see up here uh on that and again both of those descriptions will show up when you're in the inspect panel uh the component set description will also show up in the assets panel but you won't see the variant ones since we don't show the variance over here um but if you go to the inspect panel you'll be able to see both the um the component description and the uh and the variant description as well so okay i think we've got one more minute so let's just go with uh a last question before we wrap up and i've i've actually got one thing that i just want to make sure that i touch on because i promised a few people uh that i would which is um uh for i don't want to spend too much time on this because it is a bit of an anti-pattern and it's not something that i want to recommend but i do just want to call it out because you may logically arrive at this idea and um i just want to say hold off on it for right now but what it is is as you're going through and building your components you're creating these multi-dimensions right for all your different variants and how you want to organize them there is a shortcut that you could take where what you do is that instead of defining everything you just divide in one example of the permutation and you're net constantly nesting them inside of each other as well so uh for example and and i'm again i'm not going to build this out because i don't want that that evidence to live out in the world i don't want to be quoted as doing this as an example but for let's say instead of having all of these labels or buttons i i might say to myself hey wait a minute these are all basically the same change right here what if i just had one set that was just the state and i want to pull out just the state and then i have one set that's just the icon and the type and so you end up with something that kind of looks like this and you're like cool i don't actually need those i know that those are going to be generated and what you do is you nest these you create this as a component set and you uh and you do it and then you're like you create this as a component set and you're like nesting them inside of each other and you're like oh i'm saving so much time this is so great i'm not defining all these permutations um i would definitely avoid this for a couple of different reasons one is that it is going to be a headache to maintain nesting all these properties inside of each other now this is very different than something like nesting an icon or something that's completely different i'm talking about taking the all of the properties and trying to separate them out from the button one by one to try and like save yourself some time as a developer where this is going to be really challenging and really annoying is for anyone trying to use this component they're going to have to double click each time they want to edit a new property inside of the next thing the team is is exploring ways that we might potentially look at this in the future but there's a few other key downsides is one is going to be less flexible too so all of your variations must share the exact same change meaning that let's say your hover states are not just an increase in a particular hue or something like that but they're actually very different and you want to actually change to wildly different colors or anything like that you're not going to have that same flexibility that you do with the permutations as well so um i would say just for the meantime while it might look enticing and again this is again something very advanced and and probably a few designers may stumble upon this as well um we are laying a lot of groundwork for for maybe exploring these ideas in the future as well but just keep in mind that for right now it'll be a bit of a challenging experience there's a note about this in the best practice guide too in case you uh start to explore that as well again i'm a huge fan of clever is not always better so sometimes being a little bit more verbose being able to see those permutations will make your life a lot easier in the long run especially when you have to return to this work in six months and try to remember what you did so uh just a quick quick note there because i told those i promised that too great i think we're going to wrap it up there everybody thank you so much for attending anthony thank you so much for being my buddy on this stream joey the questions were amazing tom roger thank you for chipping in as well thank you from the design advocates thank you from figma and we'll see you all next time we have another stream on wednesday november 11th make sure you come and check it out thanks for attending and have a good weekend thank you all so much one last little note before everyone drops off for anyone who isn't in our friends of figma slack channel i know we didn't get to everyone's question we'd love to continue the conversation there i'm going to put a link in the chat for anyone who wants to join the community there and again uh thank you for attending today thanks everyone hi everyone

Channel: Figma

Views: 41,663

Rating: 4.9270072 out of 5

Keywords: figma, figma design, product design, design systems, ui, uix, ui/ux, user interface design, interface design, livestream, design tool, ux design, collaborations, in the file, office hours, get started, getting started, variants, figma variants, figma states, variant states, properties, components, component sets, variant components

Id: mLSFG1IiZZU

Length: 83min 54sec (5034 seconds)

Published: Mon Nov 02 2020