Variable debugger/inspector

I have a similar issue as well.

What I expect to see here is: Under themeStyle = Light, Primary text = gray-700 (Unfortunately, such description is not visible in the current Inspect / Colors).

Some way to inspect variables or see the current state of all the variables would be real handy now that you can do conditional logic in prototyping.

Agree. For example at the moment I am working on a prototype where clicking radio buttons should set a variable, but it doesn’t seem to be working. I’m sure I’m doing something wrong but being able to check a variable value while clicking through the prototype would be really helpful to debug where I’ve gone wrong.

modes in variables table are just for… some basic use cases, it is not a replacement for Tokens System, so let the extra fields remain, less bugs is alwais a good target

This is absolutely a must-have feature after Figma added advanced variable logic. I am beside myself bashing my head against the wall trying to figure out whether an issue I’m facing has to do with a mistake I made or with buggy variable implementation by Figma; there’s pretty much no way for me to figure it out without some formal debugger feature. Furthermore, if it is a Figma bug, it would make it so much easier for me to file a bug report. Please add this!

I’m sure the debugger as we se it wont come out soon, guys at Figma might already thinking about it but as a One-for-All super-mega game changing solutions with blows and whistles.

So for now the trick is making a debugger by hand from some text blocks and assigning the variables you are playing with in your prototype. And som boolean components too, like a test panel with lights. Sounds time consuming, but you will save on debugging sessions later

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.

I made a plugin called Variables Inspector to help with this!

Looking for an inspector to check what my variables and states are during prototype testing.

That’s pretty neat. It doesn’t work for me because I’m trying to inspect a mode.

Thanks. Any frame in Figma has a mode set explicitly or inherited from the parent or the page. Hence the inspector pane variable text elements should inherit the mode of the frame they belong to.

Could you elaborate more on how you are trying to inspect a mode, so that I can understand where the gap is?

Im using modes to assign variables to individual items. So let’s say i have variable A, that variable has 2 modes Brooklyn, and Manhattan. My interactions target the specific mode, so i don’t just need to know the state of A, i need to know the state of A > Manhattan.

Okay. When you set mode through an interaction, the mode applies to the entire page (see this official article).

Like I said earlier, the inspector pane is just a child frame, appended by the plugin to all top level frames. It will inherit the mode of the top level frame, which in turn inherits the mode of the page (unless overriden manually for that frame).

If your interaction is properly setting the mode for the page, then the inspector pane should show the value of the variable, down to that mode (I’ve tested this on my end by running the plugin, it works). If not, you might need to debug your interactions/mode settings.

To debug, I would suggest manually changing the mode for the entire page, when you are in design tab. If this is changing modes properly, then it narrows down to fixing your prototype interactions/checking for overridden modes for specific frames.

If you need more help, you may send an email to the support email of the plugin.