Design Token support in Figma

When I set the text properties, fields, baseline grid and so on, I have to write these values down, keep track of them, copy from one property to another, multiply, divide them and I do all that manually.

I propose to set variables right in the value fields. It would make saving and using numbers and simple formulas for building the ‘system design’ more convenient.

6 Likes

When I’m working with Figma and create a prototype, I often have values that are repeating like a consistent padding/margin, a consistent drop shadow or border-radius for different components and many more. When I want to change it, I have to change it in various places. It would be cool if there was an option to bundle this in variables (like it’s already possible with colours)

Do you also run into those effort-high changes?

3 Likes

I have a design system that I use as a starting point to build up UIs for my clients.
My design library is based on atomic design and I benefit a lot from my systematic approach of using the same tokens across the whole library.
So the usual process for me is to decide what corner radius I will use to match my client’s style, decide on line weights for the borders etc.
Now it is a lot of work to override these values one by one for each component.
If I could create tokens and build units in Figma my job would be easier and quicker.
I imagine a similar process as to how you can maintain a type and color system.

(Also it is useful when my client asks for a change in these tokens. I could even quickly show them the difference between different options on the fly.)

1 Like

Have you tried using a plugin for this? Here’s one: Figma - Figma Tokens | Design tokens are an integral part of any design system, with Figma Tokens you can reference valu...

I would love for this to be supported natively in Figma. Fingers crossed it will come in a future update.

6 Likes

This is awesome, thanks a lot @Grant_Novey !
Yes I agree, a native support for this would be the optimal solution.
Yesteday I watched some Figma streams on Design Systems and there were mentions about this feature. So yeah, fingers crossed!

I often find myself repeating the same numbers for certain attributes like border radius, stroke widths, animation time etc.

I also maintain Design Systems and although styles, effects and assets are great when accessing with the Figma API, other measurements feel a little more hacky, relying layer naming or other non-standard means to read values.

Could this be better:

I believe this explains it but I welcome any thoughts.

19 Likes

Hi there, I’m Design System Technical Leader and I have a question for Developers handoff.
Can we have those tokens inside CSS code in Figma?
in replacement of hex code have tokens name for example?
I didn’t see that maybe i’m wrong…
Other think, can we link that to Style Dictionary?
Thanks a lot

3 Likes

+1 on this, variables in Figma (instead of absolute values) for better supporting design tokens would be awesome

For anyone interested, Specify is an app and API that aims to solve this across different applications and environments.

While it is still in early access, they are prioritizing teams as it is still under development.

The way it works is that it takes a connects a Source (Figma, Sketch, XD, etc.) and looks for tokens such as styles you’ve defined, but also specially named layers for things like Spacing and more. It presents this in the app with a list of all tokens in the document and are automatically kept in sync with your Figma file.

Developers can then use a JSON file to specify the format that they need the tokens in using several pre-made parsers which can be used to generate code in your desired format for the project (CSS/SCSS, Theme UI JSON, React components, you name it)—it also allows you to write your own parsers.

The company is also part of the W3C Design Tokens Community Group which aims to specify a standard for defining, delivering and communicating design tokens.

They had a roundtable in July, where several companies, including Figma were participating in talks about adopting this standard.

Hope this helps.

4 Likes

+1 on this. Nested styles and spacing would be huge for design systems.

The process becomes very painful, long and at risk of human error without the ability to nest colours and type styles into design tokens from an overarching “theme”.

Spacing tokens would be a huge game changer too. As would border radius. Having these as styles/variables would be massive for multi-brand design systems in order to be able to create differentiation per brand quickly and easily.

Spacing feels like a it would be a big undertaking but surely the concept of nested styles is something that wouldn’t be too difficult to implement. Please Figma!

5 Likes

I’ve been waiting for Figma to implement a simple token reference for over 2 years. Even something like Semantic Color Sync by YNAB, but working with external libraries, would be a nice stop gap to a true token system.

1 Like

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!

3 Likes

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 :ok_hand:

1 Like

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.

2 Likes

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.

4 Likes

+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.

2 Likes

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.)
Figma_New-Style

4 Likes

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.

1 Like

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

4 Likes