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…?

[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:

Include color variable alias in dev mode side panel

I’m having the same issue. My devs need to see the values that are feeding the semantic components, but there’s no way to do that in dev mode. The unfortunate workaround is that I need to manually define the underlying primitive values using Code Syntax, which is going to be a time consuming task for 250 variables. Please introduce this feature!

[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.

[SocDesign]

We need this too

[Kevin_Rousseau]

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

[Miron1]

Try switch off dev mode

[Chelsey1]

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

[Angy_Brooks]

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.

[Ty_Cooper]

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

[Ognjen1]

+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]

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!

[George_B1]

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