LAUNCHED: Variables! (Design Token support in Figma)

It looks like Figma may have taken part in the recent “Design Tokens Community Group” vendor roundtable meeting? I’m hopeful with competition starting to add first class support for design tokens, and standardization looking possible, that we’ll see something before too terribly long make it’s way into Figma 🤞

Community Page: Design Tokens Community Group

I want to have a way to set different values (like color) through property values. By adding an input field that lets you set variables, you’re making this possible. There won’t be any need for billions of components for any color you can think of. You could also make variables set to text (good for pseudo usernames!)

This is a quick mockup I made showing how this could work, maybe add a color picker?

What do you think? Would this help you? I know it would help me 😛

Hi @Dennis1 , by using components with variants, you can easily achieve this right now in Figma. If you prefer, there are also multiple plugins to achieve a similar goal such as Color Theme Manager and Themer.

I hope this helps!

I know variats are a thing 😛
But sometimes I want variable colors and stuff, something like Unity, where you can just drag (e.g) an icon onto the input box and itll use that

I wouldn’t really want to create a new component for each possible combination 😅

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.

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?

That is great news. Thanks for the info!

Any update on this? Theme-able design systems are a must-have for my team and the current implementation of styles makes this very painful (borderline impossible). Plugins are buggy and can only take us so far. Thanks for all the hard work! 😀

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

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.

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!

This post is great, throwing in $.02 as a feature request. Definitely hits on where we’re also hampered in advancing our Design System. Real Design Tokens, that would allow styles to drive other styles, would help reduce the likelihood/potential for bloat in splaying out a lot of options, aka what variants did for components, having these would help immensely at the Atomic level to support multi-brand/omni-channel initiatives. It also would better match our user’s workflows to have a baseline color palette that drives usage-specific variants. Does Figma have any plans to put this feature on the roadmap this year?

…would help reduce the likelihood/potential for bloat in splaying out a lot of options, aka what variants did for components

@Dean_Wong This sums up the need perfectly 💯 💯 💯

Would indeed be a game-changer.

It would be nice to also be able to switch between different token-sets (As the Figma tokens plugin does)

Agree, the gap between front-end and design tool must be closed. @figma we need to define master unit (1 rem) and use it for font-size, line-height, paragraph spacing, auto layout padding, spacing.

Adding my voice here. This has tremendous value for my org of 60+ some odd designers and many hundreds of engineers.

Has there been anything in any of the coffee chats or other social channels from Figma hinting and this? We’ve tried different plugins that have worked at times, but I prefer a first party solution. I would hate to think Figma to let Sketch win on the management of color styles.

I would wish I could vote for this topic twice, My company is finally coming around to component level thinking, this has been a major roadblock.

+1
I’m an integrator, and it should be awesome for us to have this feature to see spacing-s instead of 8px

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.

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

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

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

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.