Figma Variables vs Tokens Studio | Which to Use in 2024

it's the age-old question should you be using token Studio or should you be using figma variables today we're going to help answer that question and comparing both around which tokens or variables both support so hopefully you can make a recommendation that's best for you and your organization let's get started all right so what we're going to do together is really just compare everything token Studio offers and everything figma variables offers so on this left column here what I have are just the most common types of Tok of variables that you'll see that are used all the time are there other ones out there yes uh but again this is really just the basics uh that you'll use most commonly so what we're going to do is let me just open up uh token studio and we're going to start uh with that so uh I made these uh uh alphabetical order at least I hope they're in alphabetical order so let's go down the line so we have our border radius and Border width I didn't include border because it's kind of all encompassing with border width border radius and color uh so what I'm going to do is set border radius and Border width to support it uh B Shadow which you might also know as uh your effects uh that is also supported our color supported as you would have seen in our previous videos uh font family uh font size and font weight all closely related so font family font weight uh and font size so I'm going to set these three uh to supported letter spacing supported uh and where's our line height there it is also supported uh our number tokens I can see those are supported uh opacity pass that here somewhere there it was supported paragraph spacing supported uh our sizing and our spacing they're at the top supported our text decorations so for things uh like an underline supported and if all those are supported then you got to imagine typography uh is also supported there it is okay so in a nutshell as you can see token Studio really supports every type uh of token or variable uh that you might need now what about figma variables let's take a look at this next all right so now let's take a look uh at figma variables now there's a big difference between figma variables now vers figma variables when it first released when it was first launched in June of 2023 so last year at their config conference so this isn't just figma variables but we're going to look at figma variables for the text here uh when it was first launched so in June of 2023 now uh the library that I am right now is a direct carbon copy uh of the first variable Library we ever released uh UI Collective so let's essentially again let's go down the line here uh into each of our Collections and see what it was that was offered um back in June 2023 for figma variables and again we're going to do that uh the same for figma variables today so let's start off with so again we have our brand Alias and maap collections if you not to not too sure what these are we've got other videos on that so be sure to check those out so let's look through our brand collection and let's start off with our border radius as I can see I have a radius value so I'm going to say that that is supported now what about border width great question so I see spacing I see our color let's go into our Alias again these are just all colors as well are mapped oh I see a border but no number specific to the border at all it's really just the colors so border with was not supported now what about box Shadow or your effect variables as you might call them so again nothing I see in in mapped nothing in brand and nothing in alias either so box Shadows not supported color as I sure you saw those are supported I don't need to go through that in depth now when it comes to uh our font now font's a tricky one because of course figma you do have something called text variables so let me just open up some variables here and I'm just going to throw uh a text variable or string variable anywhere here I'm just going to set this to value and set the value of the value I guess to let's say 25 so instead of actually being able to modify anything specific to the font or the the font itself you can really just change the text value so I'm just going to set that to 25 So in theory yes you sure do have text variables but nothing specific to the fonts yet those are still under their Styles so you have your font family font size font weight so anything specific to what could be included in a text style I'm going to set as not supported so our letter spacing our line Heights our paragraph spacing our text decoration and our typography not supported okay so what do we have now so we have our number variables as I can saw that is supported opacity let's open back up our local variables here start off with our brand nothing specific to opacity nope nothing there either and nothing specific to our opacity so this is not supported sizing and spacing let's go back start off with our brand oh and there's a spacing and sizing is also offered uh as well again they're very closely aligned so uh as you can see uh when you compare figma variables in June of 20123 to token Studio again the choice is pretty clear uh you know figment variables it was kind of released like not fully built but again figma is evolving it over time so what we're going to do now is look at figma variables today and then then make a recommendation around which might be best for you all right now let's take a look at figma variables uh with their latest release in December 2023 versus in June 2023 and see what or if all has changed now another reason why I'm not setting this to as of today in January 2024 it say tomorrow or two days from now figma comes out with some brand new big variable that's not listed here it might cause Mass confusion so that's just a reason why I have December 2023 now for uh this column we're going to take a little bit of a different approach where I have just this one single variable right here and what we're going to do with everything that wasn't supported before we're going to see if we can apply that variable now so let's start off with this rectangle and what we're going to do again see if we can apply those variables to this rectangle and let's make it the UI Collective purple I don't know something like that and let's start off with our border width so I'm going to add a stroke and doesn't look like I can add a variable nothing here let's maybe try two finger tapping ah and I can apply that variable of 10 so that I can see that border width is all of a sudden supported okay what about box Shadow or what you might know is like your effect variables so let's go in and let's apply a drop shadow let's open this up uh and what do you see you see the little variable icon where now all of a sudden I can apply that 10 that 10 that 10 that 10 so box Shadows are Now supported now what about fod so let me uh let's add some text here and let's just say hello let's detach this change the size so we can see it something like 96 and let's see if we can anything specific to our font we can apply a variable to so it doesn't look look we can apply anything for the size uh nothing for our line height or paragraph spacing nothing for our letter spacing uh and as you've likely seen uh let's uh we can apply a text variable string variable let's just say hello hello world but the only thing that it does this variable sign here is it just changes the text value it doesn't change any of the specifics relating to what you see here for your text or your font so anything relating to your font or your text still not supported so font family not supported font size not supported font weight not supported letter spacing not supported line height not supported paragraph spacing not supported text decoration not supported and typography not supported those are still only supported in your text Styles so with that out of the way what do we is it that we have left so we have our opacity let's try to apply our opacity so my two finger top nothing on the fill level let's try the layer level I can apply a variable of 10 and I can see that that opacity uh adjusts and I can see that that is Now supported so there you have uh what is Now supported in dece as of December 2023 vers uh when figma variables was first launched in June uh next let's look at actually making a little bit of a recommendation around which might make sense for you token Studio or figma variables so now comes the age-old question around which should you be using figma variables now or token studio so token Studio of course supports everything however figment variables my guess is they're going to be be releasing uh font variables text variables sometime later this year so at the end of the day the only thing that you're really missing by not using uh token studio is just your figma is just your text variables excuse me however that's already covered in things like your styling where you can actually create uh text Styles which are again as you will know very similar to your variables that you can apply and control uh on demand so really what you're doing is really just replacing font family size all this stuff with your Tech Styles so at the end of the day if you're just starting out building your design system or just learning my suggestion would be to use your figma variables however this doesn't necessarily mean that token Studio has no purpose either and let me open the backup token Studio token Studio of course still has lots of great features and functionality including things like the ability to sync to GitHub gitlab if you're working with developers that alone is a really great feature it also has versioning history as well so again at the end of the day it's really up to you as to which one you might want to use there really is no right or wrong answer whereas uh back in June when F variables was first released I would say yes you know definitely you still use token Studio but since then figment variables has of course released uh new variables uh included in that and we are likely not too far away from text variables or font variables either so if you have any questions around that be sure to leave those in the description or in the comments excuse me I'll be sure to answer those uh and see you at the next video thanks for watching today's video everyone just want to encourage everyone to sign up for a slack Community atui collective. we've got lots of great free resources for you and we did also launch the the next version of our design system tracker as well which supports component style and variable targeting so be sure to check that out hope to see you online the community uh and see you soon

Channel: UI Collective

Views: 2,302

Keywords:

Id: TApsV0KKpDI

Length: 11min 24sec (684 seconds)

Published: Wed Jan 24 2024