What Are Design Tokens?
Design tokens are named values that store the visual design decisions of your brand—colors, typography, spacing, shadows, and more—in a format that can be used across design tools and code.
Tokens vs. Raw Values
Instead of using #3B82F6 directly, you'd use a token like 'color-primary-500'. This abstraction means you can update the primary color once and have it propagate everywhere. Tokens create a single source of truth that connects designers in Figma with developers in code.
Token Hierarchy
Design systems typically organize tokens in tiers. Primitive tokens define raw values (blue-500: #3B82F6). Semantic tokens reference primitives with meaning (color-primary: blue-500). Component tokens apply semantic tokens to specific uses (button-background: color-primary). This hierarchy makes global changes manageable.
Design Token Violations
A token violation occurs when a design uses a hardcoded value instead of the corresponding token. A button using #3B82F6 instead of the 'color-primary' token is a violation. These violations undermine the design system—when you update the primary color, that button won't change. Violations accumulate into significant inconsistency over time.
Detecting Violations Automatically
Manually checking every element for token compliance is impractical in large files. Automated tools can compare used values against your token definitions, flagging violations with their exact location. This turns token compliance from a manual audit into a continuous process.
Automate Your Design System Audits
ComponentQA automatically detects design system problems across your Figma files. Get actionable insights with deep links to fix issues where they live.