LAUNCHED: Include color variable alias in dev mode side panel

Yes please!! Was looking for this and it would be immensely useful!!

Really… wanted to fix…

Tell your friends who agree to upvote this please!

I need aliases for my use case as well.

pleaseee, we need this!

I’ve created root variables for all of my root colors. Then, for each component I am creating alias variables for colors of specific elements (e.g., text, background, border) in different states (default, hover, active, disabled) and configurations (e.g., default, error, selected). The alias variables link back to specific root variables. However, in dev mode all I see is the HEX code, not the name of the root variable that the developer should assign as the value to the alias variable for the specific element of the component in a specific state and configuration. I think this is a big oversight, as the developer would need to find the correct root variable that needs to be assigned to each alias variable for each component for each theme when creating the themes in CSS by matching up HEX codes.

TL;DR; if a variable is getting its value from another variable, please give us the option to see this relationship in Dev Mode.

Here is a basic example:

/* Global CSS ------------------*/

/* root colors */
/* --[name space]-[var type]-root-[name] */
--ns-color-root-light: #AAAAAA;
--ns-color-root-neutral: #808080;
--ns-color-root-dark: #111111;


/* alias colors for Button component */
/* --[name space]-[var type]-[component]-[configuration a...n]-[state]-[element] */

/* light theme */
.light {
    --ns-color-button-primary-default-label: var(--ns-color-root-dark);
    --ns-color-button-primary-default-background: var(--ns-color-root-neutral);
    --ns-color-button-primary-default-border: var(--ns-color-root-dark);
}

/* dark theme */
.dark {
    --ns-color-button-primary-default-label: var(--ns-color-root-light);
    --ns-color-button-primary-default-background: var(--ns-color-root-neutral);
    --ns-color-button-primary-default-border: var(--ns-color-root-light);
}

/*----------------------*/
/* Button component CSS */

color: var(--ns-color-button-primary-default-label);
background-color: var(--ns-color-button-primary-default-background);
border-color: var(--ns-color-button-primary-default-border);
/* When I inspect the Button in dev mode,
I want to see the names of the variables that these three
variables are getting their values from, NOT the HEX. **/

I’m having the same issue. My devs need to see the values that are feeding the semantic components, but there’s no way to do that in dev mode. The unfortunate workaround is that I need to manually define the underlying primitive values using Code Syntax, which is going to be a time consuming task for 250 variables. Please introduce this feature!

I have THOUSANDS (really) of aliased variables. I need this feature. Let’s do it, Figma! 🔥 🔥 🔥

Hey, @Josh ! How are you doing?

It would be great to get some feedback on this issue here, so I can know how I should use aliased variables for now… If Figma is going to implement something in the next few days, I’ll keep my semantic-to-component-tokens scheme, otherwise, I will only use semantic aliased variables for now… Could you help us, please?

Thanks a lot!

Hey, @RizePoint_Product , did you find any plugin to help?

Unfortunately not. We settled on a workaround, though, which was me listing the color “formula” as a note next to the relevant components.

Ex: All outlines are [color]-70, all text is [color]-80, etc. The “Color” is part of the component properties so that, at least, they have access to.

Upvoted along with a few other similar requests here. Developers REALLY need this to implement and maintain design systems in code. Right now you need to make all your developers editors just to see the alias mappings. Or provide a screenshot of the mapping.

It feels like a core part of the variables feature to be able to see the trail.

I am also running into this same issue. We have put effort into defining two collections for color variables: one collection for primitive colors, and another for semantic color variables. Upon our initial attempt at development handoff with our newly defined semantic color variables, our dev team immediately came back to us with confusion as they weren’t able to reference the primitive color tokens (which is what they are used to referencing, and what they have defined as tokens in their css). So now what I need to do is essentially revert our handoff documentation to reference the original color styles, which is certainly not ideal.

It would be GREAT if Figma could display the root/primitive/aliased color token alongside the hex value in dev mode. Please and thank you!!

I honestly can’t comprehend how this made it passed the whiteboard stage without including something as necessary as this

Yes please, we run into these issues far too often during design handoffs from myself to the devs. Please update this 🙂

Please, I need this. Now! 😉

We really need this, please Figma 🙏

That would be really awesome 🙏

Dev mode needs this update +1 +1 +1 +1

Please Figma, add this!

This is also needed just as a designer trying to manage color name aliases. When designing I often want to know the aliases and it’s very slow trying to manually track them down.

Has anyone found a good workaround?

Dev mode needs this as a feature for it to be a usable product.

I’m the original poster. As of today the UX team I work on decided to hide our color variables semantic set and redo all our components in our whole design system using our primitive color variables set. That way the devs and we will all see the same thing because this forum item looks like it will not be addressed

It would be nice to at least be able to see the variables set up by the designer. Then we can match the variable hierarchy they are using.