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?


The plugin has been approved and is now available. As said its a lightweight way to converting your existing local color styles to variables. It might have some bugs so please let me know if something is not working as expected 🙂 You can find the plugin here: https://www.figma.com/community/plugin/1230392206301573941


For anyone who uses the Token Studio plugin and isn’t aware yet, they’ve already added a new feature where you can sync all your tokens into Figma variables. The only requirement is you have to be using themes (which I think might be a paid feature in the plugin?)


totally agree with what you said, especially the issue with having to make each text variant as a separate style; i currently have 16 text styles which could have been shrunk to 6 if i could split font weight and underlining into separate tokens


regarding colour tokens with transparency, I think Figma’s recent introduced variable system allows you to set color variables in rgba


unfortunately, i dunno if this feature is available in the free plan or not


Nothing to be able to swap style with variable having the same name ?

I have variant with the exact same name as my style. It could be nice for me to be able to swap to variants in all my components automatically 🙂


I think you should use this technique to update all the styles to variables.


I hope everyone is enjoying the beta so far! Just as a highlight for those asking for additional features, we talk about our roadmap for this feature here. We’ll keep this thread open for feedback for now, but will close this out once variables exits beta.


Sounds really good, in fact it is AMAZING 🤩 Looking forward to seeing it going!


A post was split to a new topic: Professional plan should offer more than 4 variable modes


Would be great if transparency could be adjusted for nested variables (alias).


We work with “brand colors” (our product is a white label). To achieve depth and movement in the design we constantly use different transparency levels of a single color.


It is a very tedious job to manually change every layer with a different transparency, so we usually build components in a way that we only need to change a single color in the selection colors section (or mode with variables), but this often requires an extra layer of overlays or filters which are not very easy to maintain and add a layer of complexity when handing off to dev (since in dev mode they only see the fill of what’s selected and this workaround requires two layers to achieve desired effect).


This was also an issue with styles, before variables, but I was hopping variables to address it.


I apologize in advance if this has been mentioned as a suggestion at some point in this thread.


Would be great to have the right-click menu allow you to “Duplicate into a New Group”. An example would be like setting a baseline spacing set of variables and then duplicating values within this set to a radius specific set. Would save some effort in removing the appended number (because it’s duplicated into the main set) if you straight duplicated it, or saves you even more time from manually recreating these same values again.


Reply