Skip to main content

Improve variable dependency visualization


Maja_Maria_Dawn_Jaakson

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.

3 replies

Samuel_Hoh

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


Aguiar_Leonardo_extern

Highy recommend this plugin that is in active development: https://www.figma.com/community/plugin/1457362132545070106/variable-visualizer


Reply


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