Skip to main content

We currently have different libraries in which we store different levels/layers of Figma variables (encoding design tokens). In our current set up, we have a Semantic library, with variables pointing to variables in a Themes (light/dark modes) library, and those point to colours in a Primitives library.


Right now, there isn’t an easy way of seeing the library in which a referenced variable exists. If I have a variable x referencing y, it seems like I need to try editing x to see where y is coming from.


Tokens Studio has this great visualisation that you can open in a browser from the plugin in Figma. It’s built using https://reactflow.dev/. I guess the same could be made for Figma variables, but we don’t even need a fancy solution like that one.



Within Figma, even a sticky header would make things less painful. And a “variable explorer” view would make things so much clearer, even if it only let you see one full path through the aliasing graph at a time.

This would be a great feature.


@Samuel_Hoh


I created a plugin that should solve this problem. It allows you to view and export all variables in JSON or CSS format.


https://www.figma.com/community/plugin/1434720635503158584/variables-design


Reply