← Back to work
Viant
Design Engineer / UX Lead

Automating Design Tokens for Angular

Eliminating QA drift with a phased JSON → SCSS token pipeline — establishing an enforceable design-to-code contract between Figma and Angular.

Design Tokens Style Dictionary Angular SCSS Governance
Zero drift token-to-code sync via automated SCSS generation
The problem

We were losing time in Design QA and engineering cycles fixing inconsistencies that shouldn't exist: tooltip padding drift, typography mismatches, and spacing inconsistencies. The root cause wasn't attention to detail; it was manual token maintenance and inconsistent token consumption across implementations.

Context

Our design system lived in Figma, and the product UI lived in an Angular codebase. While the application relied on SCSS variables, those variables were maintained manually, making drift inevitable as the product evolved.

Root cause

During QA reviews, I traced recurring inconsistencies to a structural gap:

  • Figma variables were not programmatically connected to Angular SCSS
  • Token values were duplicated manually in code
  • Updates required hand-editing variables across files
  • There was no enforceable "design → code" contract

Strategy

Rather than asking engineering for a full component refactor (not feasible given bandwidth constraints), I proposed a phased token automation approach that minimized developer overhead while creating a foundation for enforcement.

  1. Export Figma variables as structured JSON
  2. Transform tokens with Style Dictionary
  3. Generate SCSS variables aligned to Angular naming conventions
  4. Replace manual SCSS variable maintenance with generated outputs

Token architecture

I structured tokens using a layered model to keep the system scalable without over-abstraction:

1 Global tokens Primitives — raw values (hex codes, px values, weights)
2 Semantic tokens Meaning and intent — the preferred consumption layer (e.g., --color-text-primary)
3 Component tokens Selective only — used when necessary to avoid unnecessary complexity
Global → Semantic → Selective Component Token layers
Generated SCSS variables for Angular Output

Implementation

Phase 1 — Controlled export workflow

The initial workflow operates as a controlled manual export step:

  • Export variables from Figma as JSON
  • Process the JSON inside the codebase using Style Dictionary
  • Generate SCSS variables as build artifacts (ready for consumption)

This phased approach validated structure and naming consistency before introducing CI changes.

What this enabled

  • Reduced repeated QA drift caused by inconsistent token values
  • Established a shared language between design and engineering through predictable naming
  • Created a scalable foundation for CI-based automation and governance
  • Shifted "pixel-level fixes" into a system-level solution

Phase 2 — Hardening & enforcement

Next steps to formalize the contract:

  • Integrate token generation into CI so SCSS updates are automatic
  • Prevent manual edits to generated files
  • Add linting rules to discourage hardcoded styling values
  • Add audits to validate component consumption of tokens
Enforceable governance The goal is not only synchronization — it's removing avoidable QA work at the source.
Next case study AngularJS → React Modernization →