2. ANew
DesignSystem

6. TheAirbnbDesignSystem
TAE KIM & MAJA WICHROWSKA • REACT CONF • OCTOBER 24, 2019
Building

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

9. Whatisa
DesignSystem?

10. WhatisaDesignSystem?

11. WhatisaDesignSystem?

12. WhatisaDesignSystem?
Bootstrap MaterialDesign

13. WhatisaDesignSystem?
COMPONENT-BASED EXAMPLES

14. ?

15. Strict
Consistent
Constrained

16. Evolving
Inconsistent
Constrained
FlexibleFlexible

17. FlexibleConstrained
?

18. Evolutionofa
DesignSystem

19. TheBeginning
EVOLUTION OF A DESIGN SYSTEM
2016

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.

21. 1. Fragmentation
The Beginning (2016)

22. // core.scss
.button {
background: #ff5a5f;
color: #ffffff;
}
1. Fragmentation
2.Complexity
The Beginning (2016)

23. 1. Fragmentation
2.Complexity
// core.scss
.button {
background: #ff5a5f;
color: #ffffff;
}
// custom_page.scss
.custom-section {
.button {
background: #008489;
}
}
The Beginning (2016)

24. 1. Fragmentation
2.Complexity
// core.scss
.button {
background: #ff5a5f;
color: #ffffff;
}
// custom_page.scss
.custom-section {
.button {
background: #008489;
}
}
// yet_another_custom_page.scss
.button {
background: #a61d55;
padding: 12px 8px;
display: block;
}
The Beginning (2016)

25. 1. Fragmentation
2.Complexity
3.Performance
The Beginning (2016)

26. 1. Fragmentation
2.Complexity
3.Performance
foo.js bar.js baz.js
The Beginning (2016)

27. 1. Fragmentation
2.Complexity
3.Performance
foo.js baz.js lazy.js
Hey! Wait for me!
The Beginning (2016)

28. 1. Fragmentation
2.Complexity
3.Performance
The Beginning (2016)

29. Fragmentation
Complexity
Performance
The Beginning (2016)

30. Fragmentation Complexity Performance
designsystemWhat if our designsystem
could help in each of these
scenarios?
The Beginning (2016)

31. designsystem
Fragmentation Complexity Performance
components
styles
The Beginning (2016)

32. The Beginning (2016)
Fragmentation Complexity Performance
components

33. The Beginning (2016)
Fragmentation Complexity Performance
styles

34. The Beginning (2016)

35. The Beginning (2016)

36. The Beginning (2016)

37. • CSS tightly coupled to your Component
• Only shipping critical CSS
• Theming
• Prevent Style Overrides
WhyCSS-in-JS?
EVOLUTION OF A DESIGN SYSTEM

38. Introducingthe
EVOLUTION OF A DESIGN SYSTEM
DesignLanguageSystemD L S

39. Click Me
Introducingthe
EVOLUTION OF A DESIGN SYSTEM
DLS
<Button>
Click Me
</Button>

40. Click Me
Click Me
Introducingthe
EVOLUTION OF A DESIGN SYSTEM
DLS
<Button>
Click Me
</Button>
🦙

41. Click Me
Click Me
Introducingthe
EVOLUTION OF A DESIGN SYSTEM
DLS
<Button
className=“…”
style={…}
>
Click Me
</Button>

42. Click Me
Click Me
Introducingthe
EVOLUTION OF A DESIGN SYSTEM
DLS
<Button
backgroundColor=“…”
textColor=“…”
>
Click Me
</Button>

43. Click Me
Click Me
Introducingthe
EVOLUTION OF A DESIGN SYSTEM
DLS
Do I belong? 😢
<Button
isAlpaca={true/false}
>
Click Me
</Button>

44. DLS
(2016)
FlexibleConstrained
The Beginning (2016)

45. IntroducingDLS
EVOLUTION OF A DESIGN SYSTEM
DLSAdoption

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

47. Designwasfullyonboardwith
buildingwithinthesystem.*
*Or at least that’s what they thought.
*

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…

52. TheJourneyof
theCode
BUILDING A NEW COMPONENT
An Interlude (2018)

53. 1.Fragmentation
An Interlude (2018)

54. 1.Fragmentation
An Interlude (2018)

55. 1.Fragmentation
An Interlude (2018)

56. 1.Fragmentation
An Interlude (2018)

57. 1.Fragmentation
2.Complexity
Add a prop
Button.propTypes = {
isNewDesign: PropTypes.bool,
}
An Interlude (2018)

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)

59. 1.Fragmentation
2.Complexity
An Interlude (2018)

60. 1.Fragmentation
2.Complexity
3.Performance
1kb 33kb
nowthen
An Interlude (2018)

61. Fragmentation
Complexity
Performance
An Interlude (2018)

62. Fragmentation Complexity Performance
designsystemWhat if our designsystem
could help in each of these
scenarios?
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.

65. ADesignRefresh

66. ADesignRefresh

67. Asystemofindependentcomponents
thatcanbecomposedtogether.
ModularArchitecture
The Future (2020)

68. Asystemof
independent
componentsthat
canbecomposed
together.
Select Dates
Clear Apply

69. Asystemof
independent
componentsthat
canbecomposed
together.
Select Dates
Clear Apply

70. Asystemof
independent
componentsthat
canbecomposed
together.
Select Dates
Clear Apply

71. Asystemof
independent
componentsthat
canbecomposed
together.
Select Dates
Clear Apply

72. Asystemof
independent
componentsthat
canbecomposed
together.
Select Dates
Clear Apply

73. Asystemof
independent
componentsthat
canbecomposed
together.
Select Dates
Clear Apply

74. Asystemof
independent
componentsthat
canbecomposed
together.
Select Dates
Clear Apply

75. Asystemof
independent
componentsthat
canbecomposed
together.
Select Dates
ClearApply

76. Asystemof
independent
componentsthat
canbecomposed
together.
Select Dates
ClearApply

77. Asystemof
independent
componentsthat
canbecomposed
together.
Add Payment Method
Cancel

78. Asystemof
independent
componentsthat
canbecomposed
together.
Add Payment Method
Cancel

79. HowAirbnbcreatesre-usable,
performantcomponents.
Base
&Variants
The Future (2020)

80. <Button
primary={T/F}
secondary={T/F}
tertiary={T/F}
onClick={() => {…}}
onHover={() => {…}}
onFocus={() => {…}}
>
Click Me
</Button>
Click MeClick MeClick Me
The Future (2020)

81. Click Me
Click MeClick Me Click Me
The Future (2020)
<Button
primary={T/F}
secondary={T/F}
tertiary={T/F}
onClick={() => {…}}
onHover={() => {…}}
onFocus={() => {…}}
>
Click Me
</Button>

82. <BaseButton
onClick={() => {…}}
onHover={() => {…}}
onFocus={() => {…}}
>
Click Me
</BaseButton>
Click Me
Click MeClick Me Click Me
The Future (2020)

83. <BaseButton
onClick={() => {…}}
onHover={() => {…}}
onFocus={() => {…}}
renderLeading={() => {
renderTrailing={() =>
>
Click Me
</BaseButton>
Click Me
Click MeClick Me Click Me
Click Me
The Future (2020)

84. Click Me
Click MeClick Me Click Me
Click Me
PrimaryButton.jsx
BaseButton.jsx
SecondaryButton.jsx TertiaryButton.jsx
The Future (2020)
<BaseButton
onClick={() => {…}}
onHover={() => {…}}
onFocus={() => {…}}
renderLeading={() => {
renderTrailing={() =>
>
Click Me
</BaseButton>

85. Click Me
Click MeClick Me Click Me
Talk about showing code soon!
The Future (2020)

86. Click Me
Click MeClick Me Click Me
Click Me Click Me
Click Me Click Me
Click Me
The Future (2020)

87. Click Me
Click Me Click Me
Click Me Click Me
Click Me
Click Me
Click Me
Click Me
The Future (2020)

88. Click Me
Click Me
Click Me Click Me
Click Me
Click Me
Click Me
Click Me
Click Me
The Future (2020)

89. Click Me
Click MeClick Me
Click MeClick Me
Click Me
Click Me
Click Me
Click Me
import Button from ‘./Button’;

90. Click Me Click Me import Button from ‘./PrimaryButton’;
The Future (2020)

91. Click Me Click Me import Button from ‘./SecondaryButton’;
The Future (2020)

92. Click Me Click Me import Button from ‘./TertiaryButton’;
The Future (2020)

93. FlexibleConstrained
DLS
(2020)
The Future (2020)

94. Side-by-Side

95. // BaseButton.jsx
const BaseButton = ({
...
}) => (
<button>
{children}
</button>
);
Click MeClick Me
// Button.jsx
const Button = ({
...
}) => (
<button>
{children}
</button>
);

96. // BaseButton.jsx
const BaseButton = ({
onClick,
}) => (
<button
onClick={onClick}
>
{children}
</button>
);
Click MeClick Me
// Button.jsx
const Button = ({
onClick,
}) => (
<button
onClick={onClick}
>
{children}
</button>
);
// Button.jsx
const Button = ({
onClick,
}) => (
<button
onClick={onClick}
>
{children}
</button>
);

97. // BaseButton.jsx
const BaseButton = () => (...);
export default extendable(BaseButton,
() => ({
button: {
background: ‘grey’,
color: ‘white’,
},
}),
);
Click MeClick Me
// Button.jsx
const Button = () => (…);
export default withStyles(() => {
default: {
backgroundColor: ‘#008489’,
color: ‘#ffffff’,
}
})(Button);
// Button.jsx
const Button = () => (…);
export default withStyles(() => ({
default: {
backgroundColor: ‘#008489’,
color: ‘#ffffff’,
},
}))(Button);

98. Click MeClick Me
// Button.jsx
const Button = ({ styles }) => (
<button {…css(styles.default)}>
{children}
</button>
);
export default withStyles(() => ({
default: { … },
}))(Button);
// BaseButton.jsx
const BaseButton = ({ styles }) => (
<button {…css(styles.button)}>
{children}
</button>
);
export default extendable(BaseButton,
() => {
button: {...}
}
);

99. // Button.jsx
const Button = () => (...);
export default withStyles(() => {
default: { ... },
primary: {
backgroundColor: ‘#FF5A5F’,
color: ‘#ffffff’,
}
})(Button);
Click MeClick Me Click MeClick Me
// BaseButton.jsx
const BaseButton = ({ styles }) => (
<button {…css(styles.button)}>
{children}
</button>
);
export default extendable(BaseButton,
() => {
button: {...}
}
);

100. Click MeClick MeClick MeClick Me
// Button.jsx
const Button = ({
styles,
primary,
}) => (
<button {…css(
styles.default,
primary && styles.primary
)}>
{children}
</button>
);
// BaseButton.jsx
const BaseButton = ({ styles }) => (
<button {…css(styles.button)}>
{children}
</button>
);
export default extendable(BaseButton,
() => {
button: {...}
}
);

101. Click MeClick Me
// Button.jsx
const Button = () => (...);
export default withStyles(() => {
default: { ... },
primary: { ... },
secondary: {
backgroundColor: ‘transparent’,
borderColor: ‘#008489’,
color: ‘#008489’,
},
})(Button);
Click MeClick MeClick Me
// BaseButton.jsx
const BaseButton = ({ styles }) => (
<button {…css(styles.button)}>
{children}
</button>
);
export default extendable(BaseButton,
() => {
button: {...}
}
);

102. Click MeClick MeClick Me
// Button.jsx
const Button = ({
styles,
primary,
secondary,
}) => (
<button {…css(
styles.default,
primary && styles.primary,
secondary && styles.secondary,
)}>
{children}
</button>
Click MeClick Me
// BaseButton.jsx
const BaseButton = ({ styles }) => (
<button {…css(styles.button)}>
{children}
</button>
);
export default extendable(BaseButton,
() => {
button: {...}
}
);

103. Click MeClick MeClick Me
// PrimaryButton.jsx
export default extend(BaseButton,
() => ({
button: {
background: ‘#222222’,
color: ‘#FFFFFF’,
},
})
)
Click Me
// Button.jsx
const Button = ({
styles,
primary,
secondary,
}) => (
<button {…css(
styles.default,
primary && styles.primary,
secondary && styles.secondary,
)}>
{children}
</button>

104. Click Me Click MeClick MeClick Me
// PrimaryButton.jsx
export default extend(BaseButton,
() => ({
button: {
background: ‘#222222’,
color: ‘#FFFFFF’,
}
})
)
// SecondaryButton.jsx
export default extend(BaseButton,
() => ({
button: {
background: ‘#222222’,
color: ‘#FFFFFF’,
}
})
)
// TertiaryButton.jsx
export default extend(BaseButton,
() => ({
button: {
background: ‘#222222’,
color: ‘#FFFFFF’,
}
})
)
// InverseButton.jsx
export default extend(BaseButton,
() => ({
button: {
background: ‘#222222’,
color: ‘#FFFFFF’,
}
})
)
// BrandButton.jsx
export default extend(BaseButton,
() => ({
button: {
background: ‘#222222’,
color: ‘#FFFFFF’,
}
})
)
// IconButton.jsx
export default extend(BaseButton,
() => ({
button: {
background: ‘#222222’,
color: ‘#FFFFFF’,
}
})
)
// Button.jsx
const Button = ({
styles,
primary,
secondary,
}) => (
<button {…css(
styles.default,
primary && styles.primary,
secondary && styles.secondary,
)}>
{children}
</button>
Click Me Click Me

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

106. Conclusions

107. FlexibleConstrained

108. FlexibleConstrained Whentouseit?

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

111. MajaWichrowska
@majapw
TaeKim
@taekimjr