Tokens Studio vs Figma Variables

foreign we've been asked to do a review of token Studios versus figma variables and help answer some questions as to when and why to use variables versus token Studios so let's get started first we'll open up our token Studios give it a second here you can see that we've got all of our Global or root tokens we've got brand spacing sizes border radius border width box Shadows typography typography breaks down into font families font weight height size and paragraphs to basing so we've got a lot of of tokens that we're currently using in token Studios to design and theme over 50 components with 3000 variants again please visit UIC collective.com for lessons on how to build some of these components as well as tools and downloads you can see here we also have our light mode where we've abstracted our colors and created a theme and then we've mapped those themes to our UI elements okay whereas with variables we've done the first draft of moving all of our brand colors over so we've got all of our colors uh semantically driven here so we've got red and blue and teal and purple and whatever uh then what we've done is we've aliased those um into a theme so now we've abstracted words like blue and now we're using words like primary secondary neutral Etc and then we've done mapping where we've now mapped uh those theme colors to our UI elements like text surface and border and then we've created modes for for light mode and dark mode Okay so we've done a really good job of migrating all of our Colors Over we've also migrated some Corner radiuses uh using the numeric variable from figma so let's show you a bit of a demo here so we'll type the word button grab our type tool button perfect I will select that and because uh we're not going to zoom in too much we're going to just use one of our larger button so we're going to go to our brand under typography we've already had pre-selected so we got hero we could swap between other type sizes but in this case you can see that it's mapped to our styles we go to our color mode and then we're going to make this text on Surface because we're going to add a blue background to it so hit shift 8 add Auto layout again feel free to take one of our button courses at UI Collective and then we're going to add our action color using token Studios the next thing we're going to do is access some additional tokens um so we select our brand we can put a corner radius on this either specific to a component like a button or we can select some of our native scales whether we want to apply medium or around when we go into spacing again here we've created a button large spacing I'm just going to edit this so you can see how the token works here with values we can apply multiple values either direct values or aliased values and we can apply values to top bottom left and right or if we only put in two numbers it assumes the first number is the top and bottom and the second number is the right and left this is incredibly powerful when you're adding spacing or padding to your elements and you want differentiation between where you're adding those paddings Okay so we've added our background colors text colors text Styles and padding all via figma or token Studio sorry and then we'll create one using variables okay so we grab our type here we go to our type styles again all those Styles exist here no problem now please note that type styles are not supported by variables yet that's a big uh big loss when it comes to migrating Your Design system but I'm sure that's going to hopefully come out as variables are currently in beta so some big assumptions that over the next few months typography will be included in variables to the same level and quality that they did with with colors so now we have our type we can grab our variable colors here so again we've moved everything over we've got our Alias or theme and then we've got our mapping so we'll choose on action we'll add a background or a shift Auto layout and then here we can go to our fills and again in our theme we've got our surface on action borders we've added some tokens or variables here so we can either choose our root variables which are or we can start to build out ones that are component specific but again you can only apply them uh one number variable to the whole thing so if we apply eight it's eight for every corner you can't do this to individual Corners this may not seem like too big of a deal for buttons but as you get into things like drop downs where you want the top to let's say have a zero Corner radius because it's butting up against a square input and you want the bottom to have corner radiuses it's not possible yet to affect the individual corner radiuses the same ways it's not possible yet to affect the individual padding functions now you can go into padding here and grab specific numbers from our spacing variables so we can say okay we want the top to be 16. and we want sorry we want the left and right to be 16 and we want the top and bottom to be let's change that we'll go 16 top and bottom and we'll go 24 left and right so we're able to access those but it's still not as convenient as being able to create kind of component level spacing where I can make sure that all of my buttons have the same top and bottom left and right so I think there's still a bit of growth or opportunity here for variables to get to the level of quality that we have over here additionally uh just to add some caveats to this so currently variables does not support typography so if you're looking to migrate Your Design system we'd actually suggest if you're using token Studios to keep your design system in token Studios until variables kind of matures up over the next few months there is no variables for Border width or for box Shadow so as people consuming Your Design system they have to jump between variables for colors and some sizes or numeric variables and then they have to use your normal styles for things like body copy and effects and then additionally currently figma doesn't support modes when it comes to nesting components so if you're building things like inputs where you may have a label component and a field component the color variables for modes doesn't currently affect nested components and I'm sure that's something that figma's going to to figure out soon so when we look at tokens versus variables our current thoughts are token Studios is amazing we we suggest using it and maintaining it um but they've also been doing a phenomenal job of making sure that migration and connection into variables is up to date so we suggest staying with token Studios for now but variables is looking great um it's got some growth opportunities here to catch up to tokens but in the meantime we would suggest staying with with token Studios again please visit UIC collective.com for more information for templates tools and courses on building components for your design system but we hope this was helpful

Channel: UI Collective

Views: 3,125

Keywords: figma variables, tokens and variables comparison

Id: ZU8tGdg80mk

Length: 7min 58sec (478 seconds)

Published: Wed Jun 28 2023