Figma: using Variants!

1. Introduction: Hey, we're going to be superfast tutorial where we are going to talk about fema baryons. It says super cool feature that will enable you to distribute better your components as well. In this tutorial, we will talk how to create components in different ways. We two approaches. One is going to be the independent components abroad and the other one is going to be all the components are going to be created, to be created from a master components. So all the components are dependent from only one. So later on you can make changes faster. This is a tutorial for everyone, even if you are new to sigma, maybe it's a good abroad is how to make components. And as well you will learn the baryons kind of grouping. And if you already know how to play combines air or you are working in, the same system is going to be good for you because maybe you learn a couple of tricks about creating components satellite that in as well you will learn how to improve all your workflow with baryons. Okay, so baryons to, just to show you a little bit how, how they work. Baryons, what we'll do is imagine, I have this design system here and create it. And you usually have the, this must most row set of components created with this naming and everything. And when you come to assets, if you want to search for your button, you get kind of crazy about all these elements and buttons you have here, all, all the components. It's kind of messy to search for a component, okay. But I have these other sample, which is the same buttons components we had before with this kind of baryons that we can see here on the right with the variants created. So instead of having a lot of components, if we come here to the asset spinal, now, we only have a button instead of having a lot of them. So I'm just going to collapse this instead of having all these components, which is kind of annoying to search and do move around. We only have a button, just one button. And here we can change their properties to get, to get and use all of these elements that we have there. So this is a super-fast way of working with, as you can see, is a super VC work way of working with we've icons. So on just going to go to the primary one. And if you are interested, can learn about how to create components in an efficient way and how to use these new Marianne fitter, just GME and into these short class is going to take like a 30 minutes, 35 minutes to learn everything. So join me to these scores and think before doing it. 2. Variants with an existing Design System: Hey, thank you for joining me for this first lesson. So let's get started. There are two options while working with baryons. The first one is if you have like an existing UI key door design system, imagine you are working for an enterprise or company and they have like a, a design system. And you are now working with the design system and you want to improve it. So one of the things you can do to improve it right now and easier than ever is the AST implement variant in your components, okay? Okay. So I have here a, a design system might have created. And let's see a little bit distracter. So I haven't created yet the small version of these buttons, but it's something I'm planning to do. Let's say I want to make a small version of the vitamins as well. That will be 32 pixels, okay? But I have this outbreak, the death, okay? So we have some, lets call it types of buttons. One of width text, another one with icons to the left and to the right. One icon to the left and one icon to the right. And then only i goes, Okay, so we are now going to enter in how I did this because later on we will see how to make all these bottles from scratch quite fast using them, using the master method. Okay? So it does not important right now. But what I want you to see is the structure of this, okay? So if we see these buttons here, the large text and then the primary critic goal with all these states about default, Hulbert bleak, whatever. I want to see you this structure here. So for instance, for this one, I have like button, which is, this last is quite important as you may know. It what it does is it creates like folders, okay? In components. So if I put button is last large, slash, all the, all the buttons that shared that bar, they are going to be on the same folder. So that's quite important. So we have the name of the component, this iss, then we have the type of button we are using, then that would be another kind of type of button, right? The primary, critical, secondary borderless, That would be another kind of type. And then the default and the default or hover clip, which could be a state's. Okay, so we're going to see how easy is to enter. Something important about this is if we come here to the, to the components inspector, we can see that we have all these GYN of all massive amount of buttons here. And if I want to choose one of them is kind of messy. You know, not messy, but how to say it. It's kind of hard to find where I want, even if I search in, if I put primary, a lot of buttons are going to come up here and I have to be 13. This is the, this is the default state of this is the Hubbard. You know, it's kind of kind of hard, so bargains is coming for help. So what, what are we willing to do if we select some components? Here on the right Bono we have baryons. We yes, could combine them. Yes, right now. Okay. But I want to select all my buttons. Remember, just clicked sift and then select with drug. All your buttons. So we're going to click on combined as variants, ECS, that piece of cake. So if you see all our buttons here, somehow have these appear on the login components, and now we only have a button, as you can see. So this is a major thing. So we no longer have 143 Leon, millions of buttons, we only have one. And this is brilliant. I mean, what happens if we bring this button up here that now we have these properties here. As you can see, icon, icon, Left, Icon F, Right, icon right. So baryons detect the instructor we had previously on our design system with, with that naming convention we had before. And let's go through it two layers. And we can see here that it's like taking the name we had before. But instead of Islam says, what baryons does is put like commas to separate these properties. Ok? Something that you can do to improve even more this automatic magic thing, its, you select these Barb bold boarder that baryons create here. And then you can control the name of the properties and then arrange the icon, the order that you want the property sloppy here. So here for the first property, we are going to name it size. For the second, I'm going to name it type for the third one, that's wealth. Let's go with this, with this state. It's again of a state and that clique, etcetera. So we are going to start to re-order here first the default, then the hover state. So I want them to appear in that order when, when we are selecting our bottom here. What I want, it's that, you know, that these appeared before Hulbert clique and disable this is cool. And then the primary, it's appearing here on third place. I don't want that. I want primary, secondary then critic Gao them borderless. So I'm going to select the here, the, the, all the barrier and component that big baryon. And then I'm going to rearrange this to primary, then secondary, then critical, and then borderless Tj i1. These order to appear, ok, so this is the state, this is the type I don't know, item convinced about it. Maybe I bought icon, text or text icon. So it's kind of more semantic. And then ds, this is, I'm going to call it type. Okay? So if we go now to our bottom, to our instance of these marvelous button, we see we only have large. Remember I wanted to create a small version of it, but maybe other day. But if you have created or you have previously created a small version and you name it correctly, then in size it will appear larger, small, regular, vanilla or all. Ok. So now I can change the icon right now. And this is marvellous icon. I no longer has to go, have to go like back and forth, going, changing here, you know, we'd was kind of annoying, kind of slow. It was no bad, but this is much better. So now we have all our components in these muddy goal sidebar box here. And we can change from one to another, changed the estate and only go here. And he's going to change from microphone respecting the estate. So it's it's I mean, I'm amazed about how baryons performed. So if you have a design system migrating from your previous components, two variants, it's easy as this, so it's super easy, okay. 3. Creating components from scratch with Variants: So now let's go to the second version. Ok, we have done this. And what about if you want to start from scratch, you will have any design system you are working in a new project. You are going to start to create your components from scratch. And you want to get the benefits are of using baryons. Okay, so let's go here and let's go to our tutorial. Alright, so for this case, I'm going to start by Design and amp, bottom super straight one. I'm just going to go here with a height of 40. I'm going to change the color to a kind of blue is one as we have previous in the other, in the other section, satellite, this kind of shiny. I'm going to add the border-radius of four. Well, yeah, I'm going to make it with a rate of border-radius four. I'm going to add some text to this case. I'm going to call it button. If you are super proficient with we have fema, maybe you can skip this part. But if you are not so sure how to create components, I think is a nice thing to watch. Because I'm going to show you how to create components in, in two different ways. One, likey independently have these, something like this. So some hunting around here. For granted components that are two main waves of doing things. So you create all components depending from one master. So you create one master. And then that master is going to be like nested component of the other components, like a matryoshka, you know? The other way of doing components is yes, make them independently. Every component, it's independent from the others. So they are, they are okay. But if you want to change the border radius to all of them, you have to be warm b1 by one changing the border-radius. While these methods, these fairs method, you only have to change their master and that changes will replicate through all your components. Both of their creating systems have their benefits on there. There are pros and cons, you know, but from my experience, I think are really can wreak. I recommend to use the master component version of it, okay, so we are going to try both, both systems and you can choose wherever you want, okay? So we are going to start by creating the adding dependent ones, okay? And then we will make a master of one of these components. And then we are going to replicate these muster and use it as our muscle component and then create the other components based on I-T. Okay, so let's see in practice is easier Dynasty. So I'm just going to ring here. Like an icon, just a simple icon to put my two icons here is going to be on a Chevron down. Oop. Sorry, yeah. This is gone. Is going to make it. And in order to, to later on can change this, I'm going to, to use this. I'm just going to create another are afraid like this. And I'm going to name these icon. Remember that than sigma. The framing is important because Let's put some random icons here so we can see the nutshell at the name of the, of the AIR Bohr is important why nucleating components? Because later on when we come here to assets, the firstName is going to be at the bottom and radio button, it's beginning to from their frame. Okay. So if I change this is if I would change this to another name, you'll change here. So but we want to be the same as, as the element we have inside. Ok, so for this, I'm just going to create a component here. So I guess for us here. And we can see that now we have hearing variance, variance tutorial. We have the several Down icon, okay? And I'm going to add another icon here from, from the same from further icons. Pretty straightforward. And I'm, I'm going just to boot like an arrow. And yeah, maybe any full. So let's create multiple components. Remember, if you select some, some objects, you can create multiple components of it. So I'm just going to get on base here. So we seen the frame n, I'm just going to align this little bit. So we set it to be. Did. So unless yes, distributed is one. So we have three icons pre-built to all. I'm not going to mess around with the colors and all that stuff. If you are interested in creative design systems, I have a tutorial quite extensive about how to create your first design system. So you can combine that with this, with these Tutorial one c. And because this is for, when you have created all your design system, you come here and then you create your variants off all the components degree before. Okay? So now what I want is yes to implement a couple of icons here. Just drag and drop them and change the color to white. So it's MCI matches. These are gone, are a little bit too big for my tastes, so I'm going to scale them down to 36. Well, if I can. Okay, 36 and them, I'm going to scale them down to 36. So good, so far, so good. So now what I want, it's there is a nice feeder fema has it's called auto-layout. If you don't know about it, I recommend as well to see, although tutorial a half, sorry for all the spam bot. I'll do Iout is a super nice fitter. What it does, it takes your elements and, and creates distributions and alignments. And it allows you to create like these kind of responsive, responsive to the content, like components. Okay, so for this, I'm going to create an auto-layout with these three elements. I just selected them. And you can click here and then create auto-layout, okay, or you select the elements and then auto-layout appears and you press plus, sorry, I usually use the, the common, the key, the key shortcut, the keyboard shortcuts. So the shortcut is common shift a or if you are in BC, it's control shift a real-estate forward. And now I'm going to do kind of the same. I'm going to select this and then select this background. And I'm going to come again here to auto-layout bless plus 4m. And he's going to be like, if you are going, this is amazing. Well, why isn't a working? It's amazing where it works. What's going on here? Ok, I have these fixed item when it fix, remember you can fix the width here, but in this case we want the, we want our bottom free so it increases its size when you write more. Okay, so we have our button, it's Bri is what we wanted. Okay. So well, for DSN going just to go with 16, an onboard here. So we can put here 1212 on like this controls the, this base. These controls a vertical budding. These controls the horizontal budding. And if we double-click on, on, on our frame, which is the icons plus texts, we can control as well. That distance 12 is good for now. And this, and this, we are going to call it bottom. Okay? Imagine we are creating the independent buttons. Okay? Our approach would be to name these live button. Remember this iss, this is large, and then this is a primary button, okay? And then this would be the default state, okay? So we name it like that. And then we come here and we created on bond. Okay, so you want to create another version of it. Remember, the hover state of this element. What I will do is yes, detach this distance. So we, we are not overriding this because remember now here we are working with an Eastern. So what we want is do it, that's it. Then sends a color to something a little bit darker, something around that. Okay? So this would be, instead of default, we change these to harbor and then click and we have another symbol. And the same thing, we detach. And then this is the clique, a state which is a little bit darker skin around that. And then o. And then we change the name to clicked or Octave or whatever you want and aim it. And then again, we did, that's the assistance. And we named these, let's say Disable. Okay. Yeah, previously forward, which says that galore of these blue to something around that. And this is our disabled state, okay? And then we create the component with this, ok. So we have, our bottom is independent. If I change these colors and I decided to go for a rev. Yeah, you can see nothing changes. And if we cook, if we keep on creating by vibrations of the bottom, imagine I did that study systems and imagine we ask one now to create the right version of it with the icon. Then again, I duplicate this, I duplicate this so I don't have to be That's it anymore. I mean, and then I create the color separately. So I come here and then I come here, and then I come here. This is foster dialogue, dan, making you do duplicate the first one when he's not that symbol or a component. And then you change some of the colors and then you create the components from scratch from one shot. So now we select all of them and then create multiple components. Okay, so this is cool because it's fast to create and they are consistent and everything. So we have these variations. Ok, so now these ID then changed. As I forgot to put here the two icons, the left and right icon. So I'm going to use a blue-green core, rename it. So what I want this to Find and Replace select lawyers. This is pretty cool. Lewin. So what I want is when you find large dislodge, What I want is and when you find a large, large, large, large law, I won't do to change it by large. As lash line going to be more accurate. Primary, I wanted to change by, in this case is left, right icon. Okay? And primary. So if we rename it, we see that we have now left rod icon primary, so they're renaming is good. So we are now to rename these layers too, because I forgot to boot. This is kind of icon text type. Okay, so same thing here. What we can do is yes, go to primary. And then IF like, this is going to be like right. Icon. And then primary. And the slash. So we can see now that we have baton large Ri Cai, cone primary default. And now we have to change these names. Here is to make a little bit bigger. This is this NIH overstate. This is going to be the default. This is going to be, this is the clipped state or octave, and this one is going to be the disabled. Okay? So with these buttons, we could go on and make the buttons, but these, these buttons are independent if I want to change the border radius because I have another broke now. I have to go one by one, select them, all of them, and then go come here and say, okay, I want my buttons here. It's nice, but if you have a lot of buttons can be a little bit messy. Okay? And if, if you want to change the color of these buttons or you want to change the spacing. You may imagine you want to make these spacing smaller to be. We'd let us space. Then you have to go buy a one-by-one double-clicking. It's kind of, you know, kind of you have to work too much. Okay? So this is one approach, but these icons such as you have seen, they are independent. So we are going to combine them as variants anyway. So we bomb here, we click, and then we have our magnificent button with these properties. Again, for the first property we will name in science. And then this text icon just to remember what properties. Okay? And then this is the type. And then this is the state. We could go here and rearrange them and that would be a right. Ok. And if you want, if you need to add more, more, how to say it properties to here, you can just come here and Othniel property. Imagine you are created like a rounded version and a normal mission. And you can come here and write coordinators, coordinators, nor cones. And then here you have seen these, this is a value. So you, here you can add new baryons as they call it, or osmium properties. The properties are gardeners estate dy, dx icon, and in the other one are baryons. Okay, so for this corner, I want to be, let's put there the border-radius that I, that I put like 100, okay. If I create, the higher, if I create Hive, created some variations of it, imagine I'm going to create another variation of this icon. So what it does is just to be gated, you cannot hear two off more components to your. You can add as much as you want, okay, so we, we create more components and what you can do here, imagine I no longer want. Imagine I want to create the Left Icon bursa. So what I going to do is yes, come here, delete my icon and I'm going to add another one, another one because we need four. So we come here and yeah, remember to make these big because sometimes these frame is kind of annoying and you can get distributed. This is another way of working with baryons so you can create the components from here, you yes, creates the first button. Do you use it as you make a couple of them uses as barrier. And then you start creating the buttons from here. Okay? So yeah, so what we can do now is we have the large and this is going to be the left, not left, right. This is going to be just a Left Icon. And actually I'm going to select all of them. And I'm going to put here left icon, which is a new barrier anti have created. And this is going to be there. Instead of default, this is going to be our hover state. Instead of default, this is going to be our click the state and the last one is going to be our disabled state. So for that I'm just going to click here and I start to add at callers again for our components. Okay? So we have learned that we can create components from here. What you do is you just select the component you want to kind of duplicate, but it's going to be independent. So you click on plus and you, you've added here, ok. So imagine we can add another property which is going to be called Icon. Yeah, super weak icon. I'm going just to put it here on the top. And we are going to put two baryons or with what is going to be true. If, if it has if it has icon is going to be true and if it's doesn't is going to be false. Okay? So let's add a new bargain for it, okay? No, not for corners and wanted for let me select this icon. Everything, everything is true. Select another one. And then here, what do you say is true? Let's say he's force. Ok. So I want to sell you something. So let's say this. I'm going to change them. They are going to be false. They are not going to have an icon. This one's okay. So I'm just going to delete. The icon is going to be only the text. I'm going to just make it yeah. To terminate this several times. So we have only the text version of this, so I'm going to select them. And instead of right icon, this is going to be the next version, ok. And that this version is the only one that has the force in the icons. The rest has these true. Okay, so these true barrier. And so now if we go, he'd come here to assets and come here to our button. And we put these beautiful button. You can see we have this, this amazing sweets because we put lag true or false. So is a Boolean, so it's or enable or disable. So what we can see that the only, the only proper B that doesn't have an icon is that S1. So we only can select the DES here or is selected by default, we can tends to leverage icon and we're going to do is in the icon gas activated. So we come here and as you can see, it's activated, but this is super cool. Okay? These kind of, this is, this is super nice. For instance, I want to sell you something when when you are working with weed radio buttons, for instance, and you come here, you can switch on and switch on the label and if it's selected or not, and then you yes. Change the assist states. Okay, so this is pretty much of it. What is Marianne sub out? I only want to show you. We have created these components with which are independent. And we have seen that it's a kind of a little bit of, well, can be frustrating if you have two chains, all the, imagine you want to change the dipole where I feel these battles. You, you have to walk one-by-one selecting all the, you know, all the, all the text and then changes to medium or I don't know, black. So you give it another feeling. But you often set to select the deaths one by one. So this is kind of barring, it's super boring. So we're going to see another approach to do this. So I'm going just to show you how to remember imagined. You don't want to, to do the assignment. You do like baryon spot. You are not sure if you implemented to implement it in your business or something? It's super-easy yes, to kind of the that's it. It's a little bit tricky. So what you have to do is come here, select your elements and drop them out of the variant. Ok. So now the variant is gone because there is no. And Dan Barry Anton removed Barry anthoxanthin VS. Have to pitch your components scan of we're actually but you only have to beat your components and drag them out. Okay, so that's how it works. So, okay, we have all our beautiful independent components. I'm going to get rid of them. We don't need them anymore. I'm going to show you another approach to this. So this icon, I'm going to change super at one other, two, some weird color. This yellow feels good to me. And this is going to be our master components. So instead of naming like this, okay, I'm going just to copy it to, to, to copy the name. I'm going just to leave it here. Okay, so I have it for later. And this component, I am just going to name it like dot, unlike like period, muster button. Okay? Why that dot? So I create a component, but it's not going to appear here. You put a dot or or or yeah, like this. Short down. I don't know. I don't know the name of it. You know, about this. This, I'm going to make it kind of b here. So if you put like you put like a period or a, a, you know, this down dash bar m or I don't know, nm. So sorry for that. But if you name it with a dot or the other one, and then master baton or wherever you Diaz. Even if ESA component won't appear in your components assets panel here, okay, which is cool for these elements. So where we are going to do is we have all the elements we need in these button. I'm going to send you to four. So we are going to create all of our components based on these one. Okay, so let's start and this is super fast too. So we are going just to, in this case, I don't want to read that's what I want these yes. To create copies of it. Multiple copies of these Easterns. We don't go, we don't want to break the cell. These partnership with this master button. Ok, so again, I'm going to choose for the carlos we previously had. Regretting. I deleted my color spot. Anyway. Let's go with the blue. This super cool. So I'm going to pick this flu and give it a little bit darker here, again, like we did before. Same thing here. I'm going to be this one to go a little bit darker here. And this is going to be a VC bold. And I'm going to pick these colors so we are in the blue side of things. So yeah, this is good if it were to me. So what, what are we going to do now? We are going to create multiple components. And you say at the outset, this is already an instance of a component. Yeah, that's what we want. Okay? So we are going to create multiple confines of it. And then we are going to start naming them as we did before. Okay, so we have these approach that like, whoops, note, we're going to select these master button. And then, right, this is going to be good. And if we do in F, And if I put the names here, when I create the baryons, the values and everything is going to be created. But for this example, actually I don't want to put the name already. What I wanted to create these as variants. And as you see, we know half anything like we had before that we have the size, we have the type, we have the icon or text, we have everything. Now. We don't have we don't have anything because their name was dot master, which is not the name we want anymore. We want to rename this to button. This is going to get, the name is going to appear here in our assets. Now we have our in the various tutorial, sorry. We have our button, you know, we have our three types or button, but there's something weird here. Why? Because we haven't set our baryons in properties. So the first property, remember, we were working with size. So the size is going to be large. We are going to add a new property in this case is going to be icon text. Well, let's put the icon. Lets say the true and false. Do you remember? So we are going to create another baryons. Another bar and yes. While in this case, yeah. And this is one. I'm going to remove the icons. So this is going, the icon is going to be false. We no longer have icon, so we select everything. And what we are going to do, it's what else? This is going to be the primary. So we have a new property and this is going to be Bremmer. This was the type. This is the primary. And if we have another buttons, we can have more properties like secondary and everything. But in this case all of them on primary. And then, then we want to create another property which is a state. The state in this case might be folded. It creates default, but this is going to be default, but this is going to be hover state. So we just select the harbor button, then this is going to be the clique that state. Whew. Alright, and this is going to be the disabled state. So now when, when we throw these bottom here, now we have our size. We only have what size by now, but you can make it. And then we have the sweets to change from text to icon if you want it. This is kind of an example. You're usually what you want. It's I don't use these true false for this. What I usually do, it's afternoon Berber d in this case is going to be I contexts. Yeah. And n e, what I usually do is left, right icon. And therefore these would be, here, would be text. And what I do is usually position this element, the Saigon desk. Remember, well, gives you select and the variants. You can arrange them in the order, okay? So for this one I'm going to position by there. And and what I usually use this depth-first, then left, right icon, then left and right. Ok. So I don't, I don't usually use these icon true or false, but get me had knee. Ok. So imagine you want to add more instances of these button. Let me just make this bigger because it's a little bit annoying. The Warsaw goes straight. So if you want to learn more baryons, so these element, let's create the SDS and we finished. So we create the S plus three times. Okay? So we are not going to, going to change the color here again, like the like we did before. So yes, come here. Usually is a nice practice to work with color styles. I didn't do that for this example because yeah, I wanted to be to yeah. To do it on the fly so you see how it works more or less in. And now we can apply here our states again in this case, you just scan here and deselect the estate because we have declared the variance before. So this is clicked and the disabled. And I want to show you something now that you probably now, but maybe now. So imagine you're no longer one these border radios and you'll want it to 100. You know, you only have to touch your master. You see, we have selected here our master button, and we only have to work with it. So we want more vulgar reviews. We want justice that we no longer one these beautiful black dipole Rafi. One thing, one we obtained it is, yeah. You see, everything is changing in. Imagine this. You don't want so, so much space between the LINCS, 48, imagine you want to make like more body into your bottom. Do you just make it like really closely? And I only b. So this is the way of making, speeding up your, you know, that same year. So create femmes about your design system or your, or your components. So this is my approach for create and work with components using these master and this is my approach to what we have baryons. So baryon SAS, you can see they are super useful. They are super EC2 to use if you already have a design system or if you are studying from scratch, you can see that you can make like a design system in no time and create variations on bureau button in, I don't know. Ten minutes, 15 minutes. So it's a great way of working.