Figma's Context-Aware Approach to Design Token Suggestions
TRIGGER
Design handoffs consistently generate follow-up questions from developers about which exact token or variable a design uses. Raw values in designs don't automatically map to the design system vocabulary, creating friction and inconsistency between design intent and production code.
APPROACH
Figma built a 'Check designs' linter that runs when marking designs ready for dev or via quick action. A custom ML model analyzes elements in context and suggests the appropriate design system variable to use. Input: design element with raw value (e.g., hex color) plus surrounding design context. Output: suggested variable from the team's design system with confidence indication. Designers review and apply suggestions before handoff.
PATTERN
“#1a73e8 maps to three different tokens depending on context (primary-button vs link-text vs brand-accent). Simple value-to-token lookup fails. The model needs spatial and semantic context to disambiguate which token a raw value represents.”
✓ WORKS WHEN
- Design system has established variable collections with semantic naming conventions
- Teams have consistent patterns where context predicts correct token (buttons always use button tokens, text uses text tokens)
- Designers work in structured component-based files where context is meaningful
- Organization has enough historical correct mappings to train or fine-tune suggestions
✗ FAILS WHEN
- Design system uses purely technical naming without semantic meaning (color-blue-500 vs primary-action)
- Designers frequently use values that intentionally deviate from the system
- Files contain isolated explorations without component structure providing context
- Design system is new or rapidly changing, lacking stable mapping patterns