Improve variable dependency visualization

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.

2 Likes

This would be a great feature.