Foundations of Figma Lecture: Basics of Variables

welcome to the foundations of figma our most in-depth figma course for beginners today we will learn the basics of variables inside figma this is a new feature and many students get confused with it today I will simplify variables and also show you practical examples my name is an mea and I teach students design and AI this is lecture five of our 10 lecture Series so without wasting any further time let's get [Music] started [Music] all right so let's get started before moving forward I just want to make sure that we are very very clear about the fact that this entire course is not a ux design course this is a figma course there's a big difference so this is where I teach you what exactly is figma and how do you use different features of figma even if you know figma into to end you will not get a job so you first need to learn the tool which is figma and then spend time learning ux design which is the subject you will get hired if you understand ux design but of course you can't start learning ux until unless you know figma and that is what this course is for you are watching lecture number five but before lecture number five I have already uploaded four lectures on the YouTube channel all are for free in lecture number one we did the basics of figma in lecture number two we did frames and auto layout in lecture three I discussed Styles and Library which is a very very important video and in lecture 4 we discussed how to make components and variants now if you haven't seen even a single lecture I would recommend you to please start from lecture number one once you finish lecture number five if you've missed any video so far please make sure you watch them because this is a very very well planned Series so when I'm making this video I am assuming that you've completed all of your syllabus so far now if you already know figma and if you're interested in learning ux design in specific spe ific as a subject then I have launched a free course on learn .in it is a complete road map to a ux design career where I'm very very honest and absolutely clear about the expectations how do you apply for job average salaries how do you apply for internships jobs every single thing this is a total total 9 weeks syllabus uh but if you do the additional modules as well then it would take you almost 9 weeks but trust me when I say this if you follow this road map on learn .in you will have nothing left you will know absolutely enough to apply for your first well-paying ux design internship now that I've set the context let's move forward today's syllabus is split into three modules in model number one I will explain you what exactly are variables and why do we even need them if you already had color styles then why did we need variables in the first place second I will make you understand the different types of variables because a lot of students think that variables is just a modern version of style styles were absolutely logged for say typography and colors and shadows but variables are more than that there are more types of properties that you can store inside variables so I will take you through all the different types one by one and their use cases as well as to which type is used for which purpose and in the last module we will go through some practical examples and also try variables in a simple prototyping examples now throughout this video I will be zooming in if there's anything important to show if I press any specific key you will see them on the top right corner so at any point if you feel confused as to what did unch press you have all the clarity building your own chat GPT Bots understanding AI Automation and learning the most valuable tips and tricks in the world of AI these are just few of the topics from our agenda for our AI meetups in Delhi on 2nd December and Hyderabad on 3rd December you will not only network with me but also meet Mr Ajay yadav who's the co-founder of simplified here is what our attendees had to say from last time the Meetup was pretty amazing I came from Mumbai to visit this Workshop was very crisp and to the point there was lot of learning that I can take away it was very informative I was one of the people hated using AI but now I think I'm going to be the convertible one big thumbs up it was great for me trust me this time the event is two times bigger because we will have live master classes networking High te and a lot of live Q&A between the audiences me and Ajay yadav who has literally built a supremely successful AI startup both AJ and I have been collecting resources road maps and proper techniques that we want to share you in our Meetup in both Delhi and Hyderabad if you've been following AI news you know what all has changed in the last 1 month with the App Store coming in the revenue sharing in model Everything Will Change in the next 2 to 3 months and if you want leverage then you need to be prepared for it there are limited seats the links are in the description I will see you in Delhi on 2nd December and in Hyderabad on 3rd December let's start with module number one as to what exactly are variables now before I get into the discussion of variables I need to quickly revise what we had discussed in lecture number three which was around declaring Styles when we were learning about Styles we touched this topic of design tokens now if you don't know what are design tokens let me quickly explain it to you in a UI system and when I say UI system I basically mean a system of colors that are used to design a screen there are a limited set of colors and the designer has to choose from those colors let's just say that in my UI design system I have a blue color now the root value which is just a fancy word for the hex code value is 7f 56 D9 straightforward but as a designer I can't communicate saying can you please use 7 f56 D9 so I basically need to give it a name let's just assume that this hex code is now given a global name and we will call this as blue 100 makes sense now this blue 100 can be used in my UI it can be used in my marketing it can be used somewhere else as well so the same color can be referenced into something else as well so This Global name which is blue 100 can now have another layer on top of it another reference on top of it specifically for say the UI system and let's just say that in my UI system I use the blue color as a brand color assume that you know maybe you designing a social media website and you have decided to use this one specific color as the primary color so I will probably name this as UI primary 1 now even within the UI primary 1 I can re recycle this primary one color for different use cases for example on the left side we have a popup and this popup is from a free figma community file called Untitled UI file so you can obviously you know go and practice the same this UI primary one is now being used for a check icon but it is also being used for this modal text now what's happening is that you had one single color you first named this as blue 100 then you're referencing the same thing as U primary one then this thing is also being referenced into two different ways and you know there's a proper principle behind this we covered this in detail in lecture number three in the Styles and libraries episode so I'm just revising just in case you forgotten this entire process of referencing colors comes under the subject of design tokens and you see these names right here these are called token names now why would I need this because if I have to change say just just the check icon I can take this Branch then connect it to some other color maybe a gray color but let's just say that if I ever decide to change blue 100 this change will reflect everywhere else so of course this is a very good way to have systems now the question is how do you achieve this feature inside figma where I have a hex code and there's a name for it this level one of referencing was possible using Styles now how did we make Styles I would go here click on this four icon click on this plus icon and then by default it asks me to declare a variable when variables were not there it would ask me to convert this into a style so I can literally put a name to this color I can say blue 100 okay I can also add a description and I can create a style but now if I need to have another Style say UI primary 1 I can't link it to Blue 100 I would have to again go here and again sort of detach this again go here click on plus go to style and make this as UI primary 1 now what exactly is happening UI primary 1 in my Styles is a completely different entity from Blue 100 which means that if I had to change this blue color I will have to make the change two times I will have to go to primary one as well and then I will have to individually change blue 100 as well which is really annoying this is not what I wanted I don't want like this one single referencing I want this multi-level referencing now this is one of the features of variables people think that this is what variables are for for saving colors on multiple levels that is not true variables has a ton of benefits being able to have one color being referenced in multiple layers is just one of the features so let me go back here and delete this color and let me delete this style as well so as I said why do we need variables number one is of course I can have multi-level connections which basically means I can have one single color value and a bunch of other things and I can reference them another benefit is that when we were talking about say color styles or type Styles or shadow Styles there were limitations right here I can actually store things like strings and numbers and quantities so you can store values that are just beyond your basic types and shadows and colors because there are so many other things that you need to save and you know keep consistent in a design system I know that most of you are beginners but a lot of you would have tried making UI in different themes when that happens when we only had Styles we had to declare a different palette for a light theme different palette for a dark theme and it was just like so difficult to sort of switch between light and dark theme here you can switch between those themes very very easily in fact you can switch between multiple themes in fact using variables you can switch between different devices as well so the responsive design aspect of things also becomes very very easy where you have one single component and if I were to take that component and drag it into different frames it would automatically change from its web version to you know a mobile version to a tablet version we're not going to cover this today because of course we have like limited time and I don't want to overwhelm you but I'm just making you understand as to what all are the possibilities if you understand variables if you use the text or the string based variables you can actually have your UI being converted into different languages as well so you will have one single button and that one single button can be in Hindi English and French but all three buttons would be connected to a single instance now you would be wondering that an you've given so much of theory tell us what exactly are variables and how do they work let me first make you understand that variables are not just about colors there are four types of variables one is of course the color but the second is number where you can actually store number values just to give you a quick example let's say that I am following an 8 pixel Grid or like an 8 pixel rule where all of my popups or my corner radi are going to be in the multiples of 8 now if I have a table of8 which is you know 8 16 24 32 that way I have a limited set of numbers no person should be able to use the number nine correct this eight number it can be used for a border radi it can be used for any other shape and size it can be used for a pill height as well so the number eight itself as an integer can be referenced for multiple usec cases that is why variables also allow you to save numbers you can also save strings which basically means that you can save titles names phrases and words like single words or maybe you know even two three words together but I would not recommend you to use this for paragraphs but yes sometimes you have headings that you want to be uniform across all popups let's just say you have 50 popups and all of those 50 popups the color is changing the height is changing but the headline says attention now if somebody comes to you and says that anch moving forward we will not have our popup say attention now our popups will say caution so you'll have to individually go and change all of those copies or you know there were some plugins where you could do like contr f across figma and change that but in variables you can actually store that headline as well which means you're actually creating a component of all the text as well variables are nothing but basically component for things that were not even possible before so you are componenti number values you componenti headings and I know that I'm just verbally explaining this right now in in module two I will show you how these work but I'm just sort of setting context see I know that this video is going to be long I will have to recommend you the fact that You' have to watch this video at least two times because the entire concept is very very fresh I have been in this field for so long and it took me at least a week to understand how variables work so give this time give yourself you know patience and understand how this works and trust me you will get it the last variable type is a Boolean where you can just have a zero or one value or a true or false value not on and off but they just use the word true and false so this is one very important thing that sometimes you want to hide something or you want to keep something you know it is either there or not there so I'll show you how Boolean works but basically these are the four variable types now you can reuse the these values again and again and just like Styles and components when you create these variables they become a part of your library so if I have a design system Library where I'm declaring all of them once I publish that Library all other files that have that Library enabled will have access to these variables now folks before I move forward I want to give you a very strong reminder that we will not upload the next lecture until unless we get 1,000 likes on this video within 5 days of upload and at least 500 comments within 5 days of upload because I put in a gap after lecture 4 I was feeling like you people are not even watching or you're not like engaging with the video but if you're enjoying this series I want your feedback I want your proper good feedback in the comment section so once you finish your video make sure you contribute to the th000 likes and the 500 comments otherwise I will not upload the next lecture I'm not kidding I love the subject but I want to make sure that you guys are supporting us because we work so so hard to make these videos come to life with that being said let me come to module number two where we understand the types of variables that exist now the simplest type is the color variable now instead of talking about it let me show you how the UI looks like to get my variables option I have to click outside the frame into this UI area which is my blank space as soon as you do that on the right side you will have the page settings where you can change the background but you will also see this option called local variables if you you click on this icon right here you will have this menu open up now you can take this menu and also resize it just like this so I can take the corners and resize it in the way I want right now this feature is in beta mode as of 18th November 2023 so there might be some bugs but overall 70 to 80% this works pretty well now let me break down this entire UI for you here you're seeing all variables but on the very top you also see this word called called collection one now you remember when we were talking about Styles I said that in a design system you can have a set of 10 colors that are only your primary colors you can have a set of colors that are only your gray colors you can have a set of colors that are only your semantic colors then you can have another set of colors just for the text so when I say this set of colors okay imagine that this set is now being called as a collection and now instead of styles I will call this as a variable so now we are slowly evolving from having a group of colors to having a collection of variables so that is the lingo that is the vocabulary that I will use moving forward now if I click on this three dots right here I can rename this collection so let me call this as Primitives okay this is where I will declare all of my b base colors that color palette that we had declared in our Styles you know that zero to one thing where we started from White and we went to Black let me declare those okay now let's assume that instead of doing things here if I had styles with me I would probably do it this way right let's create five boxes this one can be F this one can be gray this one can be a darker gray and then this one can can be even more darker and this one can be black okay now I will take all of these and when we had Styles what did we used to do we used to do command slash we used to sort them using the sorter plugin and then we used to batch rename this and maybe make this as gray dollar sign one okay now in reality I would make this as you know base one mid and contrast but I'm just sort of just to simplify things let's just name this as gray 1 to gray five and then I would declare them as styles but now I can go to my variables create a variable and as soon as I click on the create variable button I get four options right now we're starting color variable so I will select color as soon as I do that I get two columns here one is the name of this variable and the value stored inside this variable so let me call this as gray one and here I can go select my ey dropper and choose this color right here now this was F so this is pretty straightforward but I can now click on create variable again and then click on color this time call it as gray two go here and choose this one okay again let's this three go here Cho this one go here make this four Cho this one five and one all right so now I have all of my gray sorted now let's assume that these Grays are used for three purposes number one purpose I am using this for my surfaces number two purpose I'm using this for my text could be a heading subheading and you know maybe bullet points and the third purpose could be for illustrations okay because they are pretty simple straightforward colors this is where the fun part begins now if I am in my Primitives Library I can of course create a new library which is not about my Primitives but now this is for my surfaces I can go here click on this create collection button and this time I will call this as UI pallet okay and I can switch between my UI pallet and Primitives now if I go to my UI pallet I can literally create a variable and this time let's just say that in my design system the way I name my colors is surface one Surface 2 surface 3 I can go here and type surface one this is where the game changes let's say that I want my Surface one to be of this color now if I were to connect this with this color and not to my Primitives I'm basically doing the same mistake that I used to do in styles that my Surface one and my gray two are separate entities but now if I go to my value and right click I have an option that says create Alias if I click on create Alias a popup opens up where it either says that you can select a custom color which I don't want that I can click on libraries and here I can find my Primitives collection and in my Primitives collection I can select grade two now do you know what is happening right here the fun part is that I just created branching so you remember that thing where I said that this can be one color it can be branched in another way and it can again be branched in another way so you had the root value right here which was then let me bring out the pencil this color was first branched as gray 2 and now this same gray 2 is again linked to my Surface one now I can do this again and again and the fun part is that if I change this color right here my changes would be reflected everywhere else so you remember this thing right here this was not possible with Styles but now it is with my color variables now the interesting part here is that to make variables really really useful you need to understand collections as well and I think that is pretty straightforward what I can do is in my UI pet I can also create another variable and this time I will call it as text primary now in my text primary I don't want this to be white I basically want this to be black why because assume that I'm creating a light themed app so if I'm creating a light themed app if the surface is so light that the text has to be dark I will right click again create my Alias and this time I will select gray five now this is very very cool because now all of my colors are linked to One Core Library so everything is very neatly arranged now the fun part is that let's say let me delete all of this if I create a frame and let's say I create a popup that looks like this I can go here instead of having a normal hex Cod code I can click on my four dots and I can find all of my Primitives right here when I say Primitives is basically all the variables now I can either choose gray one or gray 2 or I can actually go to my UI pet collection and select surface one this is the right way to use your colors if I were to choose gray to then I would have committed the same mistake but now I can select surface one now the fun part here is that if I come come back to my Primitives if I were to any day change my gray to it would reflect everywhere else so you can imagine how cool this is now if I were to go and select a text layer that says hello I can increase the size and again go to my four dots and this time select text primary so it's just a 100 times better way to sort of organize your things neatly now the interesting part here is that let's assume I have created the these Grays then I went to my UI pallet and I have my gray two linked to my Surface one correct surface one is available in this entire list so if I were to go here in my text if I click on this option in my UI pallet collection I can still see surface one logically not even logically even if I were to follow the system that I have created I don't want this recommendation of surface one for my text because I want only text colors to be accessible when I am reang or recoloring my text this is where the concept of scoping comes in let me show you how this works so I will come back to my UI pallet collection and if I go to my Surface one in my value I have gr to but right next to my value I have this thing called as edit variable as soon as I do that I open a new window where I can change the name I can add a description change the value but I also see this option called as color scoping this is figma's way of asking me that anch where exactly do you plan to use this color and let's assume that I only plan to use this in fills okay within fill you have an option to tell figma whether I will use this for a frame or a shape or a text or even a stroke now if I unselect text if I unselect stroke then I will not see this inside my options when I'm trying to add a color to my text similarly if I go to my text primary click on this icon right here this is a color that I have chosen for text primary so what I will do is I will uncheck fill all together and only select text and also unselect stroke when that happens even if I'm selecting a surface right here if I open my color panel in my UI pallet I will not see Tex primary this is insane right now you will not be able to understand its value but I'll tell you what happens when we were creating Styles I used to get so many of these color lists right here and I used to wonder that dude it has become so difficult to scroll through this list it has become so difficult to search through my colors because you know there were so many overlapping words but now with the concept of scoping this entire thing has become Supreme supremely easy to scale and maintain isn't this absolutely amazing let me know in the comments section if your mind has just been like in a seeing how useful this would be now this first type of variable which is a color variable is pretty simple to understand and I keep seeing a lot of people just talking about the color variable the next type is a number variable now to make you understand why do we need this I have a screen in front of me and just assume that you know probably I will be having my own app where I will be you know uploading all of my courses in one single go and I have the screen right here and here you have one recommendation and then you have resume watching now let's assume that I have this component right here and even though this is not a very practical example I am just taking this example just to prove a point okay I'm going to keep this right here and let's assume that I want the beginning to say zero views okay so the start of the UI should always say zero views now of course by default the copy says 24,000 blah blah blah this is where number variables can help me so I will go here click outside go to my local variables and here in my UI pallet or my Primitives I can literally have a new variable added however I will not do this in my Primitives because this is a value that I am using on a component level so to make things way more organized I will create a new collection and this time I will call it a as component data okay in my component data I can create a variable and this time I will select the number option here I can say default views okay and notice how I'm using Dash if I use the word slash then it would have grouping inside a collection as well we're not covering that today but I'm just letting you know now the fun part is that I can select this text layer right here which is called 24642 views and on the right side where you have your type settings you have this small diamond button right here which is the option to apply a variable as soon as I do that I will have default views right here now the mistake that I have made right now is that if I select default views the entire text layer has now gotten converted into the number zero but I always wanted it to be some amount of number digits and then the word views this is where you need to start building a habit of organizing your text in Auto layouts now what do I mean by that this is a wrong way to organize your views the correct way would be that I would detach this instance go here and first of all if I take this text layer right here in my layer by default the layer name is the copy that I have added into my text the correct way to design your comp components is to double click and call this as video title then here I should duplicate take these two put them into Auto layout maybe add a four pixels Gap this thing right here should be called The View count and this two should be called term views why because I will hard code this to be views now if I take this thing right here click on this diamond button and then click on default views now this number right here is attached to this which means that if I make this 100 this would become 100 views okay if I were to delete this right here and keep this this is the right way to actually organize your components now the fun part is that let's say I have the word resume watching okay and assume that I keep this thing right here this this is say a phone okay and I'm just like making this in a very very rough way but just to prove a point but let's just say I keep resume watching like this then I also create a version for the desktop where I have it in my wide panel and then I would probably make this into a different style maybe like have like a really big heading and keep this this way okay so on my phone and on my web I I have used the word resume watching and let's assume that I have multiple files like this so maybe you know the same thing is being the same component maybe is being used in a central way or in a story you know whatever it may be and let me just change the background color so that it's very very evident so I'll just make this as say you know this color right here now this resume watching it of course has a type style the type style is declaring the font the weight and all of those things but I'm saying what if I want to componentize this phrase resume watching what if 6 months from now a PM comes to me and says that unch instead of resume watching we have to make this resume learning as soon as I do that I would have to literally go and type this as resume learning in every single place now of course I could have fixed this if both of these things were into a component or if I had component properties but now I can actually save this thing right right here and you know have that change reflected everywhere else but here is the caveat in my resume learning the phrase is actually a string in this case when I was actually adding a number this was an integer so a string is made up of alphabets and alphabets are called characters so basically when I say the word views and let me just detach this the word views is a string and this string is made up of five characters V is a character I is a character and so on now this is actually a number and this is a string so if I have to componentize this phrase right here I will have to go create a variable and choose the word string and I can call this as resume heading okay and I will call this as resume learning now I can go here and then apply my variable right here so I can take this take this take this one and I think you can't do this on multiple Styles so let me just make this one by one and here you go now when that happens I can say continue con continue and it would reflect everywhere else right now a lot of students asked me that an how is this different from a component property a component property can only be added to a component correct which means if I had to use a component property I would have to make this string right here a part of this component declaration but in a UI you have so many things all over you can't make a component for everything imagine the amount of clutter you would have in your library moreover in a component property you have multiple strings for a single component which basically means that if you have an input field the input field has one label and that one label the placeholder is label but the label can be first name last name email so you have multiple variations of the label so when you have multiple variations of the label you will use a component property because it has been declared as a variant somewhere else in this case this is for dedicated integer values or dedicated string values that are just Standalone headings these are Standalone sentences you don't have to make them a part of some component so when we click on create variable I explained you color I explained you number I just showed you string and just to quickly revise what we've studied let me just bring back the slides right here and let me take this window right here you can store numbers and then reuse those numbers for whatever case you want for example let's say that I have decided that all of my corner radi is going to be five pixels so let's just say I have a bunch of popups one popup is this uh then you have some notification U then you also have some small button okay and I will take all of these let's have them align and I want to keep all of them as five pixels okay and I have decided a rule that it's going to be in multiples of five okay what I can do is I can go here create a new collection and maybe call this as either primitive numbers or I can delete this collection and then go back to my Primitives and just save here so I can literally have three phrases okay I will go to my number I will call this as small okay the other one can be as medium and then I can also have large okay this can be five and instead of making it five let's keep it four so that it's more practical let's keep this eight let's keep this as 12 now now I can take all of these things right here instead of manually adding the number right here if you hover over this input field you can now apply a variable so I can go here and choose small and then all of my buttons popups everything is now linked to this quantity right here now the fun part is that this is not just restricted to Corner radias no you can use this for many many things now the question is an how do we decide that where all can this be used the easiest way is you check out the scoping if I go to my scoping settings you will see that you can use this for Corner radius width and height Gap and text content so the fun part here is that let's just say I have another one let's call this as medium height okay and I will make this as 32 okay I can take this popup right here go to my height choose this and select medium height that way if I'm making a pill I have actually componentized the height and the corner radi and you can do the same with width as well so imagine the kind of systems and organizations and uniformity you can have across your UI because this was unheard of componentized these values this was not possible ever so just to quickly summarize you can have as many numbers as you want and of course you know when we do advanced level videos these are just basic videos because I just want to show you you how do you create these in figma we're not discussing how do you use this in your Design Systems because obviously this entire video is going to be for more than an hour I will need to spend another hour just explaining you how do you use these in your day-to-day projects right so for now you know let's take things slowly let's understand how do you even declare these variables in the first place the next variable that we discussed was a string variable where you can declare content and the fun part now is that you can also have modes now I will not not do a lot of discussion on modes right now simply because it is a whole new topic altogether as to how to use modes but the interesting part here is that let's say you have an app which is in both light theme and dark theme okay and let's just say I take this cover right here and let's just have this Frame as my light theme and then this Frame as my dark theme now if this component is the same all I need to do is switch the colors okay let's just say I take this thing right here I will detach and I will add a color which is gray too okay I will take all of these detach all of them and maybe make these as gray three okay let's delete this one now this works well on a dark theme but this would obviously not be legible on a light theme now my first solution would be that hey why don't I just go here and instead of gray to make this gray five right that would be the easiest way to fix things but then that is making no no sense at all because you have all of these Primitives getting jumbled up like there's no logic behind it the right way would be I will go to my UI pallet and I have text primary let's say I create a new variable and this time I will select color and I will make this as text secondary okay text Dash secondary I will click here create an alias and I will select gray three okay if not gray three maybe you know probably I don't know yeah actually let's just keep gray three okay you can see that the text primary is a black color and text secondary is a gray color which basically means that I can only use this for a light theme so if I go here and make this text primary and go here and make this as text secondary this looks well okay so right now my palette was created for a light theme but if I take this on a dark surface not legible what I can do is I can click on this plus icon right here and as soon as I do that I have two modes of the same variable now this is a game changer you will absolutely love this I can call mode one as light and more to as dark and here in my text primary instead of linking it to gray five I can link this to gray one and here in my tech secondary instead of making this gray three I can make this gray too now the fun part is that if I go back here you will realize that anch you you have already selected text primary then why is it not showing the white color like it should show like light or dark right so how do you switch in between this to switch from one mode to another you have to select your entire component or instance and right next to layer you will find this icon right here where you have overlapping hexagons if you click on the overlapping hexagons you will find UI pallet and inside UI pallet you can switch between light and dark so if I go do dark you now have one single component that has the same variables by the way it has text secondary text primary but now they are getting linked to different Primitives so I have the same color of Grays which are being referenced in different ways across light and dark theme now another crazy feature right here is that let's just say I have two apps okay this app UI is for the light theme and then this app is again for a dark theme you remember what I had to do I had to take this thing right here again switch this thing then go here switch from light to dark the fun part is that you can take a frame and allocate a theme and I will use the word mode because mode is the right word for it but we using it for themes I can select a specific frame and then allocate a mode to this Frame which basically means that if I select this thing right here and put something in this Frame right here select this Frame go to my layer and then choose dark it would automatically switch so I can take another copy and it would automatically switch from light theme to Dark theme and this would work for any other component so let's just say that I have a button okay I will create a button and this button can have a six pixel radi and here it will have the word click me okay I will take take these two put these together make this into a component and for my light theme let's just call this as say I'll create a new color I'll call this as button primary BG okay let me make this as BG and in my light theme obviously I'll go here and I can select gray five because that is the color that I want and in my dark theme I want to make it pitch white okay I will go here select this and type button primary BG in my text I want to keep this as text primary okay now if I take this thing right here and go to my UI pallet and select my light theme you realize that nothing has happened why it hasn't happened because my text primary is actually black so then I will have to create a new color token and when I say the word color token it's actually a color variable I will make this button primary text because this is still black but I don't want it to be black right so I can create an alias and this time I can make this as gray one okay here I will create an alias and make this the color black now here I can actually go and say that I only want this to be used for text okay here I will go and choose button primary text now folks if I have a button right here that has a button primary BG that has gray five black color in light and white color in dark and the text is also inverted what I need to do is take this out and on the very right side you have this button right here that has overlapping hexagons if I choose Auto instead of specifically saying light and dark if I choose Auto and if I drag it into this Frame it would actually change themes automatically now in a lot of cases what happens is that people would duplicate it and then once they go here instead of Auto they might might have selected light or dark or whatever it is when that happens this feature would not work so if you want this to work properly make sure that you have it selected at dark this Frame also needs to have that specific value so it has to be either light or dark so you know you have to make sure if if you switch this to light then everything gets messed up so this has to be dark this has to be an auto this has to be an auto and that is why you know it's working pretty well but this is very very useful when you're sort of design in apps that are across you know different themes now we come to Boolean variable now of course the entire concept of Boolean is that it can either have a value of off or on now if you go to create variable and select a Boolean let's just say I have the word say switch okay and let's just say that we have some feature right here where I know I know that this sounds like a very weird feature but in my light theme we keep an ie but in my dark theme we probably have have you know this as off okay and I just don't want it to be in my light theme now if I want to toggle this visibility I can actually have the word switch and when I use the word switch I'm basically saying the word token in light theme this can be on in Dark theme it can be off now if I want to apply a variable specifically the Boolean variable onto the visibility there is no hexagon icon readily available so I'll have to right click and then select my switch option now the interesting part here is that I can of course go here also take this entire thing and right click and make it switch so of course it would go away but you can also sort of make this automatic so if I were to take this thing right here the visibility would go on and off so Boolean right now is only useful for either visibility or for you know triggering certain actions in the prototyping mode okay there's no other practical use like it is mostly heavily used in prototyping otherwise if you're talking about UI design it is mostly to toggle things on and off there's not much benefit to it right now we also spoke about collection within a collection if you use the slash convention you can also have these organized in a group right so you have these Collections and then within collection you can have color within color you can have gray colors and the brand colors you know very very similar to how we used to you know declare our Styles and just wanted to like put these names out there because in the upcoming videos I will be using the word colors and groups right so within collections you have groups within groups you have variables variables are actually names for a specific hex codes right and then what you can do is you can have different groups for your spacing and radius so you have one Primitives and then within Primitives you can save your colors in this group then just your spacings and just your radi because as I said you can use as an auto layout as well right the concept of Alias have already covered that you can write click and choose those colors so I think that would be sorted and of course you know this is how people put it so if you have a group called spacing within spacing you have excess you have SM so you know there are multiple namings for this right so X is extra small SM can be just small MD can be medium and then you know this thing right here these can be some numbers that they have probably declared in their primitive so they are in their tokens collection but maybe their radi their border radi their spacing all of them are sort of you know taking numbers from a specific Library there's a proper proper logic behind it this comes under the subject of Design Systems and ux design which you don't want to cover right now otherwise the video will not even end now a very very important doubt that a lot of students have is that anch what exactly is the difference between Styles and variables right in Styles we were just restricted to type faces shadows and colors and when you declare a style I can actually take this thing right here go to the icon click on Plus in my style I can actually add multiple layers on top of this so you can actually have layering inside Styles right this is not possible in a variable you cannot have multiv values you know like overlapping properties in a variable Styles can have that so style can have an image also it can have a color on top of the image also but when we talk about a variables it's a Concrete value it's a proper individual value and of course inside variables you can store integers as well there was no aliasing in Styles you cannot have multi-level differencing in Styles but you can do that in variables and the most crazy cool feature is that there's no scoping inside Styles right but as I showed you you can have proper proper scoping inside variables like you can literally tell figma that these properties are only going to be used for either text or stroke now folks to do this thing practically there's a figma file which has been uploaded by figma on their Community it says get started with variables I don't want to cover this in this video because we're already you know exceeding time so I just want to cover one single examp example but I'm just letting you know that this file is very very important now I will give you a glimpse of prototyping with variables okay so I have a component right here I have created one button that says add views I have another button that says delete views I'll tell you what I need to achieve if I click on ADD views the number should increase if I click on delete views the number should decrease okay so most importantly I have my number right here so this would be called as views and this would be called as term views and let's just make this as view count okay this add views should trigger an increment in this number right here so my step number one would be to go to my local variables and let's create a new collection I will call this as prototype okay I will create a new variable and in my number I will call this as view count okay let me just fix the spelling and here I will make this as 999 okay now I will go to my view layer right here and instead of having a normal number I will call this as view count okay this Thing Remains the Same now this is where things become super super cool you will not believe how crazy this is I will switch to my prototyping mode okay and let me just delete if there's any Behavior whatsoever because I was trying this out so if I enter my prototyping mode I have to click on my interactions okay here on click I have a couple of options okay now if I were making a normal prototype I would choose any of these options and by the way folks don't worry we will have a dedicated video for prototyping as well for now just watch this you don't have to implement just watch okay I need to tell figma that if I click on this button you need to make some changes to a variable now figma uses the word set variable it is essentially changing the variable value but in figma's world it is called as set variable so I will select set variable now it is asking me that unch which variable do you want to change I want to change the view count variable so I will search for that and I will make this thing right here now it is asking me that an I understand that you want to make some changes to the view count now tell me what is that change so in figma's world this is how they talk they say that this is my view count take this view count and change it into view count + one if I need to increase the view by one this is what I'm trying to do right so I can't really talk in a normal language to figma I can say that okay add one to the view count no in figma's mind this is how we communicate make view count equal to view count + one and this is very similar to how we used to code in C++ so once I selected my view count now it is saying two again I will search the word view count and then make this + one now what exactly is happening right here I am telling figma that figma if I click on ADD views button on click you need to change a variable but figma calls it a set variable so figma on click you need to to set a variable which is that variable The View count variable but what do I need to do to this view count nothing much you need to convert it into view count + one now I will press enter now the interesting part is that if I were to take the slide five create a flow starting point I will see a small play button right here I will click on that and I will have the inline prototyping preview now if I were to scale this and press on ADD views you can see that the view count is improving and changing crazy no like this is super cool now what if I want to delete views I'm clicking nothing is happening so I will close this I will go to my delete views select my auto layout click on Plus on click this time again I will write set variable okay and now I will choose view view count and then again again view count to view count minus1 I'm not writing 9 + 1 I'm not writing Tri 9 minus1 I'm saying whatever the variable it may be you take that and you subtract one now when I open this prototype see what happens deleting views will reduce My Views adding views will do it this way now I can also close this and let's just say I decide I make this as add 100 View views okay and delete 100 views let's space these out and by the way I'm switching in between uh design and prototyping mode by using shift E I mean you already can see all of the keys I press but yeah just in case I can again go to my interactions and this time make it plus 100 I can go to delete views and select my button go to my set variable and make this Asus 100 100 now when I open my prototype I can add 100 views and let's see what happens when I go to zero it goes to minus one right now how do I stop here that is the entire concept of conditions because if I were to show you this menu again here you have set variable and you also have conditional where you have if L's loops and this is something that we will cover in our prototyping I don't want to like confuse you right now because this is more than enough and folks if you're here for the first time if you haven't really you know covered our syllabus properly this course will not help you see I work so hard to make sure that there's a proper step-by-step guide for it but if you're here for the first time I would first recommend you to watch this video which is a step-by-step road map on how to become a ux designer where I tell you the degree the age the laptop you need average salaries how to get internships the entire road map is right here then if if you have already started learning ux and you're not able to get a good highp paying job or if you're not able to get a good internship then we have created a video that is called Insider tips for getting a ux design job very very important video if you're not able to make money I regularly recommend people to document their learnings if you are not in the habit of documentation I'm telling you you will lose out I document all of my learnings on a tool called notion I have created a video on my YouTube channel where I teach how do I use Notions so that video is right here if you really want want to write a proper proper case study if you've already done a lot and you're applying for jobs you will need at least three good case studies we have created a playlist which is the ultimate 2023 ux case study guide I'm 100% confident that this would be very very relevant in the year 20124 as well where I take every single concept inside a case study and sort of give you a proper prescription if you're here for the first time we have created detailed courses proper playlist on ux design Chad GPT mid Journey everything is easily access ible we have launched a website called learn uiux doin I've already mentioned it before that has a 9e syllabus to become a ux designer if you're interested in learning about AI tools we've launched how to prom. in that has all my top AI tutorials and courses on chat GPT and mid Journey it has official documentation links it has my favorite AI tools it also has an ebook completely free where I've given a list of prompts that you can use to save time and be more productive as I always recommend recommend you really really have to finish at least the 15 episode course that we've created on ux design and if you're interested in AR and VR we have actually created a course which is on spatial design and trust me when I say this if you understand spatial design you're going to be in so much value in the next 5 to 6 months you will come back to me and thank me that an thank God you recommended us to learn this subject and folks while you're on this journey I know that a lot of you aspire to become a great ux designer but a lot of you run out of patience it takes at least 6 to8 months just to learn the tool another 6 to 8 months just to learn the subject I will not give you false hopes because I've been through the Journey so I wish I had a senior who would tell me the reality uh that's why I want to tell you the reality up front now if you want to get maximum value out of this episode you need to do your homework I would recommend you to go to help. figma decom and actually read the documentation they've written for variables because it will take some time to understand how this works recreate any component that you'd like using all the four variables that I've taught you document your learnings on LinkedIn and tag me I always love every time you folks tag me in your notes it's really really nice if there's any video that you haven't covered in the previous lectures please finish that and make detail notes on notion our next lecture is going to be on Design Systems but I will not release this video Until unless I get 1,000 likes within 5 days of upload and 500 comments within 5 days of upload yes if you want me to work so hard I want you to do an effort as well this is a two-way streight otherwise YouTube will not even know that this content exists on the internet so I need you to engage with this content so that YouTube gets to know that this has to be spread across to more students with that being said I'm so so happy that you've made this far I know this video was supremely long but to be honest I need to make sure that I cover every single detail in a way that anybody could easily understand let me know in the comment section if there's any specific top IC that was complicated or too confusing in the variables video I will try to make sure that I can clear those doubts in the upcoming videos with that being said I hope that you're taking care of your mind and body this is your those an mea signing out if you like this video make sure you click on like and hit the Subscribe button I regularly upload videos on ux design marketing and storytelling

welcome to the foundations of figma our most in-depth figma course for beginners today we will learn the basics of variables inside figma this is a new feature and many students get confused with it today I will simplify variables and also show you practical examples my name is an mea and I teach students design and AI this is lecture five of our 10 lecture Series so without wasting any further time let&#39;s get [Music] started [Music] all right so let&#39;s get started before moving forward I just want to make sure that we are very very clear about the fact that this entire course is not a ux design course this is a figma course there&#39;s a big difference so this is where I teach you what exactly is figma and how do you use different features of figma even if you know figma into to end you will not get a job so you first need to learn the tool which is figma and then spend time learning ux design which is the subject you will get hired if you understand ux design but of course you can&#39;t start learning ux until unless you know figma and that is what this course is for you are watching lecture number five but before lecture number five I have already uploaded four lectures on the YouTube channel all are for free in lecture number one we did the basics of figma in lecture number two we did frames and auto layout in lecture three I discussed Styles and Library which is a very very important video and in lecture 4 we discussed how to make components and variants now if you haven&#39;t seen even a single lecture I would recommend you to please start from lecture number one once you finish lecture number five if you&#39;ve missed any video so far please make sure you watch them because this is a very very well planned Series so when I&#39;m making this video I am assuming that you&#39;ve completed all of your syllabus so far now if you already know figma and if you&#39;re interested in learning ux design in specific spe ific as a subject then I have launched a free course on learn .in it is a complete road map to a ux design career where I&#39;m very very honest and absolutely clear about the expectations how do you apply for job average salaries how do you apply for internships jobs every single thing this is a total total 9 weeks syllabus uh but if you do the additional modules as well then it would take you almost 9 weeks but trust me when I say this if you follow this road map on learn .in you will have nothing left you will know absolutely enough to apply for your first well-paying ux design internship now that I&#39;ve set the context let&#39;s move forward today&#39;s syllabus is split into three modules in model number one I will explain you what exactly are variables and why do we even need them if you already had color styles then why did we need variables in the first place second I will make you understand the different types of variables because a lot of students think that variables is just a modern version of style styles were absolutely logged for say typography and colors and shadows but variables are more than that there are more types of properties that you can store inside variables so I will take you through all the different types one by one and their use cases as well as to which type is used for which purpose and in the last module we will go through some practical examples and also try variables in a simple prototyping examples now throughout this video I will be zooming in if there&#39;s anything important to show if I press any specific key you will see them on the top right corner so at any point if you feel confused as to what did unch press you have all the clarity building your own chat GPT Bots understanding AI Automation and learning the most valuable tips and tricks in the world of AI these are just few of the topics from our agenda for our AI meetups in Delhi on 2nd December and Hyderabad on 3rd December you will not only network with me but also meet Mr Ajay yadav who&#39;s the co-founder of simplified here is what our attendees had to say from last time the Meetup was pretty amazing I came from Mumbai to visit this Workshop was very crisp and to the point there was lot of learning that I can take away it was very informative I was one of the people hated using AI but now I think I&#39;m going to be the convertible one big thumbs up it was great for me trust me this time the event is two times bigger because we will have live master classes networking High te and a lot of live Q&amp;A between the audiences me and Ajay yadav who has literally built a supremely successful AI startup both AJ and I have been collecting resources road maps and proper techniques that we want to share you in our Meetup in both Delhi and Hyderabad if you&#39;ve been following AI news you know what all has changed in the last 1 month with the App Store coming in the revenue sharing in model Everything Will Change in the next 2 to 3 months and if you want leverage then you need to be prepared for it there are limited seats the links are in the description I will see you in Delhi on 2nd December and in Hyderabad on 3rd December let&#39;s start with module number one as to what exactly are variables now before I get into the discussion of variables I need to quickly revise what we had discussed in lecture number three which was around declaring Styles when we were learning about Styles we touched this topic of design tokens now if you don&#39;t know what are design tokens let me quickly explain it to you in a UI system and when I say UI system I basically mean a system of colors that are used to design a screen there are a limited set of colors and the designer has to choose from those colors let&#39;s just say that in my UI design system I have a blue color now the root value which is just a fancy word for the hex code value is 7f 56 D9 straightforward but as a designer I can&#39;t communicate saying can you please use 7 f56 D9 so I basically need to give it a name let&#39;s just assume that this hex code is now given a global name and we will call this as blue 100 makes sense now this blue 100 can be used in my UI it can be used in my marketing it can be used somewhere else as well so the same color can be referenced into something else as well so This Global name which is blue 100 can now have another layer on top of it another reference on top of it specifically for say the UI system and let&#39;s just say that in my UI system I use the blue color as a brand color assume that you know maybe you designing a social media website and you have decided to use this one specific color as the primary color so I will probably name this as UI primary 1 now even within the UI primary 1 I can re recycle this primary one color for different use cases for example on the left side we have a popup and this popup is from a free figma community file called Untitled UI file so you can obviously you know go and practice the same this UI primary one is now being used for a check icon but it is also being used for this modal text now what&#39;s happening is that you had one single color you first named this as blue 100 then you&#39;re referencing the same thing as U primary one then this thing is also being referenced into two different ways and you know there&#39;s a proper principle behind this we covered this in detail in lecture number three in the Styles and libraries episode so I&#39;m just revising just in case you forgotten this entire process of referencing colors comes under the subject of design tokens and you see these names right here these are called token names now why would I need this because if I have to change say just just the check icon I can take this Branch then connect it to some other color maybe a gray color but let&#39;s just say that if I ever decide to change blue 100 this change will reflect everywhere else so of course this is a very good way to have systems now the question is how do you achieve this feature inside figma where I have a hex code and there&#39;s a name for it this level one of referencing was possible using Styles now how did we make Styles I would go here click on this four icon click on this plus icon and then by default it asks me to declare a variable when variables were not there it would ask me to convert this into a style so I can literally put a name to this color I can say blue 100 okay I can also add a description and I can create a style but now if I need to have another Style say UI primary 1 I can&#39;t link it to Blue 100 I would have to again go here and again sort of detach this again go here click on plus go to style and make this as UI primary 1 now what exactly is happening UI primary 1 in my Styles is a completely different entity from Blue 100 which means that if I had to change this blue color I will have to make the change two times I will have to go to primary one as well and then I will have to individually change blue 100 as well which is really annoying this is not what I wanted I don&#39;t want like this one single referencing I want this multi-level referencing now this is one of the features of variables people think that this is what variables are for for saving colors on multiple levels that is not true variables has a ton of benefits being able to have one color being referenced in multiple layers is just one of the features so let me go back here and delete this color and let me delete this style as well so as I said why do we need variables number one is of course I can have multi-level connections which basically means I can have one single color value and a bunch of other things and I can reference them another benefit is that when we were talking about say color styles or type Styles or shadow Styles there were limitations right here I can actually store things like strings and numbers and quantities so you can store values that are just beyond your basic types and shadows and colors because there are so many other things that you need to save and you know keep consistent in a design system I know that most of you are beginners but a lot of you would have tried making UI in different themes when that happens when we only had Styles we had to declare a different palette for a light theme different palette for a dark theme and it was just like so difficult to sort of switch between light and dark theme here you can switch between those themes very very easily in fact you can switch between multiple themes in fact using variables you can switch between different devices as well so the responsive design aspect of things also becomes very very easy where you have one single component and if I were to take that component and drag it into different frames it would automatically change from its web version to you know a mobile version to a tablet version we&#39;re not going to cover this today because of course we have like limited time and I don&#39;t want to overwhelm you but I&#39;m just making you understand as to what all are the possibilities if you understand variables if you use the text or the string based variables you can actually have your UI being converted into different languages as well so you will have one single button and that one single button can be in Hindi English and French but all three buttons would be connected to a single instance now you would be wondering that an you&#39;ve given so much of theory tell us what exactly are variables and how do they work let me first make you understand that variables are not just about colors there are four types of variables one is of course the color but the second is number where you can actually store number values just to give you a quick example let&#39;s say that I am following an 8 pixel Grid or like an 8 pixel rule where all of my popups or my corner radi are going to be in the multiples of 8 now if I have a table of8 which is you know 8 16 24 32 that way I have a limited set of numbers no person should be able to use the number nine correct this eight number it can be used for a border radi it can be used for any other shape and size it can be used for a pill height as well so the number eight itself as an integer can be referenced for multiple usec cases that is why variables also allow you to save numbers you can also save strings which basically means that you can save titles names phrases and words like single words or maybe you know even two three words together but I would not recommend you to use this for paragraphs but yes sometimes you have headings that you want to be uniform across all popups let&#39;s just say you have 50 popups and all of those 50 popups the color is changing the height is changing but the headline says attention now if somebody comes to you and says that anch moving forward we will not have our popup say attention now our popups will say caution so you&#39;ll have to individually go and change all of those copies or you know there were some plugins where you could do like contr f across figma and change that but in variables you can actually store that headline as well which means you&#39;re actually creating a component of all the text as well variables are nothing but basically component for things that were not even possible before so you are componenti number values you componenti headings and I know that I&#39;m just verbally explaining this right now in in module two I will show you how these work but I&#39;m just sort of setting context see I know that this video is going to be long I will have to recommend you the fact that You&#39; have to watch this video at least two times because the entire concept is very very fresh I have been in this field for so long and it took me at least a week to understand how variables work so give this time give yourself you know patience and understand how this works and trust me you will get it the last variable type is a Boolean where you can just have a zero or one value or a true or false value not on and off but they just use the word true and false so this is one very important thing that sometimes you want to hide something or you want to keep something you know it is either there or not there so I&#39;ll show you how Boolean works but basically these are the four variable types now you can reuse the these values again and again and just like Styles and components when you create these variables they become a part of your library so if I have a design system Library where I&#39;m declaring all of them once I publish that Library all other files that have that Library enabled will have access to these variables now folks before I move forward I want to give you a very strong reminder that we will not upload the next lecture until unless we get 1,000 likes on this video within 5 days of upload and at least 500 comments within 5 days of upload because I put in a gap after lecture 4 I was feeling like you people are not even watching or you&#39;re not like engaging with the video but if you&#39;re enjoying this series I want your feedback I want your proper good feedback in the comment section so once you finish your video make sure you contribute to the th000 likes and the 500 comments otherwise I will not upload the next lecture I&#39;m not kidding I love the subject but I want to make sure that you guys are supporting us because we work so so hard to make these videos come to life with that being said let me come to module number two where we understand the types of variables that exist now the simplest type is the color variable now instead of talking about it let me show you how the UI looks like to get my variables option I have to click outside the frame into this UI area which is my blank space as soon as you do that on the right side you will have the page settings where you can change the background but you will also see this option called local variables if you you click on this icon right here you will have this menu open up now you can take this menu and also resize it just like this so I can take the corners and resize it in the way I want right now this feature is in beta mode as of 18th November 2023 so there might be some bugs but overall 70 to 80% this works pretty well now let me break down this entire UI for you here you&#39;re seeing all variables but on the very top you also see this word called called collection one now you remember when we were talking about Styles I said that in a design system you can have a set of 10 colors that are only your primary colors you can have a set of colors that are only your gray colors you can have a set of colors that are only your semantic colors then you can have another set of colors just for the text so when I say this set of colors okay imagine that this set is now being called as a collection and now instead of styles I will call this as a variable so now we are slowly evolving from having a group of colors to having a collection of variables so that is the lingo that is the vocabulary that I will use moving forward now if I click on this three dots right here I can rename this collection so let me call this as Primitives okay this is where I will declare all of my b base colors that color palette that we had declared in our Styles you know that zero to one thing where we started from White and we went to Black let me declare those okay now let&#39;s assume that instead of doing things here if I had styles with me I would probably do it this way right let&#39;s create five boxes this one can be F this one can be gray this one can be a darker gray and then this one can can be even more darker and this one can be black okay now I will take all of these and when we had Styles what did we used to do we used to do command slash we used to sort them using the sorter plugin and then we used to batch rename this and maybe make this as gray dollar sign one okay now in reality I would make this as you know base one mid and contrast but I&#39;m just sort of just to simplify things let&#39;s just name this as gray 1 to gray five and then I would declare them as styles but now I can go to my variables create a variable and as soon as I click on the create variable button I get four options right now we&#39;re starting color variable so I will select color as soon as I do that I get two columns here one is the name of this variable and the value stored inside this variable so let me call this as gray one and here I can go select my ey dropper and choose this color right here now this was F so this is pretty straightforward but I can now click on create variable again and then click on color this time call it as gray two go here and choose this one okay again let&#39;s this three go here Cho this one go here make this four Cho this one five and one all right so now I have all of my gray sorted now let&#39;s assume that these Grays are used for three purposes number one purpose I am using this for my surfaces number two purpose I&#39;m using this for my text could be a heading subheading and you know maybe bullet points and the third purpose could be for illustrations okay because they are pretty simple straightforward colors this is where the fun part begins now if I am in my Primitives Library I can of course create a new library which is not about my Primitives but now this is for my surfaces I can go here click on this create collection button and this time I will call this as UI pallet okay and I can switch between my UI pallet and Primitives now if I go to my UI pallet I can literally create a variable and this time let&#39;s just say that in my design system the way I name my colors is surface one Surface 2 surface 3 I can go here and type surface one this is where the game changes let&#39;s say that I want my Surface one to be of this color now if I were to connect this with this color and not to my Primitives I&#39;m basically doing the same mistake that I used to do in styles that my Surface one and my gray two are separate entities but now if I go to my value and right click I have an option that says create Alias if I click on create Alias a popup opens up where it either says that you can select a custom color which I don&#39;t want that I can click on libraries and here I can find my Primitives collection and in my Primitives collection I can select grade two now do you know what is happening right here the fun part is that I just created branching so you remember that thing where I said that this can be one color it can be branched in another way and it can again be branched in another way so you had the root value right here which was then let me bring out the pencil this color was first branched as gray 2 and now this same gray 2 is again linked to my Surface one now I can do this again and again and the fun part is that if I change this color right here my changes would be reflected everywhere else so you remember this thing right here this was not possible with Styles but now it is with my color variables now the interesting part here is that to make variables really really useful you need to understand collections as well and I think that is pretty straightforward what I can do is in my UI pet I can also create another variable and this time I will call it as text primary now in my text primary I don&#39;t want this to be white I basically want this to be black why because assume that I&#39;m creating a light themed app so if I&#39;m creating a light themed app if the surface is so light that the text has to be dark I will right click again create my Alias and this time I will select gray five now this is very very cool because now all of my colors are linked to One Core Library so everything is very neatly arranged now the fun part is that let&#39;s say let me delete all of this if I create a frame and let&#39;s say I create a popup that looks like this I can go here instead of having a normal hex Cod code I can click on my four dots and I can find all of my Primitives right here when I say Primitives is basically all the variables now I can either choose gray one or gray 2 or I can actually go to my UI pet collection and select surface one this is the right way to use your colors if I were to choose gray to then I would have committed the same mistake but now I can select surface one now the fun part here is that if I come come back to my Primitives if I were to any day change my gray to it would reflect everywhere else so you can imagine how cool this is now if I were to go and select a text layer that says hello I can increase the size and again go to my four dots and this time select text primary so it&#39;s just a 100 times better way to sort of organize your things neatly now the interesting part here is that let&#39;s assume I have created the these Grays then I went to my UI pallet and I have my gray two linked to my Surface one correct surface one is available in this entire list so if I were to go here in my text if I click on this option in my UI pallet collection I can still see surface one logically not even logically even if I were to follow the system that I have created I don&#39;t want this recommendation of surface one for my text because I want only text colors to be accessible when I am reang or recoloring my text this is where the concept of scoping comes in let me show you how this works so I will come back to my UI pallet collection and if I go to my Surface one in my value I have gr to but right next to my value I have this thing called as edit variable as soon as I do that I open a new window where I can change the name I can add a description change the value but I also see this option called as color scoping this is figma&#39;s way of asking me that anch where exactly do you plan to use this color and let&#39;s assume that I only plan to use this in fills okay within fill you have an option to tell figma whether I will use this for a frame or a shape or a text or even a stroke now if I unselect text if I unselect stroke then I will not see this inside my options when I&#39;m trying to add a color to my text similarly if I go to my text primary click on this icon right here this is a color that I have chosen for text primary so what I will do is I will uncheck fill all together and only select text and also unselect stroke when that happens even if I&#39;m selecting a surface right here if I open my color panel in my UI pallet I will not see Tex primary this is insane right now you will not be able to understand its value but I&#39;ll tell you what happens when we were creating Styles I used to get so many of these color lists right here and I used to wonder that dude it has become so difficult to scroll through this list it has become so difficult to search through my colors because you know there were so many overlapping words but now with the concept of scoping this entire thing has become Supreme supremely easy to scale and maintain isn&#39;t this absolutely amazing let me know in the comments section if your mind has just been like in a seeing how useful this would be now this first type of variable which is a color variable is pretty simple to understand and I keep seeing a lot of people just talking about the color variable the next type is a number variable now to make you understand why do we need this I have a screen in front of me and just assume that you know probably I will be having my own app where I will be you know uploading all of my courses in one single go and I have the screen right here and here you have one recommendation and then you have resume watching now let&#39;s assume that I have this component right here and even though this is not a very practical example I am just taking this example just to prove a point okay I&#39;m going to keep this right here and let&#39;s assume that I want the beginning to say zero views okay so the start of the UI should always say zero views now of course by default the copy says 24,000 blah blah blah this is where number variables can help me so I will go here click outside go to my local variables and here in my UI pallet or my Primitives I can literally have a new variable added however I will not do this in my Primitives because this is a value that I am using on a component level so to make things way more organized I will create a new collection and this time I will call it a as component data okay in my component data I can create a variable and this time I will select the number option here I can say default views okay and notice how I&#39;m using Dash if I use the word slash then it would have grouping inside a collection as well we&#39;re not covering that today but I&#39;m just letting you know now the fun part is that I can select this text layer right here which is called 24642 views and on the right side where you have your type settings you have this small diamond button right here which is the option to apply a variable as soon as I do that I will have default views right here now the mistake that I have made right now is that if I select default views the entire text layer has now gotten converted into the number zero but I always wanted it to be some amount of number digits and then the word views this is where you need to start building a habit of organizing your text in Auto layouts now what do I mean by that this is a wrong way to organize your views the correct way would be that I would detach this instance go here and first of all if I take this text layer right here in my layer by default the layer name is the copy that I have added into my text the correct way to design your comp components is to double click and call this as video title then here I should duplicate take these two put them into Auto layout maybe add a four pixels Gap this thing right here should be called The View count and this two should be called term views why because I will hard code this to be views now if I take this thing right here click on this diamond button and then click on default views now this number right here is attached to this which means that if I make this 100 this would become 100 views okay if I were to delete this right here and keep this this is the right way to actually organize your components now the fun part is that let&#39;s say I have the word resume watching okay and assume that I keep this thing right here this this is say a phone okay and I&#39;m just like making this in a very very rough way but just to prove a point but let&#39;s just say I keep resume watching like this then I also create a version for the desktop where I have it in my wide panel and then I would probably make this into a different style maybe like have like a really big heading and keep this this way okay so on my phone and on my web I I have used the word resume watching and let&#39;s assume that I have multiple files like this so maybe you know the same thing is being the same component maybe is being used in a central way or in a story you know whatever it may be and let me just change the background color so that it&#39;s very very evident so I&#39;ll just make this as say you know this color right here now this resume watching it of course has a type style the type style is declaring the font the weight and all of those things but I&#39;m saying what if I want to componentize this phrase resume watching what if 6 months from now a PM comes to me and says that unch instead of resume watching we have to make this resume learning as soon as I do that I would have to literally go and type this as resume learning in every single place now of course I could have fixed this if both of these things were into a component or if I had component properties but now I can actually save this thing right right here and you know have that change reflected everywhere else but here is the caveat in my resume learning the phrase is actually a string in this case when I was actually adding a number this was an integer so a string is made up of alphabets and alphabets are called characters so basically when I say the word views and let me just detach this the word views is a string and this string is made up of five characters V is a character I is a character and so on now this is actually a number and this is a string so if I have to componentize this phrase right here I will have to go create a variable and choose the word string and I can call this as resume heading okay and I will call this as resume learning now I can go here and then apply my variable right here so I can take this take this take this one and I think you can&#39;t do this on multiple Styles so let me just make this one by one and here you go now when that happens I can say continue con continue and it would reflect everywhere else right now a lot of students asked me that an how is this different from a component property a component property can only be added to a component correct which means if I had to use a component property I would have to make this string right here a part of this component declaration but in a UI you have so many things all over you can&#39;t make a component for everything imagine the amount of clutter you would have in your library moreover in a component property you have multiple strings for a single component which basically means that if you have an input field the input field has one label and that one label the placeholder is label but the label can be first name last name email so you have multiple variations of the label so when you have multiple variations of the label you will use a component property because it has been declared as a variant somewhere else in this case this is for dedicated integer values or dedicated string values that are just Standalone headings these are Standalone sentences you don&#39;t have to make them a part of some component so when we click on create variable I explained you color I explained you number I just showed you string and just to quickly revise what we&#39;ve studied let me just bring back the slides right here and let me take this window right here you can store numbers and then reuse those numbers for whatever case you want for example let&#39;s say that I have decided that all of my corner radi is going to be five pixels so let&#39;s just say I have a bunch of popups one popup is this uh then you have some notification U then you also have some small button okay and I will take all of these let&#39;s have them align and I want to keep all of them as five pixels okay and I have decided a rule that it&#39;s going to be in multiples of five okay what I can do is I can go here create a new collection and maybe call this as either primitive numbers or I can delete this collection and then go back to my Primitives and just save here so I can literally have three phrases okay I will go to my number I will call this as small okay the other one can be as medium and then I can also have large okay this can be five and instead of making it five let&#39;s keep it four so that it&#39;s more practical let&#39;s keep this eight let&#39;s keep this as 12 now now I can take all of these things right here instead of manually adding the number right here if you hover over this input field you can now apply a variable so I can go here and choose small and then all of my buttons popups everything is now linked to this quantity right here now the fun part is that this is not just restricted to Corner radias no you can use this for many many things now the question is an how do we decide that where all can this be used the easiest way is you check out the scoping if I go to my scoping settings you will see that you can use this for Corner radius width and height Gap and text content so the fun part here is that let&#39;s just say I have another one let&#39;s call this as medium height okay and I will make this as 32 okay I can take this popup right here go to my height choose this and select medium height that way if I&#39;m making a pill I have actually componentized the height and the corner radi and you can do the same with width as well so imagine the kind of systems and organizations and uniformity you can have across your UI because this was unheard of componentized these values this was not possible ever so just to quickly summarize you can have as many numbers as you want and of course you know when we do advanced level videos these are just basic videos because I just want to show you you how do you create these in figma we&#39;re not discussing how do you use this in your Design Systems because obviously this entire video is going to be for more than an hour I will need to spend another hour just explaining you how do you use these in your day-to-day projects right so for now you know let&#39;s take things slowly let&#39;s understand how do you even declare these variables in the first place the next variable that we discussed was a string variable where you can declare content and the fun part now is that you can also have modes now I will not not do a lot of discussion on modes right now simply because it is a whole new topic altogether as to how to use modes but the interesting part here is that let&#39;s say you have an app which is in both light theme and dark theme okay and let&#39;s just say I take this cover right here and let&#39;s just have this Frame as my light theme and then this Frame as my dark theme now if this component is the same all I need to do is switch the colors okay let&#39;s just say I take this thing right here I will detach and I will add a color which is gray too okay I will take all of these detach all of them and maybe make these as gray three okay let&#39;s delete this one now this works well on a dark theme but this would obviously not be legible on a light theme now my first solution would be that hey why don&#39;t I just go here and instead of gray to make this gray five right that would be the easiest way to fix things but then that is making no no sense at all because you have all of these Primitives getting jumbled up like there&#39;s no logic behind it the right way would be I will go to my UI pallet and I have text primary let&#39;s say I create a new variable and this time I will select color and I will make this as text secondary okay text Dash secondary I will click here create an alias and I will select gray three okay if not gray three maybe you know probably I don&#39;t know yeah actually let&#39;s just keep gray three okay you can see that the text primary is a black color and text secondary is a gray color which basically means that I can only use this for a light theme so if I go here and make this text primary and go here and make this as text secondary this looks well okay so right now my palette was created for a light theme but if I take this on a dark surface not legible what I can do is I can click on this plus icon right here and as soon as I do that I have two modes of the same variable now this is a game changer you will absolutely love this I can call mode one as light and more to as dark and here in my text primary instead of linking it to gray five I can link this to gray one and here in my tech secondary instead of making this gray three I can make this gray too now the fun part is that if I go back here you will realize that anch you you have already selected text primary then why is it not showing the white color like it should show like light or dark right so how do you switch in between this to switch from one mode to another you have to select your entire component or instance and right next to layer you will find this icon right here where you have overlapping hexagons if you click on the overlapping hexagons you will find UI pallet and inside UI pallet you can switch between light and dark so if I go do dark you now have one single component that has the same variables by the way it has text secondary text primary but now they are getting linked to different Primitives so I have the same color of Grays which are being referenced in different ways across light and dark theme now another crazy feature right here is that let&#39;s just say I have two apps okay this app UI is for the light theme and then this app is again for a dark theme you remember what I had to do I had to take this thing right here again switch this thing then go here switch from light to dark the fun part is that you can take a frame and allocate a theme and I will use the word mode because mode is the right word for it but we using it for themes I can select a specific frame and then allocate a mode to this Frame which basically means that if I select this thing right here and put something in this Frame right here select this Frame go to my layer and then choose dark it would automatically switch so I can take another copy and it would automatically switch from light theme to Dark theme and this would work for any other component so let&#39;s just say that I have a button okay I will create a button and this button can have a six pixel radi and here it will have the word click me okay I will take take these two put these together make this into a component and for my light theme let&#39;s just call this as say I&#39;ll create a new color I&#39;ll call this as button primary BG okay let me make this as BG and in my light theme obviously I&#39;ll go here and I can select gray five because that is the color that I want and in my dark theme I want to make it pitch white okay I will go here select this and type button primary BG in my text I want to keep this as text primary okay now if I take this thing right here and go to my UI pallet and select my light theme you realize that nothing has happened why it hasn&#39;t happened because my text primary is actually black so then I will have to create a new color token and when I say the word color token it&#39;s actually a color variable I will make this button primary text because this is still black but I don&#39;t want it to be black right so I can create an alias and this time I can make this as gray one okay here I will create an alias and make this the color black now here I can actually go and say that I only want this to be used for text okay here I will go and choose button primary text now folks if I have a button right here that has a button primary BG that has gray five black color in light and white color in dark and the text is also inverted what I need to do is take this out and on the very right side you have this button right here that has overlapping hexagons if I choose Auto instead of specifically saying light and dark if I choose Auto and if I drag it into this Frame it would actually change themes automatically now in a lot of cases what happens is that people would duplicate it and then once they go here instead of Auto they might might have selected light or dark or whatever it is when that happens this feature would not work so if you want this to work properly make sure that you have it selected at dark this Frame also needs to have that specific value so it has to be either light or dark so you know you have to make sure if if you switch this to light then everything gets messed up so this has to be dark this has to be an auto this has to be an auto and that is why you know it&#39;s working pretty well but this is very very useful when you&#39;re sort of design in apps that are across you know different themes now we come to Boolean variable now of course the entire concept of Boolean is that it can either have a value of off or on now if you go to create variable and select a Boolean let&#39;s just say I have the word say switch okay and let&#39;s just say that we have some feature right here where I know I know that this sounds like a very weird feature but in my light theme we keep an ie but in my dark theme we probably have have you know this as off okay and I just don&#39;t want it to be in my light theme now if I want to toggle this visibility I can actually have the word switch and when I use the word switch I&#39;m basically saying the word token in light theme this can be on in Dark theme it can be off now if I want to apply a variable specifically the Boolean variable onto the visibility there is no hexagon icon readily available so I&#39;ll have to right click and then select my switch option now the interesting part here is that I can of course go here also take this entire thing and right click and make it switch so of course it would go away but you can also sort of make this automatic so if I were to take this thing right here the visibility would go on and off so Boolean right now is only useful for either visibility or for you know triggering certain actions in the prototyping mode okay there&#39;s no other practical use like it is mostly heavily used in prototyping otherwise if you&#39;re talking about UI design it is mostly to toggle things on and off there&#39;s not much benefit to it right now we also spoke about collection within a collection if you use the slash convention you can also have these organized in a group right so you have these Collections and then within collection you can have color within color you can have gray colors and the brand colors you know very very similar to how we used to you know declare our Styles and just wanted to like put these names out there because in the upcoming videos I will be using the word colors and groups right so within collections you have groups within groups you have variables variables are actually names for a specific hex codes right and then what you can do is you can have different groups for your spacing and radius so you have one Primitives and then within Primitives you can save your colors in this group then just your spacings and just your radi because as I said you can use as an auto layout as well right the concept of Alias have already covered that you can write click and choose those colors so I think that would be sorted and of course you know this is how people put it so if you have a group called spacing within spacing you have excess you have SM so you know there are multiple namings for this right so X is extra small SM can be just small MD can be medium and then you know this thing right here these can be some numbers that they have probably declared in their primitive so they are in their tokens collection but maybe their radi their border radi their spacing all of them are sort of you know taking numbers from a specific Library there&#39;s a proper proper logic behind it this comes under the subject of Design Systems and ux design which you don&#39;t want to cover right now otherwise the video will not even end now a very very important doubt that a lot of students have is that anch what exactly is the difference between Styles and variables right in Styles we were just restricted to type faces shadows and colors and when you declare a style I can actually take this thing right here go to the icon click on Plus in my style I can actually add multiple layers on top of this so you can actually have layering inside Styles right this is not possible in a variable you cannot have multiv values you know like overlapping properties in a variable Styles can have that so style can have an image also it can have a color on top of the image also but when we talk about a variables it&#39;s a Concrete value it&#39;s a proper individual value and of course inside variables you can store integers as well there was no aliasing in Styles you cannot have multi-level differencing in Styles but you can do that in variables and the most crazy cool feature is that there&#39;s no scoping inside Styles right but as I showed you you can have proper proper scoping inside variables like you can literally tell figma that these properties are only going to be used for either text or stroke now folks to do this thing practically there&#39;s a figma file which has been uploaded by figma on their Community it says get started with variables I don&#39;t want to cover this in this video because we&#39;re already you know exceeding time so I just want to cover one single examp example but I&#39;m just letting you know that this file is very very important now I will give you a glimpse of prototyping with variables okay so I have a component right here I have created one button that says add views I have another button that says delete views I&#39;ll tell you what I need to achieve if I click on ADD views the number should increase if I click on delete views the number should decrease okay so most importantly I have my number right here so this would be called as views and this would be called as term views and let&#39;s just make this as view count okay this add views should trigger an increment in this number right here so my step number one would be to go to my local variables and let&#39;s create a new collection I will call this as prototype okay I will create a new variable and in my number I will call this as view count okay let me just fix the spelling and here I will make this as 999 okay now I will go to my view layer right here and instead of having a normal number I will call this as view count okay this Thing Remains the Same now this is where things become super super cool you will not believe how crazy this is I will switch to my prototyping mode okay and let me just delete if there&#39;s any Behavior whatsoever because I was trying this out so if I enter my prototyping mode I have to click on my interactions okay here on click I have a couple of options okay now if I were making a normal prototype I would choose any of these options and by the way folks don&#39;t worry we will have a dedicated video for prototyping as well for now just watch this you don&#39;t have to implement just watch okay I need to tell figma that if I click on this button you need to make some changes to a variable now figma uses the word set variable it is essentially changing the variable value but in figma&#39;s world it is called as set variable so I will select set variable now it is asking me that unch which variable do you want to change I want to change the view count variable so I will search for that and I will make this thing right here now it is asking me that an I understand that you want to make some changes to the view count now tell me what is that change so in figma&#39;s world this is how they talk they say that this is my view count take this view count and change it into view count + one if I need to increase the view by one this is what I&#39;m trying to do right so I can&#39;t really talk in a normal language to figma I can say that okay add one to the view count no in figma&#39;s mind this is how we communicate make view count equal to view count + one and this is very similar to how we used to code in C++ so once I selected my view count now it is saying two again I will search the word view count and then make this + one now what exactly is happening right here I am telling figma that figma if I click on ADD views button on click you need to change a variable but figma calls it a set variable so figma on click you need to to set a variable which is that variable The View count variable but what do I need to do to this view count nothing much you need to convert it into view count + one now I will press enter now the interesting part is that if I were to take the slide five create a flow starting point I will see a small play button right here I will click on that and I will have the inline prototyping preview now if I were to scale this and press on ADD views you can see that the view count is improving and changing crazy no like this is super cool now what if I want to delete views I&#39;m clicking nothing is happening so I will close this I will go to my delete views select my auto layout click on Plus on click this time again I will write set variable okay and now I will choose view view count and then again again view count to view count minus1 I&#39;m not writing 9 + 1 I&#39;m not writing Tri 9 minus1 I&#39;m saying whatever the variable it may be you take that and you subtract one now when I open this prototype see what happens deleting views will reduce My Views adding views will do it this way now I can also close this and let&#39;s just say I decide I make this as add 100 View views okay and delete 100 views let&#39;s space these out and by the way I&#39;m switching in between uh design and prototyping mode by using shift E I mean you already can see all of the keys I press but yeah just in case I can again go to my interactions and this time make it plus 100 I can go to delete views and select my button go to my set variable and make this Asus 100 100 now when I open my prototype I can add 100 views and let&#39;s see what happens when I go to zero it goes to minus one right now how do I stop here that is the entire concept of conditions because if I were to show you this menu again here you have set variable and you also have conditional where you have if L&#39;s loops and this is something that we will cover in our prototyping I don&#39;t want to like confuse you right now because this is more than enough and folks if you&#39;re here for the first time if you haven&#39;t really you know covered our syllabus properly this course will not help you see I work so hard to make sure that there&#39;s a proper step-by-step guide for it but if you&#39;re here for the first time I would first recommend you to watch this video which is a step-by-step road map on how to become a ux designer where I tell you the degree the age the laptop you need average salaries how to get internships the entire road map is right here then if if you have already started learning ux and you&#39;re not able to get a good highp paying job or if you&#39;re not able to get a good internship then we have created a video that is called Insider tips for getting a ux design job very very important video if you&#39;re not able to make money I regularly recommend people to document their learnings if you are not in the habit of documentation I&#39;m telling you you will lose out I document all of my learnings on a tool called notion I have created a video on my YouTube channel where I teach how do I use Notions so that video is right here if you really want want to write a proper proper case study if you&#39;ve already done a lot and you&#39;re applying for jobs you will need at least three good case studies we have created a playlist which is the ultimate 2023 ux case study guide I&#39;m 100% confident that this would be very very relevant in the year 20124 as well where I take every single concept inside a case study and sort of give you a proper prescription if you&#39;re here for the first time we have created detailed courses proper playlist on ux design Chad GPT mid Journey everything is easily access ible we have launched a website called learn uiux doin I&#39;ve already mentioned it before that has a 9e syllabus to become a ux designer if you&#39;re interested in learning about AI tools we&#39;ve launched how to prom. in that has all my top AI tutorials and courses on chat GPT and mid Journey it has official documentation links it has my favorite AI tools it also has an ebook completely free where I&#39;ve given a list of prompts that you can use to save time and be more productive as I always recommend recommend you really really have to finish at least the 15 episode course that we&#39;ve created on ux design and if you&#39;re interested in AR and VR we have actually created a course which is on spatial design and trust me when I say this if you understand spatial design you&#39;re going to be in so much value in the next 5 to 6 months you will come back to me and thank me that an thank God you recommended us to learn this subject and folks while you&#39;re on this journey I know that a lot of you aspire to become a great ux designer but a lot of you run out of patience it takes at least 6 to8 months just to learn the tool another 6 to 8 months just to learn the subject I will not give you false hopes because I&#39;ve been through the Journey so I wish I had a senior who would tell me the reality uh that&#39;s why I want to tell you the reality up front now if you want to get maximum value out of this episode you need to do your homework I would recommend you to go to help. figma decom and actually read the documentation they&#39;ve written for variables because it will take some time to understand how this works recreate any component that you&#39;d like using all the four variables that I&#39;ve taught you document your learnings on LinkedIn and tag me I always love every time you folks tag me in your notes it&#39;s really really nice if there&#39;s any video that you haven&#39;t covered in the previous lectures please finish that and make detail notes on notion our next lecture is going to be on Design Systems but I will not release this video Until unless I get 1,000 likes within 5 days of upload and 500 comments within 5 days of upload yes if you want me to work so hard I want you to do an effort as well this is a two-way streight otherwise YouTube will not even know that this content exists on the internet so I need you to engage with this content so that YouTube gets to know that this has to be spread across to more students with that being said I&#39;m so so happy that you&#39;ve made this far I know this video was supremely long but to be honest I need to make sure that I cover every single detail in a way that anybody could easily understand let me know in the comment section if there&#39;s any specific top IC that was complicated or too confusing in the variables video I will try to make sure that I can clear those doubts in the upcoming videos with that being said I hope that you&#39;re taking care of your mind and body this is your those an mea signing out if you like this video make sure you click on like and hit the Subscribe button I regularly upload videos on ux design marketing and storytelling

Transcript for:Foundations of Figma Lecture: Basics of Variables

Transcript for:
Foundations of Figma Lecture: Basics of Variables