While working to build out our design system with variables, it seems like there isn’t an easy way for developers to view a full list of all variables built into the design system without having edit access to the design system or without the variables being put into a different reference system like a notion page as the master file and have Figma reference those values.
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?
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(#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.
Imagine this scenario:
You have a green palette of colors and the corresponding variables.
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).
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.
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.
Yes please @figma, I’m screaming at this point.
As a developer being able to view your design tokens is imperative.
I don’t understand why a read-only view is not there by default.
Is there any way to view a list of used variables? I think this is a crucial feature.
Please add this feature! we need it!
I created the “Figma Variable Explorer” plugin to tackle this problem.
While I know that a plugin-based solution is always ideal in comparison to the native solution, I wanted to take this as a learning opportunity to build a Figma plugin which solves a real problem. So if anyone is interested, please check this solution
and let me know feedback or improvement suggestions. Thank You!