Design Token support in Figma

  1. To create 1000s of Design Tokens and create relationships between them Figma doesn’t have the support. It is not possible create Alias tokens (referencing one token/style with another token) in Figma.

  2. For utilizing the power of design tokens, Figma needs to become the single source of truth. Where all the 1000s of tokens can be created and exported in developer consumed formats like JSON.

  3. How do other teams using a large number of hierarchical tokens manage them? Do you use custom-built tools? Third-party tools? or maintain them separately in dev environments and Figma?

This is how the Figma Tokens and Design Tokens plugins works.

For now let me just recommend my own plugin for this (it is actually an all in one Figma to React Native Code plugin, but the design tokens are a good part of it): https://www.figma.com/community/plugin/1053790655021729426

All figma styles (texts, colors, effects and grids) are exported as design tokens by default. You can also create any additional token / token group you want (for things like Sizes and Spacing) and link them to any Figma Properties. Later you can select a token and batch update all linked properties.

Finally, there is also the possibility to export them to JSON and/or send directly to a GitHub repository.

Hi, I am trying to determine if/how our team can use design tokens and have our UI Dev team see them in the inspect panel while using a reviewer free seat.
Let me know if it’s feasible or how your dev team works with design tokens on Figma.

P.s we are currently using Zeplin as a workaround for that.

Has there been any update from Figma on this topic? Is this on their roadmap? @Figma_Support

1 Like

bumping this as I feel it’s one of Figma’s missing piece and would really speed up design and maintenance as well as allo designers to quickly deploy and apply changes on a design system and designs.

1 Like

Yeah, this will help bridge the gap between Design and Development big time. I hope this is being worked on this year. This will definitely put Figma on a new level since most tools don’t integrate with development.

2 Likes

This would be amazing. Here is how we thought about that topic:

7 Likes

has the team acknowledged this as a future feature?

seems like the next big thing figma can release that will make our lives easier :slight_smile:

3 Likes

Hey, is the native token support being developed? i like all the plugins but our company wants to use one tool with all the features, without relying on plugins. The only thing stopping us from switching from Sketch to Figma is the design token support.

+1
This would be massively beneficial to me and my team.

Definitely needed!

2 Likes

Can we have an update on this from the team? This topic is 1 1/2 years old. Would be good to know if this feature is being worked on or if it will never be implemented.

3 Likes

+1
Really wish this was a first party feature.

1 Like

As the 666th vote on this, I feel I am entitled to a devilish laugh :imp:

Jokes aside, @Josh it does seem worthy of an official reply. Design tokens are a big deal, and somehow I’m assuming there is a solution in the hopper.

Here is hoping for a simple token panel on the right, where you can select a collection of styles, give that style collection a name, and when you edit a component/element in the canvas, you can apply a style token. Something/everything is selected in the canvas, activating a style collection/token will apply those attributes to all elements/components in the current page or selection.

Hey everyone! :wave:

While we can’t share specifics or a timeline, token support is something that the team is actively working on! We definitely understand the importance of this feature, and it’s something we really want to make sure we get right.

Apologies that there hasn’t been an update from us on this yet (that’s my bad). I can assure you though, we’re still actively listening to all of your feedback and ideas, so please keep em coming.

Thanks! :blush:

3 Likes