Why It Matters
Design tokens are the atomic building blocks of a design system. Instead of using raw values (#FF5733 or 16px), you use named tokens (color.primary.500 or spacing.md). This abstraction allows you to change a token value once and have it update everywhere—in Figma, in CSS, in iOS, in Android. Tokens are the ultimate single source of truth.
Examples
1
color.text.primary: "#1A1A1A" in light mode, "#FFFFFF" in dark mode—same token, different contexts.
2
spacing.component.padding: "16px" ensures consistent internal padding across all components.
3
typography.heading.lg: { fontSize: "32px", lineHeight: "40px", fontWeight: "700" } bundles related properties.
How BiblioKit Helps
ComponentQA audits your Figma files for hardcoded values that should be using design tokens, helping you maintain token compliance.
Related Terms
Token Drift
The gradual divergence between design tokens in Figma and their implementations in code, causing visual inconsistencies across platforms.
Design System
A comprehensive collection of reusable components, patterns, guidelines, and design tokens that work together to ensure consistency and efficiency across product development.
Style Guide
Documentation that defines the visual language of a product, including color palettes, typography scales, spacing systems, and usage guidelines.
Design System Audit
A systematic review of design files to assess adherence to design system standards, identify inconsistencies, and find components that have drifted from their source.
Explore More Design Terms
Browse our complete glossary of Figma and design systems terminology.