Implementing a Design System
summary
Airbnb implements a vertical stack of row components as the primary UI unit, backed by tooling: a RecyclerView framework Epoxy to auto-generate models, a styling framework Paris for constrained restyles, and a CI-driven component browser plus screenshot tests that catch regressions. The system splits components into core vs team ownership, supports autogenerated examples (font-scale, RTL, pressed/loading states), and maintains roughly 700 distinct components while enabling rapid server-driven UI changes.
AI-written summary · about
chapters (8)
- 0:00Introduction to design systems
- 3:57Airbnb's design system
- 10:27Row components foundation
- 12:15Component ownership and reuse
- 15:52Restyling components with Paris
- 19:01Discoverability in design systems
- 23:18Testing components automatically
- 26:11Server-driven UI at Airbnb
related talks
28mFrom Sketch to Code Designing a Component Kit
34mBuilding (And Re-Building) the Airbnb Design System
20mDesign Systems for the Rest of Us
18mDesign systems for infinity
25mMulti-platform design system at Booking.com
28mA design system. A year in review
37mConsistency is Key - Working with a Design System
37mLet your design evolve, adopt a Design System!