Variable Atlas

About this plugin

A Figma plugin that maps and visualizes variable usage across your design files. Variable Atlas helps designers and developers understand how design tokens are applied throughout their projects, making it easy to audit, navigate, and maintain consistent token usage.

How to Use

1. Open any Figma file that uses variables
2. Launch Variable Atlas from the Plugins menu
3. Choose your scan scope: current page or entire file
4. Filter by local or remote (library) collections
5. Click any collection to expand and explore its variables
6. Click any variable or node to select it on the canvas
7. Use "Expand all" / "Collapse all" to quickly navigate large token sets

Core Features

1. Variable Discovery - Automatically scans and catalogs all variables in your file, including those from external libraries
2. Three View Modes - Browse by Variables (grouped by type), Nodes (layers using tokens), or Bindings (property-level connections)
3. Smart Filtering - Toggle between local and remote collections; scan current page or entire file
4. One-Click Selection - Click any variable to select all nodes using it; click any node to zoom directly to it
5. Type Organization - Variables are automatically grouped by type: Colors, Numbers, Text, and Booleans
6. Usage Counts - See at a glance how many nodes reference each variable or collection
7. Layer Status Badges - Hidden and locked layers are clearly marked with indicator icons

Key Benefits

1. Audit Token Usage - Quickly identify which tokens are used where, and spot inconsistencies
2. Navigate Large Files - Find and select layers by the tokens they use, even in complex multi-page files
3. Understand Dependencies - See which parts of your design depend on specific library collections
4. Onboard Faster - Help new team members understand your design system's token structure
5. Debug Styling Issues - Track down exactly which variables are applied to problematic layers