Token Graph

About this plugin

# AboutVisualize and map your design system's token architecture. Instantly see how your semantic tokens connect to fundamental primitive values with an interactive, scrollable graph.1. How does it work ?• open the plugin in a file containing local variables• the plugin automatically scans your file for primitive and semantic tokens• a dynamic graph reveals connections between semantic tokens (right) and the primitives (left) they reference• hover over any token to softly highlight all its immediate connections• click any token to "pin" it and isolate the exact mappings for that tokentip : use the search bar to instantly filter down a massive design system by token name or hex value.2. Pinned Mode & Values :• select one (or many) tokens to pin them to the top of the interface• pinned semantic tokens can be expanded (using the accordion) to reveal exactly which primitive value they map to across your different modes (e.g. Light vs Dark mode)• visual SVG lines intelligently route from pinned items directly to their counterparts3. Helpful Features :• click directly on any hex code in the UI to instantly copy it to your clipboard• toggle between Light and Dark interface themes using the sun/moon icon note : if a token references a primitive from an external published library, ensure that library is available to correctly resolve the underlying values.