Unlocking the power of design tokens: A look at Tokens Studio 2.0's new features
The improved interface and new tools in Tokens Studio 2.0 make a big difference. Learn how these updates affect user workflow compare the new and old versions, and assess their differences.
What you can read in this article:
What problems does Tokens Studio 2.0 solve compared to the previous version?
The new approach for variables & styles synchronization
Explore the key improvements and new features in the 2.0 version.
Improved synchronization with Figma variables and repositories.
Changes in the user interface and their impact on the user experience.
My overall self-reflections
Look to the past
My first adventure with design tokens began in early 2019. That's when design OGs started to talk about them. To be honest, I knew what the concept was about and where the benefits were. However, I was unsure how to use them in Figma. Two years passed. I still didn't know how to use them in my work as a designer and how to support developers.
The first breakout was in 2022. I got my first pro license at a workshop by Jan Six, organized by the lovely Into Design Systems team.
Entry barrier for new users
In the past, I found that both my personal and business projects, along with my components libraries, faced challenges when it came to adding some complex use cases. Working with sets, themes, and syncing often pushed me to explore some unusual and new techniques just to achieve my goals.
Many failures and experiments have built great freedom and confidence in navigating the world of tokens.
I've noticed that there are other community members with similar goals and questions. We wanted to focus on things like syncing variables, themes, and two-way syncing. This would let designers choose between using native Figma variables or the plugin.
So I started asking myself the standard questions:
How do I make my tokens synchronized with variables?
Why this bloody fontWeight doesn’t work with some fonts?
Should I use sets or themes to handle light and dark?
How do I synchronize this with developers and documentation?
The new version today shows the team has almost removed those barriers to entry for new users. And I think that's great!
Let’s see how they remove those barriers!
Improved user flow
In the first part, I wanted to discuss the most important parts of plugin areas that have an impact on usability and my daily experience as someone who manages tokens.
Interface redesign
You can see the changes in the fresh UI right away. At first, it doesn't look totally different. That makes it easier to switch between versions and feels familiar. The real changes are at lower levels.
As we can see the number of updated settings is simplified as well as section Settings is way more organized and clear for me as a user.
Sets and Themes
In the TS, the user can work with both sets and themes. At first, it was hard to grasp that I had to use Themes to sync with Figma variables to my use cases. The new plugin version improved its look and feel. It made theme management clearer and more usable.
In theme management, the dropdown is replaced with a group button. This saves clicks and gives me a better overview of the theme config. I love it!
Synchronizing variables and styles
I think that this fragment caused a lot of confusion for me and also new members. As you remember the previous version, there was the same dropdown with 6 options. I think that here the biggest misunderstanding was between “Sync variables” and “Create variables”.
The number of options is now more limited, but the processes are better structured. There are also added sub-steps that allow you to fine-tune each synchronization. So as a user, it's a lot less thinking compared to the previous version.
I especially love that new options are available and also that you can control synchronization on a granular level in the last step.
New sync providers
This section is now a more aesthetical and prominent interface. One of the exciting features many are looking forward to is the ability to sync with Bitbucket.
You can already sync the TS plugin in Figma with the new TS web platform. (Btw, I look forward to open beta access.)
It's worth mentioning something completely new. Style Dictionary users may appreciate converting tokens to a W3C DTCG-compatible format.
More at: https://docs.tokens.studio/convert-to-dtcg-format
Enhancements and features.
In this section, I wanted to share some things that surprised me after I installed the beta version.
Duplication finder
When I opened the new version within the old project, a new icon appeared. I hadn't seen it before. It's a small but very useful feature. Having great token hygiene is important.
Variables in typography
I don’t know what about you but for me that was a missing puzzle for every designer's work. I appreciate this feature because now I have better control.
Bitbucket support
During the last Office hour live, I heard this was a top-requested feature. I'm not using Bitbucket. But, there's a huge need for, and a blocker by, its automation. In my opinion, it's important to remember to support this new feature too.
The full list of the changes can be found in the link below the article.
Branding
I wouldn't be myself if I didn't pay attention to the new branding and website. It's a great change. It opens new horizons and products. Above all, it increases brand awareness.
My thoughts on other features
❇️ Non-local styles and variables (pro) - It might be a nice feature when you prototype. Mostly you need hex values. So the prototypes work faster. The described use case about switching themes can be achieved in Figma without this feature. I think that maybe the team could find more use cases to promote this feature.
❇️ Variable fallbacks - component-specific token workflow enhancement - This area confused users during operations. The Figma API's limits generated many questions in Slack about using fontWeights. Now, the hacks are not needed anymore.
❇️ Apply tokens as styles/variables, or resolved values in Figma - Small things but make me smile :)
Self-reflection
Looking at Tokens Studio now compared to two years ago, I see amazing progress. The TS team has worked hard to reach this point. I wanted to congratulate the entire team and the community. My life as a designer is now easier and more interesting.
This version's introduction is an important milestone. It shows a big need and that the community is moving in the right direction.
I hope it encourages those designers or developers who do not use the tool to try it out.
Thanks for reading!
❋ Maciej (magic)
Additional resources:
Roadmap: https://tokensstudio.featurebase.app
Website: https://tokens.studio/
Design Tokens Community: https://www.w3.org/community/design-tokens/
📩 Stay Inspired with Design Gem!
If you enjoyed this post, don’t miss out on my weekly newsletter, Design Gem. It’s a digest packed with inspiring and practical insights on digital product development, crafted for designers and developers. Subscribe here to get fresh ideas delivered straight to your inbox every week.
👋 Let’s Connect!
I’d love to hear your thoughts and connect with you! Find me on LinkedIn or visit my website to stay in touch and explore more of my work.