For now, Token Studio is clearly the better option for organizing design systems. It's more intuitive and geared towards ease of collaboration. Figma's built in variable system is sort of bare-bones at the moment but it's a great start.
Variables are for now the best options in my opinion regarding the prototyping. You can fake conditions like form completely filled up before accessing next step and other stuff like that
Update: Figma variable now supports individual setting for rounded corners and paddings. I think it's going to completely replace the need to have token studio
I have to say the variables in Figma is easier to visualize the mapping of tokens between modes. Token Studio can do more but wait for some updates from Figma and we will see.
5:10 Of course you can add individual corner radius variable to each corner. Just add a variable to corner radius then expand the options for individual radius. Now if you select any corner, you'll be asked to select a variable. Not sure if you missed this or is it a new fix they added.
Hey! I’m trying to understand the differences between these two. This is very helpful, but what about the sync features to development tools? That’s one of the features tokens studio has and figma (variables) doesn’t support yet right? Or are there other plug ins that you could use for that only? Would love to hear from you!
What i like about the variables in figma is that they allow the connection to prototyping. E.g. making calculations in input boxes in your prototype. Is this supported by using Token Studio to organise everything?
Figma variables are getting there... in my most recent video, I talk about how they finally now support effect, opacity, and border width variables. However, still no text support!! Which is crazy if you ask me.... Personally, I like TS for now as it's all-in-one, and can support everything, but I imagine by the summer, variables will be fully caught up.
Could I get some insight into this as well... assuming from what I know so far that you have to have the Pro version of Tokens Studio? Do you have a tut for this? @@UICollectiveDesign
i dont think button is a better example? anyways ill make button a component to stay consistent right. Any better way cuz i'm trying to figure out an easy way to impress my company to invest in tokens studio pro account
Thank you for making this video, sure a lot of users will appreciate this!
Glad it was helpful!
For now, Token Studio is clearly the better option for organizing design systems. It's more intuitive and geared towards ease of collaboration. Figma's built in variable system is sort of bare-bones at the moment but it's a great start.
Yes! Variables to us seems half-baked
Variables are for now the best options in my opinion regarding the prototyping. You can fake conditions like form completely filled up before accessing next step and other stuff like that
Thanks for the video, short and clear. Exciting months ahead!
Glad you liked it!
Update: Figma variable now supports individual setting for rounded corners and paddings. I think it's going to completely replace the need to have token studio
Yup - Great call out. Went over this in my most recent video
@@UICollectiveDesign Awesome! Watching it now 👍
Amazing! Please subscribe and share our channel if you can :)@@mujahidomer7071
That might be a dumb question but does it means that components are now useless except for graphic elements like icons ??
I have to say the variables in Figma is easier to visualize the mapping of tokens between modes. Token Studio can do more but wait for some updates from Figma and we will see.
I agree - Will be interested to see what variables turns into
5:10 Of course you can add individual corner radius variable to each corner. Just add a variable to corner radius then expand the options for individual radius. Now if you select any corner, you'll be asked to select a variable. Not sure if you missed this or is it a new fix they added.
It's a new fix - afaik this wasn't possible last week when variables launched!
@@p44v9n Got it. Thanks :)
Hey! I’m trying to understand the differences between these two. This is very helpful, but what about the sync features to development tools? That’s one of the features tokens studio has and figma (variables) doesn’t support yet right? Or are there other plug ins that you could use for that only? Would love to hear from you!
See one of our recent videos!
What i like about the variables in figma is that they allow the connection to prototyping. E.g. making calculations in input boxes in your prototype. Is this supported by using Token Studio to organise everything?
Can you provide another example?
The component spacing is 🔥🔥🔥
Thank you!
Thanks for your sharing！
But how could UI Designer sync tokens with Devs if designer use Figma Variables？
Token studio with integration to GitHub
Yeah,I mean if I use Figma new feature"Variables", how could UI Designer sync tokens with Devs?@@UICollectiveDesign
@@DarrenLee-f9e same way. You can sync tokens with variables via Tokens Studio.
After 6 months is Figma Variables catching up fast or is Token Studio still the clear winner?
Figma variables are getting there... in my most recent video, I talk about how they finally now support effect, opacity, and border width variables. However, still no text support!! Which is crazy if you ask me....
Personally, I like TS for now as it's all-in-one, and can support everything, but I imagine by the summer, variables will be fully caught up.
Token studio free version can also do this??
You will need the paid unfortunately
Ok hold on.. how the heck did you map your tokens from tokens studio to figma styles?!
Message me on Slack and I can help you out :)
Could I get some insight into this as well... assuming from what I know so far that you have to have the Pro version of Tokens Studio? Do you have a tut for this? @@UICollectiveDesign
Can you use variables from Token studio in prototypes?
Absolutely!
i dont think button is a better example? anyways ill make button a component to stay consistent right. Any better way cuz i'm trying to figure out an easy way to impress my company to invest in tokens studio pro account