Skip to main content
Question

How are developers supposed to access variables?


Bilal5

I might be missing something essential here, but I can’t seem to figure out any way for developers (who have view-only, dev mode access) to actually view variables in a file/project/design system?

As far as I can see, they can only inspect single components. So they might see “button-primary-bg” for instance, and a corresponding hex color, in the dev mode side panel. But absolutely nowhere can they actually figure out what “button-primary-bg” is referring to (typically a color primitive, which again refers to a hex code). Not only is the alias not visible in the side panel, but the full list of variables is not accessible in dev mode either, as far as I can see.

I mean, it’s probably okay if you look at the design system as a static thing, where we could do a one-time export of all variables as a .json or something. But design systems are seldom static. New components are being created, and thus new aliases are needed quite often, specially in the early stages of a project. Am I crazy or is this a fairly big omission…?

This topic has been closed for comments

14 replies

RizePoint_Product

I’m having the same issue. There’s a thread here where folks are voting on Figma implementing a solution for it here:


anastako.design

@figma should definitely sort this out! I am having issues with my team as well


Pv_experience

It is a serious pain.
Figma need to sort this as soon as possibile.


  • 3 replies
  • December 7, 2023

We need this too


Kevin_Rousseau

+1 ! Our dev team can’t access to variables


Miron1
  • 1 reply
  • January 10, 2024

Try switch off dev mode


Chelsey1
  • 3 replies
  • January 11, 2024

I can’t do this. Because I’m a dev 🥲


Angy_Brooks
  • New Participant
  • 8 replies
  • January 11, 2024

Are you talking about seeing ALL the variables that exist, or the variables applied to an object? If all, then I would think that sharing the library file with them would suffice, as they are also viewers if they are DevMode. But ideally they don’t need to see them this way. You need to export your variables in a format that dev can use.

Here’s a plugin that will export your variables to json:

If you want them to see your applied variables, this is what I see in DevMode.


Roman_Budzak

Hey folks, I found a way to manage it (it works with my dev team). All you need to do is add Code syntax to the variable.


It’s crazy that this didn’t exist from the time variables were introduced. Please, please, please make this happen.


Ognjen1
  • 2 replies
  • June 24, 2024

+1 We, as a team, are having same issue. Also, Devs can not switch between light and dark mode. That leave us with only one solution - to duplicate all design files and keeping two duplicate files relevant to changes is even greater pain


Liam_Morris1

Thank you for this!!


Zrinka_Z
  • 1 reply
  • August 2, 2024

Still nothing? No reference to primitive variable in dev mode? So I have to keep “cheating” with a mix of variables and styles as it gives better overview of primitives in use! 😮‍💨

image


George_B1
  • New Participant
  • 7 replies
  • August 3, 2024

How do you apply this “hack” if the semantic variable you added the code syntax to is part of a variable with multiple modes with different variables?
the code syntax is applied per variable, not per mode 😦


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings