How are developers supposed to access variables?

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

8 Likes

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

1 Like

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

2 Likes

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

We need this too

1 Like

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

Try switch off dev mode

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

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.

1 Like

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.

1 Like

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