Add proper variable values in Dev Mode

Imagine this scenario:

You have a green palette of colors and the corresponding variables.

green-100: #F0FFF4
green-200: #C6F6D5
green-300: #9AE6B4

Then you decide that green 100 will be your primary color in your design system.
So you create the variable on this way (in Figma variables).
primary-color: var(green-100)

If you enter into dev mode, it shows this:
color: var(–primary-color, #F0FFF4);
so basically is not taking into account the green-100 variable.

Why is an issue for devs?
because they can’t see the green-100 variable.
If tomorrow I want to change the primary color on my design system, and start using one of the red palette, but also still using the green for success messages, devs will have to change all the names manually.
So I think Figma could add a clear view of the variables/colors for devs but also the proper variable structure in the dev mode.

1 Like

A post was merged into an existing topic: Allow Developers to View Full List of Variables in a File

A vote has been moved.