I’ve spent hours mucking around with design token plugins for Figma, and found none that both

• 
  

  make life easier for designers using Figma, as opposed to more difficult

  
  


• 
  

  produce tokens for all properties of each component including spacing, borders, motion etc

  
  

It’s a challenge for plugin developers that Figma’s “styles” only include typographic and color options. Plugins have to implement remaining properties by their own rules, complicating designers’ workflows.

First-class support for tokens would be huge. Please consider it!

Another +1 here. Even just being able to create local styles in a file with semantic names, but referencing styles defined in another design system file. E.g. ‘border-subdued’ is mapped to ‘gray-200’.

Being able to export or sync tokens to CSS variables or a library like Tailwind would be 👌

YES from me!

This definitely will be huge! I heard in some video that Figma team “are on that” and taking into account W3C Design Tokens initiative I believe there is some background work in progress.

So far I tried to use few Figma plugins, but they all feel clunky and … limited…

I think, this feature could transform the mainstream design community for the good.

I echo the same sentiment by @tpict .

I have had days wasted where as all those could have been done just by changing styles manually in Figma and be done with it.

Tokens System to me seems to make sense if a designer know exactly what to Tokenize. I would implore caution for those who quickly think all this as easy as clicking “import” and be done with it.

I have attempted incorporating Tokens System many times on my own design system (with many drafts wasted) and each time I use or update it’s unfortunately bogging the entire down performance nightmare. Up to two minutes just to “update” anything.

I stress that I am not entirely against the Tokens System. This in theory should have been native. And I do look forward to see how it evolve accessibly overtime.

+1 I don’t understand why Figma didn’t yet implement real token management and styles enhancement. So useful and mandatory… and not really hard to handle.

+1

If I have 5 different colors, 3 different border widths and 7 different opacities, then we have :

5 + 3 + 7 = 15 tokens.

But currently on Figma, to make the different combinations between these parameters, we must have :

5 x 3 x 7 = 105 styles

This makes 7 times more parameters to update. And only for the combinations for the border.

For shadows, I would have liked to be able to combine 3 independent tokens: an elevation + a color + an opacity.

As in Figma the style embeds the parameters of the fill, the border, the shadow, in real, it would take thousands of styles.

It’s unmanageable.

However, with Figma Token, you can’t apply a different opacity between the fill and the border.

I would have liked to have this possibility, like for the color tokens where you can choose if you want to apply it to the fill, the border or both.

And if not through tokens, then it can be achieved by creating new style types.

In addition to text styles, color styles, there could be border width styles, border radius styles, alpha styles and elevation styles.

And we could combine them like in the image below.

(In the old image below, I did not illustrate the Border Radius style, which does not apply to text.)

A file or library configuration where the users could define global variables and assign each of them a value. This variables then can be used as a replacement of the actual value. If the global variable value is modified, this will automatically update the dependencies. This variables can include numbers, booleans, strings, hex code, etc. Fusion 360 have a similar feature for similar purposes.

Example: Create a variable named: padding_small with a value of 24px. Then, create a frame and use a padding of padding_small instead of using actual numbers. This same variable can be used for multiple items. If the global variable is modified, it will update the different instances using it.

This would be massive improvement for efficiency and dev handoffs. Waiting eagerly when people at Figma notice this. Ping @Josh @thudson @ksn @dvaliao

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

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.

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.

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

has the team acknowledged this as a future feature?

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

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!

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.

+1

Really wish this was a first party feature.

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

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.