What's New in Tokens Studio 1.37: Figma Variables support
Вставка
- Опубліковано 2 жов 2024
- Discover the latest features in Tokens Studio version 1.37, highlighting Figma Variables support. This update enables efficient management of Figma Variables, linking them to tokens, and leveraging native features for design control. Despite Figma's variable limitations, Tokens Studio continues to assist in design-to-code workflows.
Check out the full release notes: tokens.studio/...
Docs on Variables support: docs.tokens.st...
Download the Tokens Studio plugin: www.figma.com/...)
Awesome, how responsive and quick you are to figma's updates, I'm delighted
Thank you very much. I was worried how Tokens Studio plugin would work together with Figma Variables and I can see it's already solved. I'm going to try it right away 😃
why now create variables is disabled
Marvelous!
Is this only a Pro feature? Because it doesn't work on the free plan
Creating Variables works using the Themes feature feature, which indeed is a Pro feature. More information on the Variables support can be found here: docs.tokens.studio/variables/creating-variables
What if you created your variables and tokens in Figma first, how can you import that into Token Studio?
It is not possible yet to import Variables created in Figma into the plugin. We do have a feature request for this in our GitHub repository: github.com/tokens-studio/figma-plugin/issues/1999
Does it work in branches of Figma files?
The plugin can work with Figma Variables. We expect that Variables will work with branches, but that is up to Figma since it's their feature
🎉
At 1:12, when you press apply to page, the hex values are becoming to variables. I am trying to do the same but it doesn't work for me. I am using the same hex value of tokens. How does it work? Can you elaborate on it a bit more?
Hi! We've reached out to you via Slack, but we will leave an answer to this for the others as well. If you've already applied tokens and have created variables after, you can then click on ‘apply to’ which will fetch the corresponding variables and apply them to your frames. In your case you have to manually assign your tokens to a frame first which should then automatically apply the corresponding variable as well.
Here's also a slack invite to our community: join.slack.com/t/tokens-studio/shared_invite/zt-20cbjfz6f-rhmascI4FSfOdOHFeeb50g
I'm having a issue moving my supported tokens to figma variables. It maxes out at 65 variables for some reason. So I have to do the rest manual. Do you know if there's any reason for this? Thanks
There should be no limit in the number of Variables you can create. However there are limitations on Figma's side for the number of modes (themes) you can use, which are 4 modes on most plans.
Is it also possible to import Variables you've setup when you didn't set it up in Tokens Studio first?
You currently cannot import variables into the Plugin. We are planning to support sync to some degree, but because Figma Variables have less capabilities compared to Tokens Studio, there isn’t a straight forward 1:1 import function possible. It could also cause data regression for users that have initially defined their tokens in TS (for example using math, or having override sets).
I'm new to Tokens Studio and I'm trying to figure out the benefits of using this versus what is native to Figma (although still in beta). Can anyone tell me what the differences are between using this product vs the variables/modes? Thank you
Tokens Studio supports a larger range of tokens, which are not available in Figma Variables. More on this can be found in the changelog of this release: tokens.studio/changelog/release-1-37
Also found this video from UI Collective, which might be helpful: ua-cam.com/video/ZU8tGdg80mk/v-deo.html
What’s the benefit of having set the tokens/variables in TS and Figma native?
Advanced prototyping capabilities I guess, but curious about other benefits.
Hope we didn't misunderstand your question, but Tokens are solely a part of TS and Variables are a part of Figma. TS offers flexibility, has no mode restrictions - ideal for multi-brand setups - and offer a lot more token options to name a few.
TS currently doesn't perform as expected with prototyping .
@@TokensStudio Oh, I think the question was misunderstood 😅. Why to use both methods in combination? Let's say we are just using Tokens Studio. What's the benefit of creating Figma variables and use them in combination?
The benefit of using variables is that it doesn't require the plugin to apply them. Product designers comfortable in Figma will be able to use Variables using the tool the already know.
As it is unreleased, we will have a team member share the variable troubleshooting video with you via slack which showcases how flexible tokens are vs how fragile variables are.
@@TokensStudio oh, that would be amazing! Thanks so much!
Is it only available in paid mode?
To create variables, you must have Themes defined
Tokens Studio is still way more flexible and powerful than Variables.
Can you elaborate more? I'm just curious and trying to figure out the differences. Thanks!