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).
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.
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.
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?😅
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.
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).
Great call out!
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.
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.
Glad you found it helpful! I'll keep filming new comparisons as updates are made
Thanks for sharing it. What does the mapped collection stand for?
I would watch our token setup video to better understand!
Would love to see an updated video after they have release the type variables from Figma.
Just on vacation for a couple weeks. I can film another when I return since type variables are now out.
He actually did that: th-cam.com/video/n_YUZF2Hv9g/w-d-xo.html
@@timothychinye6008 More type variable content is on it's way :)
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?😅
Check my second most recent video :) covers these!
Just what I needed.
Sweet! Happy it's what you were looking for
I think you don't get how Figma Variable works, all tokens are supported for both tools
Not at the time of this video :) Will film an updated one soon.
What about exporting json files?
Tokens Studio!!
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.
You need to two finger tap on it. Let me know if this works!
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
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
Ty for the video!
You're welcome!
Looks like Figma, covers all the font topics now.
Yup! Will be filming an updated vid when I'm back from vacation
You can just make text styles no biggie
Exactly!!
I appreciate your effort in making videos, but can you increase the volume of your voice/audio? It would really help your subscribers.
Can definitely do so for the next video! Thanks for the feedback :)
in reality you don't need so many tokens, only color tokens are enough to create dark mode. Designers doing too much useless work.
I don't disagree, but some brands do require all these tokens. Crazy to think about!