Creative Collaboration: Building a Universal Design System
summary
Condé Nast consolidates 20+ brand codebases into a single app so shared features become plug‑and‑play components, using React components, design tokens encoded as JSON, and a Sketch plugin (CocoaScript) that auto‑generates configs. Designers define tokens up front, a gatekeeper team maintains the configs behind a Sass API, and engineers consume variables and mixins. One config can be a 1300-line JSON file. After these changes multiple teams work concurrently, brands reach 100% traffic on the new app, and components deploy without brand-specific code.
AI-written summary · about
chapters (6)
- 0:00Start
- 3:03SOME SHARED SITE NEEDS
- 6:02CHALLENGES TO BE MET
- 10:47ATOMIC DESIGN FOR JUST A SEC
- 14:19SOME FINDINGS
- 22:20AUTOMATING THE CREATION OF THE JSON FILES
related talks
21mDesign Systems @Scale
27mAdvanced Design System Considerations
41mBuilding a design system with React in 2025, what's new?
25mBuilding a Design System as a team
35mDesign system - From a Developer Point-of-View
32mYour Guide to Making Scalable Design Systems
35mWe need to talk about our frontend workflow
21mA Common Design Language Let Designers and Developers talk to each other