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.
37 Likes
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…
1 Like
Seems like being able to see the list of all the variables would be a pretty critical primary function of the Variables feature.
5 Likes
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.
1 Like
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?
13 Likes
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.
6 Likes
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.
1 Like
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
2 Likes
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.
12 Likes
yes please add this. we need it
3 Likes
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.
1 Like
Yes please @figma, I’m screaming at this point.
2 Likes
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.
3 Likes
Is there any way to view a list of used variables? I think this is a crucial feature.
1 Like
Please add this feature! we need it!
1 Like
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 the Plugin
and let me know feedback or improvement suggestions. Thank You!
4 Likes
The title says it all.
In my team, only the designers has access to the edit version of the file, while the devs only use the view mode, so they don’t move anything by accident. The problem is that they can’t see the detailed list of local variables, and can’t see how is the design system working.
If we are making a design based on local variables, the devs should be able to see all variables because everything is based in the same data. This also applies to the styles, as they can’t see wich font a style has for example, wich I don’t think is very useful when developing an approved design.
2 Likes
Its a shame Figma dont have this option yet. Sadly, local variables won’t be as useful as they should be until this is an actual feature in Figma.
1 Like
Hi all, I read an interesting article on Medium related closely to this topic: The coming Figma Apocalypse nobody is talking about | by Jason Barrons | Nov, 2023 | Medium
Definitely possible we’ll only be able to have developers see all this functionality with paid seats in the future which is super disappointing.
1 Like
Very much need this! now we are using the naming workaround. But surfacing value near hex code would be great as well as allowing access to variable collections.
1 Like