Native tokens in Figma have landed in the form of Variables

Today’s an exciting day for anyone using design tokens in Figma! With today’s release, designers are able to use spicy variables for applying design decisions that go beyond color, with references that let us create organized systems. We’re thrilled by the capabilities that this brings, and have worked hard to make sure Tokens Studio for Figma integrates seamlessly into this new world.

Plugin version 1.37, which we released just now, enables support for Figma’s variables. Allowing users to connect their already existing design tokens using the plugin to the native ones via the Themes feature. Users are able to create Collections and Modes based on the Themes they’ve set up. If you’d like to read more, we have a Docs page ready for this and will publish some videos on this as well.

When we started this plugin over 3 years ago designers had little choice if they wanted to create systems that use design tokens in their actual designs, and the ability to sync to code was something that excited not just us, but lots of users that wanted to rely on a single source of truth. Since then, over a hundred thousand designers installed our plugin and used design tokens to enhance their design workflow in Figma while bridging the gap between design and engineering.

Today’s release marks the beginning of a new era. We’re in for a treat, and things will gradually improve from here. Applying design tokens is something that our plugin had to do all by itself for a long time, doing all the heavy lifting that comes with updating a document when you’re not the native tool. The new release brings exciting possibilities when it comes to performance, as more and more users will be able to just use native variables for both applying and switching themes. 

Tokens Studio for Figma will remain at the core of that, and we’re making sure that managing your design tokens remains something you can do both in Figma, and outside of it. We have some amazing features and tools planned for the ecosystem around it all. Figma Variables will make a lot of that easier.

The future is bright. With Figma and other tools (finally) releasing native support for Design Tokens, the time is right for us to focus on the next innovations and the true vision we have been working towards; Tokens Studio – A Design Data Management & Automation platform.

As an open source company, we strongly believe that brands should own their design data, stored in an agnostic way that promotes interoperability between the tools you use to craft user experiences. We believe in an open ecosystem that is accessible for all and promotes contribution for the improvement of the community as a whole.

The ‘‘source of truth” has been an ongoing theme. For design systems in general, but also for atomic design data, such as design tokens. Currently design tokens have largely been limited to the use in component libraries for digital products. But this is just the beginning. We’re now seeing design tokens being adopted in motion design software, print applications, AR/VR, gaming and others. And of course we have the rise of AI on the horizon, there is no more illusion around the impact this new technology will make in our day to day work.

Considering all the above, it’s important to ask yourself how and where design data should be stored and how to prepare your business for AI, automation and optimal interoperability between your tools.

Say hello to Tokens Studio.