Design Systems @Scale

on YouTube ↗21m

" summary

Meta runs 20+ independent design systems and builds a shared Design Systems Platform that stores W3C‑draft JSON design tokens, runs codegen jobs to iOS, Android, React Native and Figma, and auto-syncs values. Theming lets teams flip styles (e.g., round to square buttons) in about five minutes and ship global changes like FB Sans and marketplace tile variants faster. A new layer of variants powers chameleon components that resolve tokens per design system, enforce type constraints, and reduce ~500+ duplicated component implementations.

AI-written summary · about

" chapters (7)

1. 0:00Design systems intro
2. 1:51Design system components
3. 3:53Why multiple systems
4. 5:20Building platform foundation
5. 9:32Theming accelerates UI
6. 14:02Chameleon component library
7. 20:27Summary and future

" related talks

• 20mDesign Systems at ScaleSarah Federman · Design Systems London 2018
• 51mThe Power of Design SystemsNatalja Andrejeva, Aivis Jansauskis · DevClub.lv 114th Frontend focused event
• 20mDesign Systems for the Rest of UsSiddharth Kshetrapal · Design Systems London 2018
• 25mDesign systems for agenciesMartina Dellepiane, Sergej Spomer · Config Europe 2020
• 18mDesign Systems in PracticeKat Davis · Remote Design Week 2020
• 45mDesign System Typography: Intent, Application, and ScaleJason Pamental · SmashingConf New York 2022
• 24mDesign System and Systematization of ThinkingSukeharu Ito · Schema by Figma Tokyo 2022
• 27mAdvanced Design System ConsiderationsAlex Sexton · JSConf Hawaiʻi 2020