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.
You are absolutely right and that is another pain point for our team - why devs can see only hex value of a color not the token it is leading to? 🤔
- Ability to view full list of variables and ability to export to common formats
- Toggle-switch to export to resolved values (as is the current way) or variable references (highly consider this to be the default when implemented, this allows for a hierarchy that design systems expect)
- Ability to track which components and layers each variable is assigned to
- Allow flat list or grouped by file/page
- Lint button that’ll pop up with 2 columns, one hardcoded value and on the right the suggested variablized counterpart
I feel like all of these should be built into the variables system without needing to reach for a plug-in. Please continue making the variable system more robust. It’s a bit sad when many basic functions requires the use of a plug-in. Less focus on AI, more focus on what the customers need, please.
Hey All, thanks for the feedback and sorry for the lack of acknowledgement here!
We’ll pass this onto our Variables team for future improvement.
This should be the top priority over anything. Thanks
Yes please!
Whenever we made changes to the design tokens, our developers would copy the Figma file with the design tokens locally into their draft where they had edit rights and could view the variables x) That’s a terrible way …
I will be so great when managing the copy, to be able to share all the strings with the developer, or expert the variable (json or csv)
The lack of this feature is costing our team so much time and so many headaches. This should have been a given at day 1 of variables in Figma. Right now there is NO proper way to hand of variables and styles to development outside using Figma Enterprise and fetch them with the REST API, which is way to convoluted for most use cases. A developer shouldn’t need to be dependent on a designer being available to even just see the variables in Figma.
I hope this will be fixed really soon.
A much needed feature.
This should be marked as a top priority. Why are all our variables and tokens hidden from our dev team? Please, Figma!
+1 this is desperately needed.
+1 it’s will be really usefull
One of the critical obstacles before using variables in handoff (other than the horrendously set pricing tiers for variables).
At the moment, we need to create examples for each mode on the artboard to show the different variable instances. This is faster than creating 32 component variants, but it is also very inconvenient.
Even a straightforward “show mode details” on the playground panel would do miracles.
To be honest, most aspects of the new updates since 2022 Config feel like they were created in very isolated environments with second-hand research.
Hi, see if you would like to try out the plugin. I recently added some of these features to latest release.
I just tried out the new version @Mohit_Tater and love the updates! 😍 This list view is a great option for sharing with my eng. Thank you for listening!
Great plugin, I like both the table and css views—but what I really need this for is View Only devs to be able to see what the variables are.
This feature is highly requested by our development team, at the moment, we use a plug in for it to display them, but dev-mode would be much better. But one more thing that make it worth the money of the expensive dev-mode licence.
+1 now that we are using various modes, this feature would help greatly when setting up new projects by defining full sets of variables.
@Mohit_Tater Thank you! The plugin is neat. The only thing I noticed is that the plugin brings the variable list from the same file it is running. As our variables are in a separate file (one file for Foundations/Design System, and one for Layouts and screens), devs still have to go to the Foundations file to find the variables. Perhaps that’s a Figma limitation. Just sharing our use case ; )
Thank you for the plugin!
Thank you, @Mike_Ramos2.
I understand the use case. I will check if it is possible and if I can implement it in my future releases.
Thank you for using the plugin and for providing suggestions.
We wrote about this in 2023. Unfortunately, the situation has not changed yet… It’s mega inconvenient that developers can’t view variables in the viewport. Giving everyone access to edit is extremely expensive, simply impossible.
Can Figma mvp a basic version of this? I’d be happy with being able to import a frame/component to FigJam as something dumb like a PNG that updates if the underlying object in the Figma design file updates.
The copy and paste works well but is a bit onerous and opens up potential errors.
This is so imperative.
Not having this feature has contributed to thousands of dollars of redoing work and is a serious pain to manage and communicate.
Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.