New Participant

LAUNCHED: Variables! (Design Token support in Figma)

Forum|Forum|5 years ago
January 27, 2021
110 replies
31710 views

We have been managing our design system(s) for Desktop, Mobile, and TV applications in Figma for some time now and the experience overall has been great (especially with the updated Auto-Layout model) but one thing that has been extremely difficult to manage are design tokens. When I say manage I actually mean we are not using them because there is no solution to do so between Figma and our actual developer component libraries (Apple TV, iOS, Android Mobile, Android TV, HTML TV, HTML Desktop, etc…). We would love to more widely support themes in our apps and at a minimum use tokens for colors, spacing, font weights, and more. This would not only dramatically help with design speed and consistency but allow developers to more easily translate the components and layouts to real platform components (if you could inspect or export the tokens).

Here are a few key items that are quite difficult without first party support for tokens.

Color Themes: Without tokens you have to rely on color styles which have a few issues. One the alpha is part of the style so assigning a color style to an auto-layout background requires you to have a color for every alpha variation you may have (ie: modal overlays). We have written a plugin to replace theme colors with another theme but this is a bit of a hack and again can only replace the entire rgba set instead of just the color without affecting alpha. With design tokens and a few UI tweaks this would all go away.
Font Styles: Today, Type styles comprise font, weight, line-spacing, etc… which in general is great but if you want a bold, italic, or weight variation you have to create a style for every variant. This would be much more efficient with with tokens (ie. font-face-body, font-face-heading)
Spacing: While auto layout is amazing it would be so much better with paddings and gaps being able to be set via token. Today if you decide you want to change the standard gap between list items or card row items you will find yourself drilling down through a lot of components and manually updating pixel values. How much nicer would it be to change the spacing-s token and see everything update! I know some people use spacers but they just muddy design layers and with create so much complexity when auto-layout already supports individual paddings for T,R,B,L. The other issue here is that while you will have a component library the designs that use that library often use frame specific auto-layouts to compose them into the design. This means there is no downstream update to those designs if I want to change the standard margins on the left and right of our designs. Each and every frame (app view) has to be updated. For us that could be hundreds. If the tokens were part of the shared library (like styles) then designers would just use a spacing tokens downstream when laying out a page. This allows me to update the design system and as designers accept the changes in other files the spacing (margins) in this example would just update.
Developer handoff: By not having first party support for design tokens the only thing shown in in the inspect window for developers are styles and pixel values. It would be so nice if designers could export JSON and/or CSS variable code that defines the token model to provide developers (or let the developer download / copy them). Then in the inspect window the developer could see the tokens used for colors, padding, and so on.

I know there are plugins out there that attempt to help with this but they are just to fragile because the plugin system does not support modification of the actual Figma UI (which I think is a good thing). However, considering how important tokens are to modern UI design and component development, I feel like this may be something the Figma team is best suited to address.

Here are some quick and dirty mocks on implementation thoughts, based on the current UI. These are just meant to be thought starters so take it with a grain of salt. But I would love to hear what other think. Do others want this feature as well? Are you REALLY wishing we had design token support? Figma team, is there anything on the roadmap for something like this?

Share an idea

Show previous replies

tpict

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!

Dave_Loneragan

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 👌

dzintars

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.

Andrew16

New Participant

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.

Jean-Christophe_Besson

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

K4mij33

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

K4mij33

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

rodrnio

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.

Roberto

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

Deepak_Choudhary

New Member

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

Show more replies

Sign up

Login with SSO

Login to the community

Login with SSO