That makes light/dark mode a bit tricky. Not sure if you’re using that feature.

Yes. That is what is unfortunate. I have the semantic colors set up for light dark

Having the ability to see the Variable trail would be immensely useful for my Team, so would be amazing to have this implemented!

It’s also impossible for developers to view or copy the full set of variables without edit access to the variables file. This seems like a pretty big oversight, and has led our team to implement an ad-hoc variable handoff process where the designer must send the developer a slack message notifying them of changes to the variables, then manually export a JSON file using a third-party plugin whenever we need to make changes to the design library.

how is it even possible that this has not been included yet, it should be a priority

My dev team are complaining that they can only access Hex values, this is useless information now that we’re trying to use semantic colour names

I also really need this so our devs can see the alias, please Figma!

Sometimes it feels like Figma holds off on most requested features for the annual Config conference just so that they have stuff to announce.

I’d far rather they just ship continuously.

That said, the latest multi-edit feature is fantastic.

the same goes for other types of variables like Spacing

the same goes for other types of variables like Spacing ! Please have this for dev mode

We need this otherwise there is not easy way to share variables with devs. I have a lot of them already!!

Need this urgently! Using plugins like variables2css to bridge that issue can only be a temporary solution.

Still needing this a LOT for alias tokens in our DS… It doesn’t make sense to use an alias token for color if devs will only see the HEX value.

Extremely frustrating as a dev trying to implement color tokens.

1. You can’t see what a token inherits from.


2. Given #1 you logically go to look for the list of tokens to figure out what it is.


3. You can’t even see the definitions of all the tokens.

How the hell are you supposed to figure out what something like button/fill-primary is then?

Given how hard it is to figure out what tokens, even getting a consistent way of using them across the team is a disaster, with people using hexcodes directly, some using half-complete token implementations that don’t inherit from each other + the list goes on on with how many ways I’ve seen this root cause fragment implementations.

This is literally an unusable feature without plugins in it’s current state that does more harm on the dev side then good on the design end.

I really need this feature! In the meantime, my team is using this approach (which I personally think is a workaround, but it works).

I created primitive tokens and allocated them into styles, so the inspection panel returns this structure to me.

The perfect scenario would be if the panel returned this same structure for aliases, so I wouldn’t have to work with styles.

Keeping this thread active: our design director just asked what the quickest way is to find which variable alias we’re using for a form label. Our answer: break the color, reverse search the hex. This is SHAMEFUL. Please, please fix this. If not by introducing it in dev mode, then enable a read-only variables collection so that a user can trace it back through the design system library without actually having to open the design system file.

Omg. This. I have to use variable to css plug in and … wait for it…copy and paste into a word doc. Then cut out everything but the new or changed variables in the word doc 🤦‍♀️.

The lack of this option makes it very difficult to maintain a good relationship with developers 🙂 We solved it more simply instead of bg/brand is bg/brand (Brand-500), which is a little more work for the designer but the developers are happy.

I’m bumping this post as I find it so crucial for any product design system that I don’t understand why it hasn’t been introduced with UI3 changes.

The goal of our design system is for the developers to be able to implement it and turn it into a functioning product. If they only see the raw values (e.g. #e5e5e5) in Dev Mode and use those to build their components, it becomes unscalable and difficult to manage.

We want to separate our color library from component-level tokens for easier theming so seeing the references in Dev Mode is a must.

I have built https://www.figma.com/community/plugin/1310888112326715990/figma-variable-explorer, and I think it can be useful in this scenario till we get a native solution from Figma.

Note: The multi-level variable alias resolution is available in the latest release of the plugin.

I saw your post in another thread, the plugin is amazing, thank you so much for your work!

This is possible by clicking the dots when hovering the variable. Don’t know how long it has been possible, but I didn’t notice until now!

@Alice_Holm The feature just launched! I’m so happy!

Thank you, Figma team, for focusing on these quality of life and feature improvement updates versus new functionality. These kind of things make our work and collaboration MUCH easier.

Hey All,

@Alice_Holm and @Ashlee_Williams are correct! We launched Variables details in Dev Mode today! 🚀

More details in the release notes.

Way to go, Figma team!!! Hooray!!!