Evolving your Design System through Data
summary
Polaris design system team builds a coverage dashboard and a Polaris migrator that parse TypeScript and Sass to measure usage, run automated migrations, and open a single PR that updates 1,500 files and ~3,000 lines. Metrics: Polaris covers 35% of admin in 2021, v9 lifts coverage +16% and token usage +21%, typography rebuild raises coverage +18%, spacing migration increases coverage ~50%. They consolidate repos, cut 300 to 5 breakpoints, and aim for a 90% coverage goal.
AI-written summary · about
chapters (13)
- 0:00Shopify and Polaris intro
- 3:16Design system growth challenges
- 7:31Mission to improve adoption
- 8:13Coverage dashboard strategy
- 11:42How coverage dashboard works
- 13:32Live demo: coverage dashboard
- 16:42Data-driven design decisions
- 17:43Breakpoints reduced to five
- 19:49Typography usage analysis
- 22:58Manual migrations limits
- 25:29Polaris migrator tool
- 27:56Year of data-driven lessons
- 29:45Closing remarks
related talks
20mFind Out If Your Design System Is Better Than Nothing
20mData Driven Design Systems in Practice
57mUnifying design and development through design systems
45mPaving the adoption path of your Design System for engineers
19mBehind the system: A showcase of files that inspire us
49mA Better Design-Dev Handoff Experience: Code-based Design System
32mDesign System APIs and the Developer Experience
33mWorking backwards