TokenBoard

About this plugin

TokenBoard is an advanced Figma plugin designed to give you full visibility and control over local variable collections — whether you’re building a robust design system, managing light/dark modes, or maintaining consistent styles across teams.

Features Overview

Explore Variables by Collection, Scope & Mode

1. Browse all local variable collections in your Figma file
2. Organized as expandable tree structures by collection, group, and nested groups
3. View and compare values across all modes (e.g. “Light”, “Dark”)

Smart Search

1. Instant full-text search across variable names, values, types, and scopes
2. Highlights matches inside nested groups
3. Keeps scroll position and selection while typing

Visual & Semantic Display

1. Color tokens show live swatches, hex values, and opacity
2. Boolean, number, string tokens are clearly labeled
3. Aliases display as links to target variables with inline previews

Aliases & References

1. Displays alias chains with resolved values
2. Clickable interface to explore alias references
3. Supports setting or detaching aliases via selector popup

Inline Editing of Values

1. Edit most values directly inside the table: Colors (rgba), Strings, Numbers, Booleans, Aliases
2. Shows validation states and editable highlights
3. Supports editing multiple modes in a variable

Selection-Aware Variable Inspector

1. Automatically detects all variables applied to the selected node(s) on the canvas
2. Displays them grouped by collection, scope, and mode
3. Resolves and highlights any aliases used
4. Handles nested selections and multiple nodes
5. Edit Values Directly from the Selection
6. Selection-based variable data is cached with a unique key
7. Improves performance when switching between nodes
8. Cache is auto-expired after 5 minutes or can be manually refreshed

Batch Update

1. Send a list of changes (e.g. 30+ variable updates) in one click
2. Type conversion (color objects, strings, aliases)
3. Font loading for FONT_FAMILY variables (with fallback to alternative styles if “Regular” not available)
4. Scope checks and error recovery per variable
5. Returns a report of successful and failed updates

Performance Optimizations

1. In-memory caching of selection data with expiry (5 min)
2. Caches up to 50 different selections to reduce API calls
3. Tracks which variables are already loaded to avoid duplication

Figma API Compatibility Handling

1. Graceful fallback if variable APIs or methods are unavailable
2. Error messages guide user to fix or retry

Clean, Resizable UI

1. Fully styled native-like UI with Figma theme support (light/dark)
2. Flexible layout with resizable panel
3. Displays progress during data load
4. Empty states and error messages styled for clarity

Ideal Use Cases

1. Design system audits
2. Token cleanup and maintenance
3. Visual QA of theme modes
4. Alias linking and optimization
5. Batch updates to variable values
6. Color or typography token management

Compatibility

1. Built for the latest Figma API with full variable support
2. Works in Figma files only (not FigJam)
3. Requires Variables feature enabled in your Figma workspace