Config 2023: Variables and Collections (in-depth!)

hey guys so based on the response that I got from you guys on my YouTube uh poll I'm actually going to be covering variables and Collections and excruciating detail in this video so I mean apologies if people get bored with long videos but I want you to explain or at the very least I want to explain everything so you understand most of it so what are variables to begin with and if I'm looking on the left understand that I'm actually reading my notion document because I basically have a bunch of a whole checklist of things that I want to cover so the first thing I want to talk about like what are variables to begin with and how do you access them well you can easily access them by deselecting everything and going to the right and seeing local variables here so you can see this panel appearing and in this particular panel you can see what variables are they basically have defined it create reusable numbers text and colors that can be applied across your files and prototype so similar to how in Styles we used to create let's say a color style and then we can apply it like across different file across different pages and frames and all of that stuff it was just let's say a variable a style variable that we were creating you can expand that actually not expand it it's a bit different and I'm going to talk about the differences here but you can basically now create numbers text strings booleans that you can then use across your design so now previously we just used to use just used to have styles and effects and textiles and stuff along those lines but now you can actually go even smaller than that at the basic level create numbers create text colors and all of that stuff and Boolean properties as variables so the first thing that we're going to be doing here is we're going to be defining the type of variables so we have four types of variables colors that can be used for let's say text color background color and stuff along those lines then we have numbers obviously uh numbers can be used for Border radiuses spacing stuff along those lines strings strings can be used for let's say button text card collections that you actually want to create and Boolean can be used for actually modifying certain values based on interactive prototyping which we're going to talk about in the future as well and maybe some of it in this video as well so now that we have that covered we can obviously go ahead and create a variable directly but before that I actually want to talk about collections so what are collections to begin with well collections are just a group of variables and this is an extremely important topic that I want you to understand a lot of people when they're actually going to be starting out with their design system they may be inclined to go ahead and actually just remove the collections don't even think about them and create everything in a single collection but that basically reduces the possibility and flexibility of variables so ideally you want to have things stored differently so imagine you actually have your color collections that's going to be a separate collection if you have your spacing that can be a separate collection obviously all of those things can be included in a single collection but that defeats the purpose and I'm going to tell you why so let's go ahead and actually create our color collection first so I'm just going to go ahead and actually rename this to color collection and let's go ahead and actually just go ahead and create something so I have a bunch of colors here so I have this color for the button so I'm going to go ahead and I'm going to say we have a button color here let's just go ahead and change that to actually I'm going to change that to primary this is our primary color right then we have the text color here I'm just going to detach it okay this is the text color I'm gonna create another color I'm going to say this is going to be our body color and the body color needs to be something like this then we have another color I'm going to say this is going to be the background color for let's say most of our content so it's already white so I think that's fine so now that we have these things defined we can also Define something else but let's just go ahead and actually link it so I want to link the background here to that so I can just go here click on it and let me just remove this or actually just close this collection thing so I can see things here so I can now link it to the background directly I can link it to the styles that exist here but I actually can go to my libraries and Link the background here similarly I can go to my button here I can say this is not going to be linked to a style it's now going to be linked to my library primary background or primary color similarly the text here actually you know what what's really interesting even if you guys don't do that if you want to link everything here you need to go to the selection colors here I'm going to go to the selection here as you can see we have a white here so I'm going to say I don't want you to be linked to the white color I want you to be linked to the background similarly I I want this primary 300 color which is this one I want this to be linked to the primary color so now I have a bunch of different things linked and let's see if I wanted to change this I'm going to go to my local variables again and now I'm going to talk about modes so in a collection you can have multiple modes as well so if you want to access a mode you can basically go to the top right and click here so now you have name you have mode 1 and mode 2. now I can basically have this this is since this is a color collection I can have two different themes let's say so this is going to be our light theme and I'm going to say this one is going to be the Dark theme right pretty simple straightforward stuff I'm gonna see in this case the background is going to be actually reversed it's going to be something like um I don't know let's say just just this color and then the body color is going to be let's say white or the text color is going to be white and the button color is going to be a bit on the blue side but it's going to be a bit brighter so now that we have that applied I can go to this card and let me just actually move this collection out of the way okay so it's out of the way actually let me just close it so you can see things completely now if I wanted to change this collection I can just go here to the color collection by default it's light I can go ahead and I can say that it's going to be dark now as you can see everything updates automatically the text color however does not update and the reason for that is as you can see at the at the bottom right it's actually not fetching the body color that we have so I'm going to detach it I'm going to go here and I'm going to say this is going to be using the body color what exactly are you doing man so now here as you can see we have the modes covered I can change this to light change this to dark and all of that stuff and even if I was to drag this button to this particular thing it's automatically going to be converted to dark because that's what I have at the top level defined so this is pretty amazing stuff now coming to some of the other things that I want to talk about maybe now that we've covered colors let's talk about something else let's talk about numbers now if I wanted to let's see if imagine if I actually had numbers included here like spacing for my spacing or for my border radius I would basically be duplicating them because I did not wanted them to change between the light and the dark mode like numbers within a color collection don't really make sense right so what I can do is I can now go ahead and actually create a new collection and I can say this is going to be a collection of for spacing as an example so we have a bunch of spacing defined here and I'm just going to go ahead and actually quickly create these variables and I'm going to speed this video so obviously you save time before we even move forward I want to mention that all of these things are going to be covered in excruciating detail in my figma Noob To Pro course which you can get at a 50 off using the am subscriber voucher code there I'm not going to do a basic tutorial like this even though that's going to be included but rather more in-depth things like when to use them why to use them we're going to have exercises and you're gonna get access to a Discord Community where you can talk to me directly with my team as well and other members taking the course okay so now I have a bunch of spacing variables defined let me just delete this card and go here so as you can see I have a bunch of spacing defined here so as you can see this vertical Gap is actually 15 pixels it shouldn't be 15 pixels so I'm just going to go ahead and it's going to be spacing minus LG similarly the left and the right padding I'm going to say this is going to be a spacing minus XL both of them that's all well and good and now let's see what other type of spacings we have we have a spacing here I'm going to say this is going to be the spacing LG since this is using 16. um I'm and maybe this particular one is going to be let's say spacing minus MD and stuff along those lines that's for up to meet that's up to me to decide so now that I've done that if I wanted to condense it let's say I wanted to create a compact mode for it I can easily go ahead and do that as well currently as you can see I haven't really applied the spacing here but I don't want to do that because sometimes you actually want to say spacing variables should only be used for spacing they shouldn't be used for let's say border radiuses so that's not something that I want to do I don't want it to be applicable to border radiuses so if in order to let's say uh scope certain variables I can actually go to my prototype I can go to my local variables and I can go to this and I can say this shouldn't be on all supported properties it should only be on let's say the gaps sorry the gaps it should only be available on the gaps and maybe the width and the height or something along those lines so this is available on the gaps that I think looks fine so now if we go here and if we try to access this particular property on the radius as you can see that's not going to be there anymore similarly one mistake other people can do is they actually may want to go ahead and actually use this particular spacing value in this particular text and they may not find it so they may actually go here and use let's say something like this but as you can see this just updates the value of the text not the font size so if you want to use the font size you can obviously create a textile since that already exists so you don't have to worry about all of that because the textile obviously includes a lot of things like the font uh the the very the the Bolding and then obviously we have the text size we have the letter spacing and all of that imagine actually setting all of that stuff manually using variables that's going to be insane so you're going to use styles for that now this is a really important point that I want to mention when are Styles and variables used so variables are used when you want to Define like really simple things like let's say border radius is or let's say the width let's say the height and you want to change them dynamically maybe as well you want to change the Boolean maybe a button should be displayed differently if a person clicks on it stuff along those lines but if you want to Define complex things like let's say multiple backgrounds applied and you want to create a single style for it you're going to use Styles if you want to use a certain textile you're going to use Styles you're not going to use variables for it because the textile create actually has a lot of things and manually actually cherry picking or creating styles for every single property in the textile is going to be insane with variables so that's where that's why for complex things we're going to use styles for basic really minute things that are just one-off things we're going to be using variables so now that we have an understanding of that what I basically just did here is I went ahead and applied uh as you can see I'm just going to go here to this particular thing and as you can see I have a bunch of things applied here so I have different things applied like for example the the font size sorry the spacing the padding and all of that now if I let's say wanted to condense it how do I go ahead and do that so if I go to my local variables first of all as you can see these are my spacing variables I can create another mode here and I can say this is going to be our default mode then maybe we need a compact mode in the compact mode everything is just going to be divided by two so two four eight and then 16. so what this is going to do it's basically just going to reduce the sizing of everything so now if I go here and if I go to my layers panel as you can see I have spacing here I have the default spacing applied but if I wanted to let's say condense it I can just go ahead and change that to spacing and I can say this is going to be Compact and now as you can see everything is compact the spacing is Compact and it just looks like magic so one important thing that a lot of people show in their demos especially figma showed it as well let me actually just convert it to Auto as well um I'm just going to go here I'm going to say the mode the spacing is going to be Auto so it's by default Auto is just going to be the default spacing right it's not going to be anything different so what a lot of people do here is let's say they create something like this create a frame and I'm just going to color this Frame differently like something like this and then I'm going to create another frame and what what we want to do here is if I drag it here this should not this should be in the default uh spacing and if we drag it here this should be in the compact spacing so how do you do that well obviously you can choose the type of variables applied by going here but as you can see if we go to the frame itself it's we don't have that option available in layers now the problem here is it's only going to be available if an element that's sitting within the frame is using something from that collection set so we have I just created let's say a simple rectangle here what I'm going to do is I'm going to say this should be using spacing minus MD just as a reference point as soon as I do that now I can see okay this is using the spacing thing I'm going to say this is going to be default by this is going to be this container is going to be using the default spacing and this container is going to be using the compact spacing so now if I I bring this card here this is going to be default and if I bring this card here this is going to be Compact and you can do the same thing with theming as well you pretty much get the idea now if this doesn't work for you guys if this doesn't work then it may be possible that you've overridden the properties of the spacing or anything that you're trying to switch to manually so if I even though this particular frame is actually using the spacing default or let's say it can also be using compact it's completely upon us I if I go ahead here and if I change the spacing manually instead of Auto or inheriting from my parent I'm going to say this is going to be compact now as you can see even even though this particular thing is actually if you go on the left and see is in the default sizing uh container it's still going to be compact because I manually changed it so again inheritance is not going to work if you manually override your variables for a particular collection it's only going to work if you have the auto option selected so that's really important which a lot of people are pretty sure are going to miss and not a lot of creators are even going to be talking about it so that's that now coming to just one last thing that I probably want to discover or maybe two things the first thing that I want to talk about is aliasing or referencing a variable in multiple places so imagine you have the primary color right and now you're basically using the primary color in different places maybe you're using it for the button background maybe in one place you're using it for I don't know navigation links and stuff along those lines right how do you actually use the same primary color in different places so you can exactly do that so I'm going to go here I'm going to say color collection and maybe I'm going to create another variable for color I'm going to say this variable is going to be our button BG and the color that's going to be here which color is it going to be I'm going to go to my library and I'm going to say this is going to be primary and in the dark mode it's also going to be primary so now as you can see this one this button BG is inheriting the primary color from its primary light field or light mode and this primary color is inheriting its primary color from the primary dark mode so if I was to let's say change this color to something like this obviously it's going to update all of the other aliases or all of the other colors that are linked to this particular thing and this is really useful when when you basically want to actually just make it easier for people to actually go ahead and use the button color so instead of using primary I'm going to say this is going to use the button background instead of primary so it's much easier for people to know if let's say we're actually creating these links and everything so this is another important thing that I just wanted to point out and you can do this with spacing or let's say textile sorry strings or anything as well so that's completely up to you guys one last thing which are the booleans so string is pretty simple I'm pretty sure you guys know it but if you don't but say if you don't I'm also going to create something really quickly for string so this is going to be our cards and I'm going to say we're gonna have another let's say create a string this is going to be our title for the card and the first title is going to be beautiful abstract art and the second title is going to be I don't know uh ugly abstract art or something who cares I can go ahead and I can link the string by just going here and I can say the title is going to be linked right and similarly I can just go here and I can say even though the title is linked I want to change it maybe and I want to change it to more 2. so now if I change it to mood two it's ugly abstract art it's like whatever so imagine you have a bunch of cards that you want to create and you can create 10 of them and you can easily go ahead and actually link them to the variables without necessarily going ahead and manually typing all of those things for yourself so that's again an important concept that I wanted to point out now coming to the last thing that I want to point out which wouldn't be possible to demonstrate without going into the prototypes a bit and I'm going to be covering the advanced prototyping and connections with variables separately if you guys want but let's go ahead and actually just quickly create something so what I want to go ahead and actually create are booleans and numbers and I'm just going to quickly show them show you how to create them so imagine if we wanted to create an add to cart functionality Right add to cart functionality and I'm going to do this really quick so obviously we can cover all of these things in detail in uh the Prototype video so we have a number here we are going to be cart items like how many items there are then I'm going to create a toggle here which is going to be Boolean items are there any items in cart or let's just call them items in cart so what I want to do here is really quickly I'm not going to do anything fancy I'm just going to create like a number here items in cart and then I'm going to say something right I'm gonna basically have a zero here and what I want to do is I'm just going to let's say group this within a frame and I just want to say that this particular frame in itself should not appear when you don't have any items just to show it to you so I'm going to link this layer visibility if you actually want to change the visibility of something you can go to this I here click right click and then link it to a Boolean variable so I linked it now before linking it I'm actually going to link this number as well so I'm going to link this number I'm going to say this is going to be linked to our number of cart items and now I'm gonna also link the visibility of this whole thing to items in cart which obviously don't exist now what I'm going to quickly do is I'm going to come to this particular button I'm going to go to my interactions I'm going to say I want to change a variable anytime I click on this particular button the first thing I'm going to change is items in cards since I actually just pressed add it should just change to what it should change to True quite simply pretty simple stuff like nothing much it should just change to true that's it and I also want to say that there should also be another variable here uh it should also change another variable which are the cart items and the cart items need to be incremented by one every time I let's say press this button so pretty basic functionality that I'm just showing you to do I'm demonstrated if you press shift space you can get this inline previewer so if I press this add to cart Button as you can see the items in card visibility changed because I changed it on the click and anytime I basically keep on pressing it that number is also going to keep on changing so pretty simple functionality hopefully that gives you an idea of what Boolean values are I know this has been a long video but hopefully this has covered probably everything or mostly everything about variables that you need to know to actually get started so that's pretty much it do subscribe and do hit the Bell icon and also if you really want to be a pro at figma definitely take my figma Noob To Pro course that's going to be linked in the description and in the comment section it's really going to bump up your game I'll see you later take care bye

Channel: AM Design

Views: 8,318

Keywords: advanced prototyping, am design, asaad mahmood, autolayout, autolayout new features, config 2023, design system, figma, figma auto layout new, figma conference, figma config, figma config 2023, figma config updates, figma design, figma for beginners, figma new features, figma update, learn figma, new figma features, new figma update, prototyping, ui design tool, variables, variables in prototyping

Id: buvT4yp5Gh0

Length: 19min 54sec (1194 seconds)

Published: Thu Jun 22 2023