Backpack, our journey in creating a design system
summary
Skyscanner builds Backpack, a design system that standardizes tokens, colors and spacing, publishes an NPM package of SASS variables, and ships React and React Native components plus Sketch libraries. The initial team gets six months to prove value, uses Theo to generate JSON→SASS/JS and Lerna/Storybook for multi-package workflow, enforces accessibility, theming and RTL, and replaces ~20 duplicated button implementations. Adoption climbs company-wide; components are open source on GitHub.
AI-written summary · about
chapters (22)
- 0:00Introduction
- 2:26What is a Squad
- 4:04Release Schedule
- 5:44Consistency
- 7:35No standards
- 8:28Colour palette
- 10:54Beer pays
- 12:02Getting buyin
- 13:45Money talks
- 15:28Getting started
- 16:36Clarity Conference
- 17:53Atomic Design Principles
- 18:54Elements
- 20:45Typography
- 22:39Accessibility
- 25:05Design tools
- 26:01Support engineers
- 27:03Adoption
- 28:43Team
- 29:12Design challenges
- 30:13Useful tools
- 32:20Questions
related talks
28mA design system. A year in review
28mFrom Sketch to Code Designing a Component Kit
58mFrom nothing to state of the art
35mWe need to talk about our frontend workflow
21mDesign Systems 101: The Developer Approach to Better Frontends
35mDesign system - From a Developer Point-of-View
20mDesign Systems for the Rest of Us
29mCreating a Design System that People Actually Use