LAUNCHED: Variables! (Design Token support in Figma)

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

1 Like

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…

1 Like

@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
1 Like

:raised_hands: 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.

17 Likes

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

Community Page: Design Tokens Community Group

5 Likes

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! :smile:

4 Likes

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?

3 Likes

…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 :100: :100: :100:

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.

4 Likes

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.

1 Like

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 Like

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

1 Like

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

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

1 Like

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 :stuck_out_tongue:
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 :sweat_smile: