Figma Variables vs Tokens Studio | Which to Use in 2024

Подписаться 9 тыс.

Просмотров 4,1 тыс.

50% 1

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

Опубликовано:

10 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 33

@JoshChadwick1 4 месяца назад

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 4 месяца назад

Great call out!

@nobody-bt7mu 4 месяца назад

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 4 месяца назад

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

@ferreiravinicius 4 месяца назад

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

@UICollectiveDesign 4 месяца назад

I would watch our token setup video to better understand!

@UXKhanmunkh 4 месяца назад

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 4 месяца назад

Check my second most recent video :) covers these!

@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 16 дней назад

He actually did that: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-n_YUZF2Hv9g.html

@UICollectiveDesign 14 дней назад

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

@user-zw9pk9nl6x 4 месяца назад

Ty for the video!

@UICollectiveDesign 4 месяца назад

You're welcome!

@guillaumegoulet1480 4 месяца назад

Just what I needed.

@UICollectiveDesign 4 месяца назад

Sweet! Happy it's what you were looking for

@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.

@bertatnetcentric6074 Месяц назад

What about exporting json files?

@UICollectiveDesign Месяц назад

Tokens Studio!!

@Underhills 4 месяца назад

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 4 месяца назад

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

@Underhills 4 месяца назад

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 4 месяца назад

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