Variables for Typography and Gradients | Figma Variables update April 2024

figma just released two new variables so let's see them in action as usual you've got the figma link in the description below so feel free to follow along let's jump in so to start off I just want to explain something really important figma didn't actually release two new variables they just released the option to use variables in two new places and those places are typography and gradients so when you click on add a new variable you're not going to find anything new there but you can use variables in more places let's start with typography so in order to control typography we can now use string variables for the font family font style and font weight and we can use number variables for the font weight line height font size all of the things you can use numbers for when it comes to typography now in the file I've set up a little typography scale for us and this is what we are going to use in our example and you'll see that the title Styles use a font called pretty and the body styles use a font called urbanist so let's start off by creating those two kind of variables I'll click on local variables and then I'll rename my collection to typography cuz we like to be neat and organized and then like we said I'm going to be adding a string variable now for this string variable I'm going to use some slashes to create groups so I'll call it family because it's a font family and then slash and this one will be the title one then you see create that little group for me the title uses a font called pretty now with this we need to make sure that we spell them exactly the same if it is a font that has two words in it like Noto serif for example then I can write Noto serif but I can also write Noto Dash serif or notore serif and you can use lowercase and uppercase but we still need to make sure that we're using the correct letters now in order to create the next string variable I can just select this one and then shift enter to create a new one and stay within the same group this one will be my body font family and that one is uh bur list so I've already done this now let's assign them just to see kind of how it works so I'll select all of my title fonts and then over here when I click to change the font you see we have the variable icon here at the top so I'll apply the variable pretty now nothing's going to change except that in here you can now see that it says family/ tile let's do the same for body I'm selecting all of the ones that use urbanist and then change it to urbanist wonderful now this doesn't look like much has changed right but if I go into my local variables now and let's say I change instead of pretty I do change it to Noto serif you see that that already changed so that's why this is useful okay because I can change it everywhere and then I can attach it to Styles as well and if I need to change my font I can change it in just one central place that's kind of why variables are great right they're that one single source of Truth next I want us to look at the font sizes now these are the font sizes that we use kind of in this scale that we've created so I'll go into local variables and I'll create a new number variable and this time I'll call it size slash and then we'll will start with the smallest one which I will call extra small um and then I'll just start typing them in now that I've done that I can go ahead and assign these so let's start with our title if I select my title I go into where I would select the font size and I scroll all the way to the bottom and I'll see this apply variable button once I click on it I can select the correct size now if you have a huge Library where you have loads of different number variables this is where scoping really helps so right now because we only have these ones they're the only ones we can see but if I go into local variables I can show you let's say one of these I click on this edit button you see how I can scope this variable so I can say only only only show this variable when we're talking about text content so if I'll just remove it from everything else so this was the extra small so you see now if I select this title I go into here click on the variable I see the extra small but let's say I am looking at uh the height for example if I look at apply variable extra small doesn't exist yeah so scoping is going to be super helpful if you have loads of variables already in play I'll keep going now and assign all the variables to the correct texts now that we've done that the next thing I want us to look at is the font weight so font weight is one of those where we can use a string variable or a number variable so for a string variable we could just write in the name like bold semi bold medium regular all of those and if we're using a number variable then we use the weight number that's it's usually a scale from 100 to 900 now not all font families offer any of these some font families just have one kind of weight some of them have multiple ones with the naming ones they us usually the same but then there's many different things some of them suddenly have like a display size or a book size or stuff like that so they're not the most consistent in the world I would say it really depends on how many of them you're using and also what the fonts that you're using even offer right here you can see we're only going to be using regular medium and semi balls because it's only three of them I'm happy using just text so I'll go into local variables again I'll create a new string variable and I'll call it weight SL because we're creating a group and then my first variable name is going to be semibold so I'll type that in and the value is also semi bold again selecting it shift and enter to create a new variable of the same kind in the group now I'll go ahead and assign these I'll go into my dropdown apply variable and then just look for semi bold then this one is medium apply variable medium for these ones because they're the same one I can select them at the same time and apply it all at once and this one is a well lovely so now we've done all of that if we would have wanted we could have gone in and we've done the line height let is facing anything that we want but for me this is fine right now now what's really good about variables is that you can bind them to a style so just like before I can go in and add a new textile here I will call it title large and you'll see when I click on show more options it's showing me that these are still connected to those variables and now I'm going to go ahead and create all of these Styles and we'll see how this becomes super powerful just in a minute so now we've created our Styles and I've applied these Styles onto these two designs this is like a desk Toopy design and then this one is like a mobile one don't judge the design please it's just for the demo but you see we've got some titles some headers we're using our font style so you can see it's all connected so if I look at this let's say caption and click on edit we can see that it's all connected to our variables now obviously it doesn't look great right now in Mobile right because it's it's a bit too big we would usually create one set of topography styles for desktop and one set for mobile let's see how we can use variables here to just have one set of styles that work for both so I've now scoped out kind of how so I've now scoped out a mobile version for all of these Styles the weight stays the same for both of them but you can see that the size of the font kind of changes a tiny bit between mobile and desktop so let's have a look at local variables now what I need to do is just add a new mode now modes are only available in the professional plan and upwards there is a link in our description to see the pricing plans and quickly sign up to a professional plan if you want one but I'm going to change this mode to desktop and then I'm going to add a new mode and I'll call this one mobile now what's great about adding a mode after you've kind of finished everything is just duplicate the First Column so for example I'm not changing the font when I'm going to Mobile but let's say if I was for example if I'm doing an iOS native app and instead of urbanist I want to use SF Pro yeah so let's see how that works actually I'm going to change it and we'll see that kind of in action but I do need to change the font sizes so I'm just going to go ahead and do that now if we go back to our designs over here like we said they are connected to our local Styles so this one is connected to title medium and this one is connected to title medium but if I go into this mobile frame and then under layer we can see that we have the button to change variable mode because it notices that there are variables inside that have different modes if I select it and then in here click on mobile look what happens straight away firstly it changed the font to SF Pro because we're now using San Francisco font because this is a fake iOS happen and we want to use the native font and then it also shrunk down the sizes right so this one is using body and this one is using body but they look completely different okay and that is the power of variables it means I only created one set of styles use it wherever I need to and then I just go in and change the mode and it changes everything automatically and because everything is also an auto layout so you see it kind of spaced it out a bit differently shrunk it down made sure that it makes sense so the next new variable or the new thing we can control using variables is gradients now the actual change is that now when we create new gradients we can assign different variables to the stop points within the gradient so as an example I've created a new collection and I've put in some colors now you can see that I've put it in different modes so I've gotten an L1 L2 L3 and L4 for morning afternoon evening and I've also created just a title for each let's connect those so firstly I have this text box here and I want to show you that even though it's connected to a style and that Style's connected to typography variables I can still also just assign a text variable like we did before so if I change this to morning and then now I change it to afternoon that will change because it's assigned to that text variable and it has different modes now on to gradient I'm going to select this Frame and for the fill color I'm just going to add a gradient now the gradient picker has changed the interface is now a lot better you can add in actual percentages for the gradient stops which I think is really cool so let's start assigning them so if I click on this color I can go into libraries and then I see the colors that I have so any color variables that we've created before so I'm going to assign this one to stop one and I need now I can play around with them I can double click on any of the stops and it assigns it automatically kind of spaces them out like we can do with the auto layout so it's kind of like a space between now I'm happy with this and you can see that they're all connected to different variables now the cool thing about this is because they're connected to modes for example so I can go into the mode and then change it to afternoon for example now the reason this one isn't changing is because I put this on morning and didn't put it on auto so if it was on auto it takes the mode that its parent takes and if I assign a mode to it it will forever stay in that mode until I change it so I'm going to say change it to automatic mode then it will change alongside with its parent so now it's on afternoon evening morning yeah so gradients again we can't save a full-on gradient into our variables but we can kind of hack it so I still think it's a little bit of a win and that was that I hope you enjoyed it was a super quick video just to explain how these new variables work and how you can utilize them leave a comment below let me know if you think this is a game changer for you how you think you're going to be using this don't forget to like And subscribe see you at the next one

Channel: TD Sunshine

Views: 6,075

Keywords: figma, figma tutorial, figma config, figma new features, figma update, new figma features, new figma update, learn figma, variable prototyping, figma variables, design tokens, figma tokens, advanced prototyping, figma variable updates, variable updates, figma design tokes, variable modes, figma modes, figma 2024, nested variable, new variables, figma typography, typography, figam gradients, framework by figma

Id: 2DpDh1CyzPg

Length: 12min 12sec (732 seconds)

Published: Wed Apr 17 2024