LAUNCHED: Include color variable alias in dev mode side panel

Forum|Forum|3 years ago
July 6, 2023
50 replies
5460 views

Hi. I have set up all my color variables in my design system “App_Usage_Collection.” But my devs use storybook and they call the colors by their primitive names, so I set up another collection of color variables called _Storybook. I alias the Storybook Primitives in the App_Color_Usage collection. BUT in dev mode I only see the app_color_usage collection variable name, not the alias. Can we also please see the alias listed? Thanks! 🙏

Show previous replies

RizePoint_Product

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.

Blackwood

New Member

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.

Cameron_Miller2

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