2025 10 04 19 KATHLEEN MCMAHON CONGRESO REACT ALICANTE The international React js conference in S
summary
Claim: typing design tokens and component props catches misspellings and misuse at compile time and prevents multi‑brand theme drift. Evidence: a real multi‑brand theming setup where developers hard‑coded values and stopped receiving package updates. Tools and pipeline: Figma variables (or Token Studio) → export JSON → Style Dictionary → output TypeScript type definitions and CSS. Patterns: prefer interfaces for base props, discriminated unions and never to forbid invalid variants. Result: typed packages publish once and update all apps instead of failing silently in QA.
AI-written summary · about
chapters (10)
- 0:00Design systems as beachcombing
- 2:17Who I am and my passion for design systems
- 3:40Problem with untyped tokens
- 7:07Invest in typed tokens
- 9:13From fragile to typed tokens
- 12:47Interfaces vs type aliases
- 15:26Combining variants
- 17:55Polymorphic components issues
- 20:46Type-safe design systems benefits
- 23:37Conclusion and call to action
