Tokens vs Variables in Tokens Studio for Figma | Variables Series

Подписаться 3,2 тыс.

Просмотров 17 тыс.

50% 1

In this video, SamIam_Designs will walk you through the features in the Tokens Studio plug-in for Figma that allow you to create variables that are synced to design tokens.
You will learn about the differences between Figma’s variables and design tokens.
-----
For more information on creating Variables using Tokens Studio you can check out our docs:
docs.tokens.studio/variables/...
Design Tokens Community Group Links
🆇 Twitter @DesignTokens : / designtokens
🔗 W3C Community Group Page: tr.designtokens.org/format/
🤓 Lastest Draft on W3C (July, 2023): tr.designtokens.org/format/
Figma Variables Help Center
⬡ Guide to Variables: help.figma.com/hc/en-us/artic...
⬢ Overview of variables, collections, and modes: help.figma.com/hc/en-us/artic...
Other Learning Resources
🟣 Specify - Getting your head around Figma Variables, Figma Styles and Tokens Studio: specifyapp.com/blog/getting-y...
🔵 Knapsack - Exploring Design Tokens Workflows : Figma Variables and Tokens Studio: www.knapsack.cloud/blog/explo...
-----
💡 Install on Figma: www.figma.com/community/plugi...)
💬 Join our Slack: tokens.studio/slack
🚀 Subscribe to our channel: @TokensStudio
📄 Docs at: docs.tokens.studio
ℹ️ More information on www.tokens.studio"
-----
The Variables series features step-by-step instructions on creating and maintaining Variables in Figma using the Tokens Studio plugin.
00:00 Intro
00:30 What's a Design Token?
01:50 W3C Design Tokens Community
03:23 Variables in Figma
04:17 Tokens Studio Feature Comparison to Variables in Figma
04:41 Tokens and Their Names
05:23 Variables in Collections = Tokens in Theme Groups
05:39 Tokens in JSON files
06:14 Modes in Figma = Themes in Tokens Studio
06:37 Creating Themes & Theme Groups in Tokens Studio
07:15 Creating Variables Using Tokens Studio
07:35 Variables vs Tokens Studio side-by-side
07:49 Variable Types vs Token Types
08:07 Recap
08:50 Thanks For Watching

Наука

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

15 май 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

@robertritacca632 11 дней назад

Sam is a pro 🙏

@megaroeny 8 месяцев назад

Love how you explained this and your personality shining through! 😄 Fun + educational. Thank you! 👏

@sophiepurewaldesign 8 месяцев назад

Great explanation, thank you!

@BrysonThill 8 месяцев назад

Exactly the video I needed right now - thank you!

@TokensStudio 8 месяцев назад

My pleasure! - Sam

@vkoopmans 7 месяцев назад

Thanks Sam, great overview of the way Tokens/sets/groups are represented in Figma's variables

@thiagocastro9866 8 месяцев назад

Great video, congratulations!!!

@TokensStudio 8 месяцев назад

Thanks for the support! - Sam

@WillisJonny 8 месяцев назад

Love this ❤

@atharnadeem6947 8 месяцев назад

Extremely Informative.

@TokensStudio 8 месяцев назад

Awesome! Glad you found it valuable! - Sam

@wienwinsituation 5 месяцев назад

Thank you! Nice and informative :) And nice pioneer setup in the background :D

@user-ud5wz1kv5w 8 месяцев назад

Amazingly well explained video, thanks so much! 🙌

@TokensStudio 8 месяцев назад

Thanks so much for the positive feedback! I'm glad it resonated with you - it was a doozy to try and get straight for me! - Sam

@quinceymazel2415 8 месяцев назад

Cheers Sam!

@TokensStudio 8 месяцев назад

Thanks so much 🫶 - Sam

@grlcanrock 8 месяцев назад

I'm new to Tokens Studio - when you were explaining Creating Themes & These Groups in Token Studios (6:40) does that mean that brand Token Sets always need to be created first in order to have that brand be applied to a New Theme?

@TokensStudio 8 месяцев назад

You can think of a theme like a wrapper, or a folder around token sets. You have have several token sets in a theme if you like. But with no sets, there is no theme! Hopefully the rest of the videos in the series I am working on will help clarify! Feel free to hit me up in the Tokens Studio community slack if you get stuck. - Sam

@HeroNinja 8 месяцев назад

Nice one 👌🏽.. I know we're talking more about Token Studio here. But what do you think is missing from Variables?

@TokensStudio 8 месяцев назад

Variables is still in beta, Figma has lots on their roadmap to be excited about in the near future! - Sam

@HeroNinja 7 месяцев назад

I mean, if you wanted to say Figma Variables unlock Design tokens, what would you need to say it?

@Surferka 8 месяцев назад

We love the Tokens Studio plugin, but it needs about 10 minutes to start. Each refresh (or editing) is really painful. We have a multi-brand theme. What are we doing wrong? It is also confusing to have an option to create variables, but you are showing us that there is no additional value in that (just more work, actually). Are you suggesting that having ONE theme and multiple sets is better? Or multiple themes with fewer sets? Thank you. 🙏

@TokensStudio 8 месяцев назад

Long loading times is not normal. I'm wondering if there's something going on we should look at. It would be ideal for you to reach out to Keegan on the Tokens Studio community slack channel! As for how you structure your token sets and themes, it's a personal choice based on your goals. Hopefully the upcoming videos in the series help to clarify this for you. Feel free to ping me on slack in the variables channel if you want to chat sooner. - Sam

@brightbaiden7904 3 месяца назад

Any way how to reset tokens. I mistakenly clicked on load example and now I don't see any option to reset it or create a new design token system. went to see the documentation and followed it but the console feedback was figma is not defined. anyone?

@whennn 5 месяцев назад

Nice video. This is the first time i hear about tokens studio. I am thinking of using it now as figma still doesn’t have variables for font family and size , etc. However, i was wondering, once Figma updates to support all those things, what would be the difference between tokens studio and figma? Or why would need to keep both?

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

Figma doesn't offer everything Tokens Studio does. As you mentioned, there are additional token types, and there is also the the ease of getting your tokens synced into a git provider which isn't a native feature Figma has. - Sam

@user-dj8oe8do8y 6 месяцев назад

That's interesting! I always thought Variable modes are same as Theme group in token studio, and Collections are equal to Token Sets. I remember seeing quite a few other tutorials map their token that way.

@TokensStudio 6 месяцев назад

Many people did - thats why we tried to clear things up! - Sam

@vaanresvaanica 8 месяцев назад

great videos, but I didn't find the community file somewhere

@TokensStudio 8 месяцев назад

It's coming with the hands-on videos which are a WIP. Is there anything specific in there you were hoping to see? - Sam

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

@@TokensStudio Hi, am also curious to see the community file - specifically interested in how you broke your token sets in components as opposed to keeping all component tokens in a single set. How does that impact exporting tokens, syncing with Figma variable, brand switching, and why did you decide to organize in such a granular fashion?

@dinoDonga 6 месяцев назад

I wonder how dark and light mode can be done in this multi brand approach. if you setup a collection that is shared by all brands that would also come with a dark and light mode. do we then end up with a dark and light mode and a brand-a-light brand-a-dark mode? I guess this is the life of beta

@TokensStudio 6 месяцев назад

You could set it up the way you describe, or you can be a bit more tactful to create a multi-dimension theme set up where light/dark mode would reference a brand color. That would give 2 layers of mode switching. - Sam

@dinoDonga 5 месяцев назад

@@TokensStudio That's what i ended up suggesting to the designer when he came back from vacation. Sadly i had no access to an editor account but he whipped it out in 5 minutes, we tested it and it worked like a charm. We still have the brands inside the same libraray in their own collection so they are treated as modes. It feels like the should be living in their own library or maybe even 1 brand per library so light and dark are resolved in a simpler way but that would mean a lot of context switching for the designer. Curious to see what comes out on top as the best practice approach