Skip to main content

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?


token-mock

I can find many examples of exporting design tokens using Figma but my needs are the other way around - does anyone know how I can import design tokens into Figma?

This would be huge, I was just discussing with my boss this very gap between design/dev. Great write up too. Thanks

The spacings would be 😍

This would be such a game changer!

I have written one of the plugins for token export, but I still agree that i

you can’t solve it completely without first party integration.


For example using color tokens in color styles or shadow styles, etc. is not possible.

This would be amazing. Working on a design system right now and the biggest pain point for me is creating typography “tokens”. Users should have more granular control of “text styles” so that you can combine predefined font-family, font-size, font-weight, letter-spacing and line-heighttokens (or styles to use Figma’s language) based on use case. The “Figma Tokens” plugin gets close to what I’d like for tokens in general, but, as mentioned above, it’s too fragile to be used in production.

This would be amazing for multibrand design systems!

+1 Just another thing that design tools are lacking but these are all super basic concepts available to developers so surely they should be easy to translate into a design tool (Figma)

+1!


While this is often brought up with design systems and larger scale work, even the smallest projects would benefit from such systematic thinking.


I wish the tokens would be type agnostic in the way the properties of for example Style Dictionary (Amazon) are. That would enable designers to build the tokenization to their specific needs: timing, sizing, bezier, paddings, width, height, or whatever is needed. Basically an organized collection of constants that could be used to replace any value in Figma.

+1!

I already use tokens via a very good plugin and I must say that it saved my day. But the plugin is part of a 3rd party service and one must launch it each time.


It would be perfect to have tokens as a native feature!

Hi Costas. Out of interest, which plugin are you using? Would be interested to check it out in lieu of native support.

I would be curious as well.

Hi Patrick. The Figma Tokens plugin by @Jan_Six has a JSON tab that allows you to copy/paste you’re own JSON in to populate the plugin’s tokens. So that is an option. I really like the concept behind the plugin, but I’ve been finding that the plugin doesn’t always apply the tokens reliably.

Plugin author of Figma Tokens checking in: Got any feedback for the plugin? Always trying to improve it, as it’s Open Source on Github anyone can contribute — really trying to create a solution that pushes tokens forward for the community.


Could you clarify which part the plugin doesn’t apply correctly to? Currently trying to improve areas that the plugin is lacking in. One major upcoming feature for me at least is syncing to an external service such as jsonbin etc so that you can use your token set across all files).

As @Evan_MacAlpine mentioned this is possible in Figma Tokens! You’d have to follow the schema of the plugin though, which is basic JSON without any meta fields so far (got that on the roadmap though).


In this video example I opened the Pegasus Design System, then imported its Styles to Tokens by clicking “Import Styles” (it basically converts your local styles to tokens), then use that JSON to create styles in another document — you could very well skip that first part and begin with your own JSON.




Hey @Jan_Six. Thanks for the work you’re doing. I recently bought your Design System Organizer plugin on Gumroad too!


As for feedback, I’ve been finding that Tokens doesn’t always override previous styling. For instance, adding a different font size token to previously styled text doesn’t always change the size of the selected element. I’ll attach a screen cap here:




Edit: Feel free to direct me to a better channel if there’s a preferred place to leave this feedback.

Not sure how Figma will work with our design tokens when it can’t handle any values besides pixels. A lot of our tokens are set in non-pixel values like rem, %, vh, and others. So even if it had a built in token system, it won’t be able to understand most of them from code.

There are many great ideas in this forum, but this by far tops them all…

I was just discussing about this with my dev team, that it would be awesome to have something like this, because right now having to change spacing on around 300-400 views of an app is a huge pain in the butt for both designers & developers. I would absolutely love this new feature and your mockups are rock solid! 🙂

Ah, that’s not even my plugin 😅


I see, would you expect it to detach from its style? The way I use typography tokens is to let Tokens update my styles and then just apply those, as I believe Type Styles in Figma are superior to using single tokens. Controlling your typography styles via tokens however is a gamechanger though!

Whoops! True. I’m using Batch Styler as well, so amidst all the switching between plugins I got the creators confused! Haha. Sorry about that. I do appreciate your work though!


Okay, so you can’t use the Tokens in tandem with text styles? That makes sense. Perhaps I thought it would remove the text style and revert to tokens styling. Maybe some sort of warning would be appropriate specifying that “Tokens can not be applied to elements with a text style.” Thanks for the clarification.

Sorry for the delay @Evan_MacAlpine ! I didn’t notice the tracking feature. Anyways, the plugin is “Toolabs Design System Manager” Figma - Toolabs Design System Manager | ✦ Design Tokens, Theme Management and more... Define or update design tokens in one single panel...

No prob @Costas. Thanks for the update! I’ve seen that tool but haven’t tried it yet. Is it working well for you? Are you using it in production? Seems like it would tick a lot of our boxes. Also, @Jason_Williams, just pinging you because I think you were interested as well…

@Evan_MacAlpine , yes, I’m using it these days on a new project and I have to say that it works well.



  • To get the most out of it, one must understand the ‘breakpoints/devices/themes’ concept - which was a little bit confusing for me, but once I got it it turned as a time savior. As a result, it allows you to have multiple sets of tokens related to the breakpoints you wish.

  • Other cool feature is the way this plugin handles main colors, contrast ratio and shades/tints.

  • Everything you do in the figma’s plugin are reflected on the web-app in real time and vice-versa.

  • The design documents you create are shareable. You can apply them in separate files

  • The web-app creates an editable design document out-of-the-box with export options

🙌 Thanks a lot for the info @Costas! That’s super helpful. Always nice to hear how a product is working in the “wild”. I think I’ll try to check it out this week and see how it works for our setup.

Here at Twitter we’ve started using Design Tokens and one big piece is just handoff communication. We’d love to just have the name of the token be retained like colors but for others as well. Say Corner Radius, Border Width, Spacers.


I think some support could go a long way, the Figma plugin community can help with gaps. It’s just that I wish design tokens were native/first class citizens in figma.

Reply


Terms & ConditionsCookie settings