When building a design system, many implicit choices are made in a component’s architecture that can end up crushing the dreams of a productivity-boosting frontend utility and turning a shared component library into a vessel for friction, factions, and forking. Join us as we take you through the journey of Airbnb’s experience creating an effective, widely-adopted design system and the decisions and trade-offs that were made to get there.
7. TAE KIM & MAJA WICHROWSKA • REACT CONF • OCTOBER 24, 2019
TheAirbnbDesignSystem
Building
(andRe-Building 😬)
Design Systems team
Airbnb-specific jargon
8. 1. What is a Design System?
2. Evolution of a Design System
3. A Side-by-Side Comparison
Agenda
Maja to run through
“what is a design sy
slides
20. TheBeginning
EVOLUTION OF A DESIGN SYSTEM
2016
Airbnb Experiences are
introduced publicly, requiring a
change to the apps and site to
focus lessonaccommodations
and moreontheend-to-end
trip.
37. • CSS tightly coupled to your Component
• Only shipping critical CSS
• Theming
• Prevent Style Overrides
WhyCSS-in-JS?
EVOLUTION OF A DESIGN SYSTEM
46. IntroducingDLS
EVOLUTION OF A DESIGN SYSTEM
DLSAdoption
“Consistency and reusability
with things like responsiveness
and accessibility all taken care
of. DLSisdefinitelytheway
forward.”
AIRBNB PRODUCT ENGINEER
49. 20182016
Airbnb Experiences are
introduced publicly, requiring a
change to the apps and site to
focus lessonaccommodations
and moreontheend-to-end
trip.
AnInterlude
EVOLUTION OF A DESIGN SYSTEM
50. 20182016
Airbnb Experiences are
introduced publicly, requiring a
change to the apps and site to
focus lessonaccommodations
and moreontheend-to-end
trip.
AnInterlude
EVOLUTION OF A DESIGN SYSTEM
2018
TheAirbnbproducthas
expandedsignificantly, adding
new tiers of accommodations,
market-specific branding,
acquiring new companies,
growing into business travel,
vacation rentals, experiences,
concierge services, peer
spaces, and more…
58. 1.Fragmentation
2.Complexity
Add a prop
Apply styles or logic
if(props.isNewDesign) {
// Do something to make your design happen
}
Button.propTypes = {
isNewDesign: PropTypes.bool,
}
An Interlude (2018)
63. TheFuture
EVOLUTION OF A DESIGN SYSTEM
202020182016
TheAirbnbproducthas
expandedsignificantly, adding
new tiers of accommodations,
market-specific branding,
acquiring new companies,
growing into business travel,
vacation rentals, experiences,
concierge services, peer
spaces, and more…
Airbnb Experiences are
introduced publicly, requiring a
change to the apps and site to
focus lessonaccommodations
and moreontheend-to-end
trip.
64. TheFuture
EVOLUTION OF A DESIGN SYSTEM
202020182016
As Airbnb looks to the future,
it’s important that new
businessescanbespunup
efficientlyandcheaply.
TheAirbnbproducthas
expandedsignificantly, adding
new tiers of accommodations,
market-specific branding,
acquiring new companies,
growing into business travel,
vacation rentals, experiences,
concierge services, peer
spaces, and more…
Airbnb Experiences are
introduced publicly, requiring a
change to the apps and site to
focus lessonaccommodations
and moreontheend-to-end
trip.
105. Trade-offs
OF SINGLE COMPONENT
• Performance degradesovertime
• Complexity within components
increasesovertime
• Everything is in one place, discoverability
ofcomponentvariations is high
• More burden on the systemsteam
Trade-offs
OF BASE/VARIANT PATTERN
• Performance remains consistently
strong
• Complexity remains consistentlylow
• End up with morefiles
• More of a burden on usersofthesystem
109. • The system is static.
• The system is small.
• You have limited design support.
• You are not theonlyenforcersofconsistency.
FlexibleConstrained
110. FlexibleConstrained
• The system is static.
• The system is small.
• You have limited design support.
• You are not theonlyenforcersofconsistency.
• The system is evolving
• The system is large
• You have a strongdesignteam
• There is noenforcementofconsistency