Figma Variables vs Tokens Studio | Which to Use in 2024

I've been getting a ton of questions lately around if ‪@Figma‬ Variables or ‪@TokensStudio‬ is the better option to be using. So, this video is for those torn between the two, where we break down which tokens/variables, are supported by both.
Build a community profile + join the community: www.uicollective.co/
Resource library: resources.uicollective.co/
Request a design system audit: www.uicollective.co/design-sy...
Our Figma Plugin: www.figma.com/community/plugi...
0:00 An Introduction
0:18 What's Supported in Tokens Studio?
2:25 What Was Originally Supported by Figma Variabes?
6:02 Figma Variables Today
9:17 Which to Use Today

[@JoshChadwick1]

Token Studio also lets you generate calculated values (i.e. reference the primary color and apply a 60% opacity). I've actually been finding that using Token Studio when you need to use more complicated systems makes way more sense. However, you can build your token collection so that it hooks directly into Figma's variables (and styles) so you don't lose all the great functionality that are built into variables (like mode switching).

[@UICollectiveDesign]

Great call out!

[@nutellanorbert2799]

Also not forget the direct connection to a repository that let you generate directly via style dictionairy the desired formats for the whole organisation. you simply don't need a dev for every token. jst for merging the pull request.

[@nobody-bt7mu]

I'm glad you made this for 2024! The previous one was 6 months ago and I'm curious about the improvements Figma has made over those months to their variables.

[@UICollectiveDesign]

Glad you found it helpful! I'll keep filming new comparisons as updates are made

[@ferreiravinicius]

Thanks for sharing it. What does the mapped collection stand for?

[@UICollectiveDesign]

I would watch our token setup video to better understand!

[@UXKhanmunkh]

This video was so insightful, appreciate it🙏. Btw what’s your thoughts on border width, shadow, opacity and spacing. Should they have seperate variable collection or not. If not why apply variables isn’t it kinda waste of time?😅

[@UICollectiveDesign]

Check my second most recent video :) covers these!

[@guillaumegoulet1480]

Just what I needed.

[@UICollectiveDesign]

Sweet! Happy it's what you were looking for

[@user-zw9pk9nl6x]

Ty for the video!

[@UICollectiveDesign]

You're welcome!

[@JohnnyDilan]

Would love to see an updated video after they have release the type variables from Figma.

[@UICollectiveDesign]

Just on vacation for a couple weeks. I can film another when I return since type variables are now out.

[@timothychinye6008]

He actually did that: kzbin.info/www/bejne/pJC8ho18Z62pb8k

[@UICollectiveDesign]

@@timothychinye6008 More type variable content is on it's way :)

[@bertatnetcentric6074]

What about exporting json files?

[@UICollectiveDesign]

Tokens Studio!!

[@Underhills]

I discovered that I had to right click AFTER selecting the border number so it becomes active, THEN I'm able to see a context menu like in this demo. That was not very intuitive. It's not even stable, it "trembles" and goes away at times. Wow, that's Figma for'ya. Not very UX oriented ironicly enuff. Same response with fill color. Anyways, great tut.

[@UICollectiveDesign]

You need to two finger tap on it. Let me know if this works!

[@Underhills]

Tap? I'm not using a tablet or a pad. I'm not using a laptop. But if I were I would use a mouse there as well.@@UICollectiveDesign

[@Underhills]

I replied this yesterday but my post is gone. To put it short, I don't use a laptop or a tablet. I'm interacting with mouse only.@@UICollectiveDesign

[@bertatnetcentric6074]

Looks like Figma, covers all the font topics now.

[@UICollectiveDesign]

Yup! Will be filming an updated vid when I'm back from vacation

[@dasildasil6288]

I think you don't get how Figma Variable works, all tokens are supported for both tools

[@UICollectiveDesign]

Not at the time of this video :) Will film an updated one soon.

[@user-hx5fr5vi5q]

I appreciate your effort in making videos, but can you increase the volume of your voice/audio? It would really help your subscribers.

[@UICollectiveDesign]

Can definitely do so for the next video! Thanks for the feedback :)

[@milanrdesign]

You can just make text styles no biggie

[@UICollectiveDesign]

Exactly!!

[@vsdy1990]

in reality you don't need so many tokens, only color tokens are enough to create dark mode. Designers doing too much useless work.

[@UICollectiveDesign]

I don't disagree, but some brands do require all these tokens. Crazy to think about!