Back to Plugins
Variable Collections Graph

Variable Collections Graph

Visualize, trace, and analyze aliases between variable collections in Figma

Plugin Preview

Variable Collections Graph preview

About this plugin

Visualize and analyze the architecture of your design tokens. Variable Collections Graph builds an interactive dependency graph of all alias relationships between variable collections, giving you a meta-view on your token structure that Figma doesn't provide natively.Key Features:πŸ”— Dependency Graph β€” interactive graph (drag, zoom, pan) showing how collections are linked through alias variables.πŸ”„ Two Graph Modes β€” switch between By Collection (aggregated view) and By Mode (granular view showing connections between specific modes, grouped by collection).πŸ” Variable Trace β€” select any variable and trace its full dependency chain: upstream (who references it) and downstream (what it references) in a dedicated modal graph.πŸ“Έ Export to Image β€” export the graph as PNG or SVG with configurable scale (1x / 2x / 3x), export area (visible viewport or entire graph), and an automatic watermark footer.🎨 Collection Classification β€” badges indicating collection type: pure (all literal values), alias (all variables are aliases), mix (combination of both).🌐 Remote Indicator β€” see at a glance whether a collection is local or remote (from an external library).βœ… Filtering β€” multi-select filter by collections and modes with cascading parent/child logic.πŸ“Š Variables Table β€” click any edge to inspect the exact variable connections between collections, with one-click access to trace each variable.πŸ’Ύ Persistent State β€” node positions, window size, graph mode, and filter selections are saved between sessions.πŸ“ Resizable Window β€” drag handle to resize the plugin window to your preference.⚑ Optimized Loading β€” async queue with concurrency control for stable performance on large files.Why use it:Understand your token architecture β€” see the full picture of how your design system's variable collections depend on each other.Trace any variable β€” follow alias chains across collections to understand where values come from and what depends on them.Detect issues β€” spot self-references, circular dependencies, and unexpected cross-collection links.Audit before refactoring β€” know exactly what will break before renaming, moving, or deleting collections.Onboard faster β€” give new team members a visual map of your design system's variable structure.

Plugin Details

Version12
CreatedNovember 1, 2025
Last UpdatedApril 2, 2026
CategoryFile organization plugins
CreatorМаксим Π”ΠΎΠ»Π³ΠΈΡ…
Stats3 installs, 5 likes
PricingFree

Technical Details

  • API:1.0.0
  • UI:./ui/dist/index.html
  • main:./plugin/dist/index.js
  • Document Access:dynamic-page
  • Editor Types:
    figma
  • Allowed Domains:
    • none