The problem with variables at scale
Design tokens keep products consistent. But Figma doesn't show you where they're actually used.
Which layers use this color variable? Is anyone still referencing that deprecated spacing token? How many nodes depend on the external library we're about to update?
Finding answers means clicking through layers one by one. In a file with thousands of nodes, that's not realistic.
A map of your token usage
Variable Atlas scans your file and builds a searchable index of every variable binding. You see which tokens are used, where they're applied, and how extensively they're adopted.
Click a variable to select every node that uses it. Click a node to zoom straight to it on canvas.
Three ways to browse
By variable
See all your tokens grouped by type. Expand any variable to see every node that references it. Great for auditing adoption or finding where a specific token is applied.
By node
See every layer that has a variable binding. Filter to just the layers you care about. Useful for understanding how heavily tokenized a design is.
By binding
See the raw property-level connections between nodes and variables. The most granular view for debugging unexpected behavior.
Filter what you're looking for
Toggle between local and remote collections. Scan the current page or the entire file. Hidden and locked layers are clearly marked so you know what you're looking at.
Usage counts show you at a glance how many nodes reference each variable or collection.
Built for large files
Processes files in chunks with progress feedback, so the UI stays responsive even when scanning thousands of nodes. Builds in-memory indexes for instant filtering and selection. Resolves variables from linked libraries automatically.
Built with React and TypeScript. Full type safety and theme-aware styling throughout.