Allow Developers to View Full List of Variables in a File

Yeah, I’ve been looking for this—or a way to easily synchronize the variables with an exterior source so it isn’t just living in Figma. Unfortunately from what I’ve been able to see, that functionality isn’t available, or might only be on the enterprise plan…

Seems like being able to see the list of all the variables would be a pretty critical primary function of the Variables feature.

Yes I definitely agree, even if it means being able to export them for syncing to another platform. Otherwise right now syncing would be very manual and lead to a lot of room for inconsistencies.

This is a major oversight in the Figma variables feature. It is essential that developers on my team be able to see a full list of variables, and it seems that this is impossible in dev mode. Is the only way for a developer to view my variable collections to give them edit access to my design system file under the enterprise plan?

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.

I agree with this. The developers also need to see what “Primitives” your colors are connected to. For example, if I have a “surface-1” color token that is linked to the primitives “gray-200” for the light theme and “gray-800” for the dark theme. When the developer inspects my comp he will see “surface-1” and then just the hex value. They don’t get any insight into what primitive is being used. We’ve already worked with our developers to have our primitives named the same as the colors in their system (i.e. red-100, red-200, red-300, etc.) So, my developers who are building the components in our new design system will not know what primitive color to use when they create the color token. I can’t really use variables with my developers until this is fixed.

100%. It’s super frustrating to keep a table of them outside Figma then rely on the developer to have to find the corresponding primitive against the HEX code. It would make way more sense to just have them structured:

“Surface-1 (gray-200)”

or even

“Surface-1 (gray-200(#DDDDDD))” if needed.

I’m sure there is a better way to format them that doesn’t involve the dev team having to manually figure out all the layers of linked variables.

I want to give my +1 to this.
I also created a post with a similar request.
A lot of complex design system (like chakra) use this type of structure, is important for devs to know what values or tokens are creating.

Add proper variable values in Dev Mode - Share an idea - Figma Community Forum

yes please add this. we need it

Also wanted to add to this.
It seems like right now there is no way for me as a designer to view the variables on a file that I don’t have edit rights to, which means that I can’t get an overview of the variable/color system on some design systems that I might need to use without having to scroll through the color picker in a different file.
I wouldn’t even mind if I just had to turn on the dev mode toggle to view this, but right now it’s really hard to understand how a variable system is structured purely through the color picker.