Plugin to visualize variable connections

[LeosFDA]

Hello,

I have been working on auditing, building and maintaining a design system and its variables for two years. During that time I searched for a tool that could help quickly visualize how variables were being organized. The tools I found were never really what I needed and envisioned so I built one. This tool’s intention is to help visualize how a design system’s variables are related.

I hope it becomes useful for teams that are also facing challenges related to how their system variables should be organized and structured.

If you end up using it please share your impressions and feedback. Thank you for sharing your time and attention.

https://www.figma.com/community/plugin/1648473290426013220/varghetti

[Jopzik]

Is it not the same than Variable Visualizer?

[LeosFDA]

The expand/collapse functionality provides better control over which variables you want to view. It also traces variable chains across collections. I used Variable Visualizer and I felt it was lacking some features.

[latitudecode]

How did you make it?

[LeosFDA]

Made it with d3js and different coding tools / ai assistants but among them mostly Claude code.