Figma Update: Variable support for Typography and Gradients!

hey guys what's up in this video I am particularly excited to talk about some of the new updates that figma has introduced with regards to variables so now variables can be used in your typography whether that's like font family line height letter spacing and a bunch of those things very similarly you can actually combine your typography variables with Styles and I'm going to talk about how that particularly is very useful as well figma has also introduced support for gradients and in combination with variables but it may not exactly be what you're thinking about so we're going to be covering all of these things in this video so let's get to the first one which is obviously the the most common one and I'm actually going to do these things from scratch so let's say you have a design or you have designs or you have a design system and you actually want to go ahead and use these things or use these updates in all of those different scenarios we're going to see how to actually go ahead and do them so the first one is let's say you have a design you have it responsively designed something like this and you want to go ahead and actually change the font size on different variants using variables or different screen sizes using variables so the first thing that you can do is you can open your variables and you can come here and you can create a number variable so for example I'm going to say this is going to be my heading size or something along those lines or H1 we can just say or intro H1 because an H1 in a blog can actually be different from an intro an H1 in an intro section so this is 72 so I'm going to say so first of all I'm going to say this is going to be desktop so on desktop this particular size is going to be 72 on mobile it's going or on tablet it's going to be 60 so let's go ahead and replace that with tablet and I'm going to say this is 60 and in the end I'm going to add another mode I'm going to say this is going to be our mobile size and on mobile I think it's 40 or something along those lines so let's say This is 40 so so now that that's done I can also just go ahead and actually expand this so you can see it so we have that set now we can obviously set the line height as well so I can say the line height and this is very important to understand as well apologies I actually accidentally added another mode this is really important as well so when you're actually including let's say a line height you're what you're doing is you are H1 line height let's just say LH a line height can can't actually be in percentages when you're using a variable so if I type 72 it's actually just going to be a number so if I want to use percentages I can't really use percentages with variables right now and in my opinion you shouldn't really use percentages with variables to begin with because when you're using percentages for the most part those percentages stay consistent across the different screen sizes so if you were to look at our design as you can see the percentage here is 110 it's 110% here as well it's 110 % here as well we do want to use these uh line Heights in fixed values we can obviously go ahead and set them we can say okay this one is going to be 80 maybe this one is going to be I don't know 60 or 64 or 68 and then this one is going to be 48 or 44 I'm just trying to again get it closer to the 110 percentage that I have here so I can go ahead and I can set that like this and we can just copy the style now we don't even have to and let me just obviously go ahead and change this as well to our uh H1 so I've done that so I've copied this text and I'm just going to go ahead and replace it here and replace it here so now all of these are using the actual uh Style with the variables or actual text with the variables on both those places and obviously you can have the text or a variable here as well you can have a variable here as well here as well and a lot of different places as well so you can actually go ahead and play around with that um but I think like the most use they're going to have are probably going to be here on these top three values so the font size the line height the letter spacing and if you want obviously the paragraph spacing but I don't think that's going to be likely so now you can just go ahead and change this to mobile you can change this tablet to tablet obviously and you just have one style that's being used and you can just directly update them now the use of this is obviously that you can easily update that particular variable value and you don't have to change a style for it or change multiple styles for it or change multiple places uh in which these styles are used so now let's come and talk about Styles now before we go forward I would like to let you know that I've recently introduced my premium figma Noob To Pro course that's going to help you take your design skills to the next level it has topics covering from the basics to Advanced topics like Auto layout prototyping components you name it so if you really want to take your design skills and not only just design skills but your earning skills and learning potential to the next level as well definitely go check out the course Link in the description additionally I have a voucher code for you guys as well especially my subscribers and viewers if you use the am subscriber voucher you're going to get a 50% off on that as well so imagine you have a bunch of styles like this which is display to XL XL LG MD so on and so forth so you basically when you're creating a larger design system or you're creating a design system for a larger application you usually have a bunch of Tex Style that you want to use now imagine and all of these textiles usually use a s like the same font like inter so what usually happens is maybe a client comes in and they're like hey I want to update all of the inter font to Roboto how would you go ahead and do that currently there's no way to do that if you're using Styles which is particularly why variables are going to be really beneficial here so I'm going to go ahead and I'm going to say create a variable here that's going to be our a string and I'm going to say this is the default font default font and the default font should just be actually since we don't really have desktop tablet and mobile variants for the default font I don't think this necessarily makes sense in this collection so I'm going to rename this collection and that's what you should do as well is maybe to something like responsive sizes and then I can go ahead and I can create a new collection and I can say this is going to be my fonts and in this particular one I can just create a string and I can say this is my default font I can have another font for let's say heading as well so I can create another string that's like heading font uh and then I can say Okay so the default font is like enter and I can update that to enter here as well so once you've done that you can actually go to your Styles IND individually and you can go here you can click on this particular button and you can use the default font enter here and you can use it in multiple places obviously here as well now I haven't really found a way to actually go ahead and update all these Styles immediately if I do find a way to actually swap the font to a particular variable using a plugin I'll let you know hopefully again a plugin is going to come up real soon this is a new feature so probably a plugin like this doesn't exist right now but it probably is going to come out soon so obviously once you go ahead and do that I'm just going to do that with these four values in the start now if a client comes in and they're like hey I don't really like this font maybe we actually want to use let give me some other font I'm going to detect a it as well maybe we want to use I don't know uh let's try something really drastic just or something along those lines right so maybe a client comes in they're like hey I don't really want that I want just so you can just update that Jost here and as you can see the four values are updated now so it's that simple if you actually just want to update them now in a combination with Styles so variables are going to help you do that basically so that's the other thing as to how you can actually combine variables with Styles which is really important now coming to gradients in this particular iteration you as you can actually see I have a linear gradient here that has that is using two colors now if I want to convert that to a variable how do you go ahead and do that unfortunately you cannot and a lot of people are actually going to miss that when they probably heard about gradients or variable support with gradients they thought okay I can now click the plus button and I can go to variable and I can create this particular thing and that's going to be great unfortunately no that's not how it's going to work how it's going to work is variables are still going to support only single value so I'm going to create a new collection here and I'm going to say this collection is going to be my colors so I'm going to say my let's say color is um top gradient color and then maybe a bottom gradient color bottom gradient color and what we can do now is we can go to this particular gradient and and I'm going to copy this color and I'm going to paste it here and I'm going to copy the other color and I'm going to paste it here so now what we can do is we can link these individual values to our color so I'm going to go ahead and I'm going to say that I want to use colors from my libraries which is obviously going to contain my Styles and variables and I'm going to say this is going to be my top gradient variable and this one is going to be my bottom gradient variable so now your gradients are going to use variables and obviously you can create a style for this I can say okay this style is going to be something like I don't know uh my intro BG so this is a style my intro BG and what I can do here is now is maybe go to my variables and I can say okay that's fine this is let's say variation one in variation two I actually want to try something a bit more colored so maybe what I can do is and let me just go here and change that to variation two maybe here in this particular instance I want to go ahead and bring a bit of color into this so maybe something like this and very similarly for the second color or the bottom color I want to go a bit more bluish here so I can do that and maybe actually let me just go ahead and choose something like this so now I can control these values directly with variables and obviously change them directly if I want to so variation one variation two um I mean a lot of people would be confused as to why we want to go ahead and do that and Link our variable values to variables or sorry our gradient values to variables and there may be some instances where you may want to do that for example when you have a gradient variable that's used in different places in different ways so as an example if I was to just give an example like that let me just go ahead and use my intro BG here but I'm going to use it slightly here as well and I'm going to detach it and I'm going to use it here as well and this is obviously detached now in this instance what I'm doing is maybe this particular gradient is used like this in this particular one let me just cut it in this particular one it's actually used as a I don't know radial gradient it still has those two points but it's used as a radial gradient so now I can go ahead and I can tweak uh these values to a different one using the mode and I can say that okay this is my variation two now all of these different types of gradients are changing the colors but they're respecting the different gradient properties that I've basically applied to them so that is one use case where using a variable or variable stops or variable values within a gradient would be really helpful because then you wouldn't have to update the Styles globally to change that or create multiple different styles for that so yeah that's one of the reasons why you may want to go ahead and do that but again like these are some impressive and awesome updates and I feel like again figma is going to keep on really pushing so I'm really excited to see how you actually start using these and and if there's any particular use case that you see I've missed definitely put that out in the comments and I'll see you all in the next video take care bye

Channel: AM Design

Views: 2,403

Keywords: figma, figma course, figma for beginners, figma update, learn design, learn figma, making money online, typography, ui, upwork, ux, figma web design, ux design, web design figma, figma basics, asaadmahmood, figma variables, ui design, figma tutorial, figma full course

Id: xbBjKgV4a0A

Length: 12min 7sec (727 seconds)

Published: Wed Apr 17 2024