Skip to main content

LAUNCHED: Include color variable alias in dev mode side panel


Show first post

Chelsey1

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


Roxanne_G

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


So I will lose that…


Jakob_Schleenvoigt

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


owen5
  • February 2, 2024

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


Joshua_Kenzie

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


Alice_Holm

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


Blackwood

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.


Mahana_Delacour

the same goes for other types of variables like Spacing


Mahana_Delacour

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


Paloma_Pedrosa

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


stefan_koch

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


Joao_Rios1

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.


Nathan_Phillis

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.


Lucas_Campos

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.


Megan_Baim

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.


Roxanne_G

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 🤦‍♀️.


Dawid13
  • September 18, 2024

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.


Viktorija_Zajcic

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.


Mohit_Tater

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.


Viktorija_Zajcic

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


Alice_Holm

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.


dvaliao
Figmate
  • Community Support
  • November 19, 2024

Hey All,

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

More details in the release notes.


Roxanne_G

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


Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings