Dashboard
System health and usage metrics at a glance
Total Variables
247
+12 this week
Active Tokens
189
76% usage rate
Collections
8
3 recently updated
Variable Distribution
Recent Activity
Quick Actions
Scanner
Stop hunting for hard-coded values. Let the machine do it.
Scan Configuration
Scan Results
Hard-coded colors
12 instances
Typography inconsistencies
8 instances
Spacing mismatches
3 instances
Visual Tree View
Bulk Actions
Components
Your design data, raw and unfiltered.
Live Inspector
"type": "TEXT",
"name": "button-primary",
"characters": "Get Started",
"fontSize": 16,
"fontName": {
"family": "Inter",
"style": "Medium"
},
"fill": {
"r": 0.2,
"g": 0.4,
"b": 0.8
}
}
Selected Layer
Primary Button
Type: Text
Parent: Button Component
X: 120px
Y: 240px
Quick Actions
Zero-UI Mode
Interface hides when no selection is active
Component Library
Developer Handoff
Share exact component specs with your team
Variables
Manage your design system at scale.
Bulk Management
Rename, delete, or modify hundreds of variables at once using a powerful table interface instead of clicking one by one.
Advanced Aliasing
See connections between variables at a glance. Manage semantic tokens (e.g., bg-primary → blue-500) with ease.
Export Power
Get your tokens out of Figma and into code. Export to CSS, SCSS, JSON, or Tailwind config ready for production.
Multi-Mode Support
Seamlessly handle Light/Dark modes or density settings side-by-side.
Quick Actions
Variables Table
| Name | Value | Type | Actions |
|---|---|---|---|
| primary-500 | #3b82f6 | Color | |
| spacing-4 | 1rem | Spacing | |
| font-sans | Inter, system-ui | Font Family |