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.
I’m quite disappointed this still isn’t part of the Figma Dev mode. It actually made me regret my choice to use Figma variables.
The main issue is with variables that point to other variables. The dev can’t see that, and now need to look up by hand what it points to. Which just costs so much extra time.
Example
Card Fill → Alpha 5% → HSL(0, 0, 0, 0.05.)
They can see the HSL thanks to the color section, but they still need to translate this to Alpha 5%. Figma, please fix this.
@Mohit_Tater Thank you for creating the plugin. It does help, but only limited. It still means devs have to switch to the plugin and have to find the value there.
I spent the best part of a week refactoring our design system from styles to variables, only to discover now that our dev team can’t see the colour variables that the local variables are referencing, only the hex code. Figma spent more effort on the marketing and promotion of this feature than they did on thinking about how it is going to be used.
bumping this up. my stone age solution for this is to screenshot the variable table and send it to our engineer for visual difference between theme/color space 😭
@Claudio_Fresta_Suharno @Kelly_Dyson see if you want to try this out.
Hi,
Will there be an update from Figma if this and/or Include color variable alias in dev mode side panel is planned?
thanks
Keeping this issue alive. It’s desperately needed. I’ve also spend weeks migrating to variables and creating aliases to establish a set semantic variables - only to find they’re stuck in Figma. I can’t even copy and paste from the variables panel. While it’s possible to sync with Github - there must be a simpler way.
Adding another vote for this feature. Without this, it is much more difficult to get full support from our team to migrate to a Figma local variable-based design system, which I really want to do but can’t without the full support of my team.
Adding another vote; as a developer
As a developer this would be a huge time saver
@Emilio_Venegas @Andrew_Sims @Won_Sun_Parque2 for the time being, see if this is useful Allow Developers to View Full List of Variables in a File - #16 by Mohit_Tater
+1 on this please. Variables are a great tool to tokenise and collaborate with developers but loses alot of it’s value without the viewing option. Even for our design team, only the edit access users can view the variables. We are currently working with screenshots. Please prioritise this one!
This is badly needed.
+1 ; Would be really helpful for our developers to have access to such a list 🙂
+1 This is a big reason our developers have not been able to adopt the variables we took so much time to set up.
+1 we need that. I do not care if it will be for pain or free plans, but please do it
+1 Any news?
Our developers still can’t access primitives/tokens. They need to use plugins(which often don’t work as expected) > JSON > parser… If something changes in the variables, they have to repeat the whole process. Has anything changed? Or only proper / automated way is syncing DS with Github (Enterprise seat)?
Figma: Let’s make variables!
Designers: Yaaay!
Figma: But let’s make developers suffer.
Developers in dev-mode: You can’t see tokens in dev mode that you paid for
+1
Using Variables everywhere seems great for designers, but why hide them from devs even in Dev Mode?
+1, this is a big pain in the butt, since I have to additionally spec color tokens > primitive colors > HEX values in my mockups, instead of Figma doing all these mundane chores automatically for me. Please prioritize this, folks 🙏
+1. Need the ability to use variables within Dev Mode for effective collaboration.
+1. This feature is needed to have all parties on the same tag system for multi platform UI
Has this been implemented?
+10 for this feature - even something as simple as exporting the variables into an excel or google sheet as a quick fix would mitigate some of the major issues here. Currently managing a variable library of over 1200 tokens, the ability to manage versions or keep track changes before they are Github ready (where our eng. design tokens live) is painful. My eyes have crossed so many times trying to figure out how to streamline this effort.
@Mohit_Tater’s plug-in is the best thing I’ve found that will allow you to view everything in a list format. Thank you for your effort here! But still need some native functionality to rectify this issue ☹
My current use case involves managing core color variables and token variables within our design system. Designers frequently use core color variables when assigning colors, while token variables are primarily for maintaining color consistency across components and aren’t used directly by designers.
To streamline the color selection process and avoid clutter from unused token variables, I decided to unscope these token variables so they wouldn’t appear in the color options. This solution effectively removed unnecessary colors from the selection menu.
However, this change introduced a new issue: if we need to use a token variable for a specific component, we now have to manually scope the variable, publish the library, apply the color, and then unscope the variable and publish the library again. This process is cumbersome and not ideal for efficient workflow management.
All of this to say, a simple checkbox for “view all scopes” or “ignore scoping” in the color options menu when picking a color would solve this problem.
It is a must have to work efficiently with developers 🙄
Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.