Design Systems are the language that binds UX and Engineering together at scale. The nuances in their delivery are many spanning multiple disciplines and workflows from maintaining living documentation to deployment & rollback across many consuming products. This talk will explore what Design Systems are, how they can be built, documented and delivered at scale. It will cover topics such as: * What makes a good Component example? * How can I coordinate deployment of a Design System across multiple product teams? It will compare & contrast choices in answering these questions along with demos of how Charlie's team at GoDaddy delivers Design Systems at scale across dozens of product teams and nearly 19 million customers using React, Storybook, and more.

1. Delivering
Flexible
Design Systems

2. WARNING: THIS TALK CONTAINS
MOVING & FLASHING IMAGES. IF YOU
ARE SENSITIVE TO THESE IN ANY WAY
PLEASE BE ADVISED.

4. Who am I?
Just

6. SENIOR DIR., UX PLATFORM
GoDaddyON THE INTERNET THEY CALL ME @INDEXZERO
BOARD MEMBER, OPENJS FOUNDATION

8. UX Platform?
…?

10. cross cutting
All of our
technology
user experience
A BIT MORE THAN JUST OUR DESIGN SYSTEM

12. UXCore2
Our design system
ABOUT 50 COMPONENTS
REACT BASED
OVER 100 CONTRIBUTORS
STARTED IN LATE 2015
DEPLOYED WORLDWIDE
~40% OF FRONT END ENGINEERS

13. LET’S BREAKDOWNTHE PROBLEM

14. Delivering
Flexible
Design SystemsDesign Systems
Flexible
Delivering

15. Delivering
Flexible
Design SystemsDesign Systems

16. ELEMENTS
of a
DESIGN SYSTEM

18. ‘sub-atomic’
First off the
atomic design
of
COLOR PALETTE, TYPOGRAPHY, SPACING, “VOICE”

20. COMPONENTSATOMS & MOLECULES OF ATOMIC DESIGN
Lots of

22. LIVING DOCUMENTATION
all disciplines
for
ENGINEERS
TECHNICAL WRITERS
DESIGNERS
CONTRIBUTORS

23. CONSIDER EVEN A SIMPLE BUTTON COMPONENT

24. CONSIDER EVEN A SIMPLE BUTTON COMPONENT

25. CONSIDER EVEN A SIMPLE BUTTON COMPONENT

26. ‘intuitive
familiar’
equals
Raskin, ‘94

27. WORKFLOWS

29. governance of
system extensibility
The

30. Delivering
Flexible
Design SystemsDesign Systems
Flexible
Delivering

31. Delivering
Flexible
Design Systems
Flexible

32. RESPONSIVEDESIGN
Assuming of course
…yeah? Not up for debate, right?

33. CONSIDER A DROPDOWN ON WEB & MOBILE (REACT NATIVE)

35. FEATURESHOW MANY IS “TOO MANY”?

36. STYLES

37. STYLESCSS? INLINE STYLES?
DO YOU NEED BOTH?

43. are you
one brand?
many?or

44. λ-CALCULUS OF COLOR SELECTION

45. λ-CALCULUS OF COLOR SELECTION

46. λ-CALCULUS OF COLOR SELECTION

47. λ-CALCULUS OF COLOR SELECTION
WHAT IF A BRAND WANTS TO USE “SECONDARY” FOR “PRIMARY” BUTTON?
MORE BUTTON-SPECIFIC VARIABLES FOR REBINDING
In λ-calculus this is an “α-conversion”

48. Delivering
Flexible
Design SystemsDesign Systems
Flexible
Delivering

49. Delivering
Flexible
Design Systems
Delivering

51. STAGESof
DELIVERY

52. DEVELOP
& PUBLISH
& PROMOTE
& MAINTAIN
& ROLLOUT

54. DEVELOPWHERE WORKFLOW IS KING

56. EASY
Make it
contributors
for any new

58. ENTRY POINT
Treat every
a
FIRST INTERACTION
as though
IT COULD BE

60. small module
the

61. small module
the
most easily
is
understood

63. monorepo
Using a

64. monorepo
Using a
YOUR PACKAGES/**/README.MD STILL MATTERS!
diligence
requires
AND –– npm home your-package

65. Use
Storybook
(cross platform is still a little rough)

66. Use
Storybook
(cross platform is still a little rough)
storybook
Just use
color me
seriously
impressed

67. HAVEan
EXAMPLE
STRUCTURE

69. imagineNow
25+ examples

71. EXACTLYWHAT’S A BETTER APPROACH?

74. AS SIMPLE
possible with
as
CLEAR REQUIRE / IMPORT USAGE
DESIGN DOCUMENTATION
PLATFORM SPECIFIC EXAMPLES
ZERO CONFIG, SANE DEFAULTS

76. DOCZis solving
SIMILAR
CHALLENGES

77. storybook
but
is
DEVELOPMENT-FOCUSED
MORE FLEXIBLE
…NOT A FULL SOLUTION

79. npm install @exemplar/storybook-react
https://github.com/godaddy/exemplar

80. EXEMPLAR
evolving to
is
USE STORYBOOK PRESETS
SUPPORT DESIGN DOCS (MDX)
API DOCS (REACT-DOCGEN)
SUPPORT MULTIPLE TOOLS (DOCZ)

82. PUBLISHWHAT COULD GO WRONG?

84. PRODUCTIONbegins at
PUBLISH TIME

86. can break
publishing
NPM INSTALL & UNIT TESTS
UPSTREAM BUILD TOOLCHAINS
REACT NATIVE APPS
MISCONFIGURED CONSUMERS

89. PROMOTE... CONTINUOUS DEPLOYMENT
AND THE NATURE OF DESIGN SYSTEMS

91. too many unknowns
there are simply
…WHEN OPERATING AT
LARGE ENOUGH SCALE ANYWAY

93. Let’s
ROLLOUTTO PRODUCTION!

94. WARNING: CONSUMER BUNDLES SHOULD
NOT INCLUDE YOUR DESIGN SYSTEM OR
DEPENDENCIES THAT CHANGE INFREQUENTLY
PLEASE BE ADVISED.

96. vendor
bundle
USE A

97. vendor
bundle
USE A
VENDOR.MIN.JS
REACT
REACT-DOM
REACT-INTL
DESIGN-SYSTEM.MIN.JS
BUTTON
DROPDOWN
…ETC.
APPLICATION.MIN.JS

98. There should only be
one true version

99. There should only be
one true version
design system
of your
in production

100. Your computer
npm publish
your design system
npm

101. Your computer
npm publish
your design system
all your users
any
install
version
they want
npm

102. Your computer
npm publish
your design system
all your users
any
install
version
they want
npm
get different versions!

103. consistent
delivery
ENFORCE
or
face peril

105. centralized deployment
benefits of
FIX BUGS FASTER ACROSS SITES
EASILY REBRAND YOUR SYSTEM
ROLLBACK ANY BREAKS QUICKLY
BETTER INSIGHTS INTO USAGE

106. …SOUNDS GREAT!
BUT HOW DO I DO IT?
I’M GLAD YOU ASKED!

107. webpack
externals
EXPOSE
and
version them

109. webpack
externals?
WHAT ARE

110. ANY ORDINARY WEBPACK BUNDLE
MODULE LOADER – THE “FACTORY”

111. ANY ORDINARY WEBPACK BUNDLE
MODULE LOADER – THE “FACTORY”
MODULE 0

112. ANY ORDINARY WEBPACK BUNDLE
MODULE LOADER – THE “FACTORY”
MODULE 0module.exports = /* module 0’s code */

113. ANY ORDINARY WEBPACK BUNDLE
MODULE LOADER – THE “FACTORY”
MODULE 0module.exports = /* module 0’s code */
MODULE 1module.exports = /* module 1’s code */
MODULE 2module.exports = /* module 2’s code */
MODULE 3module.exports = /* module 3’s code */

114. ANY ORDINARY WEBPACK BUNDLE
MODULE LOADER – THE “FACTORY”
MODULE 0module.exports = /* module 0’s code */
MODULE 1module.exports = /* module 1’s code */
MODULE 2module.exports = /* module 2’s code */
MODULE 3module.exports = /* module 3’s code */
module.exports = window.path.to.module2;

116. ANY WEBPACK.CONFIG.JS

117. ANY WEBPACK.CONFIG.JS

118. CONSISTENTasset
DISTRIBUTION

119. Your computer
npm publish
your design system

120. Your computer
npm publish
your design system
all your users

121. Your computer
npm publish
Warehouse.ai
your design system
all your users
new
request
versions
every Xm

122. Your computer
npm publish
Warehouse.ai
your design system
all your users
new
request
versions
every Xm
get the same version!

123. REMOVING
EXTERNALS
RENAMING
EXTERNALS
ENSURING
PROPER USAGE
UNEXPECTED
CONSEQUENCES

124. YOU MUSThave a
ROLLBACK
PLAN

126. warehouse.ai
Using
npm dist-tag add @your/package@1.2.3 prod
makes this trivial
... TRY IT OUT!
HTTPS://GITHUB.COM/GODADDY/WAREHOUSE.AI

128. MAINTAINFIXING FIRES BEFORE THEY HAPPEN

130. DEVOPSWHEN THINGS DON’T GO AS PLANNED

131. Your computer
npm publish
Warehouse.ai
your design system
all your users
new
request
versions
every Xm
get the same version!

132. Your computer
npm publish
Warehouse.ai
your design system
all your users
new
request
versions
every Xm
UNEXPECTED
DOWN-TIME
get the same version!

133. Your computer
npm publish
Warehouse.ai
your design system
all your users
new
request
versions
every Xm
requests
next
will
FAIL!
UNEXPECTED
DOWN-TIME
get the same version!

134. Your computer
npm publish
Warehouse.ai
your design system
all your users
new
request
versions
every Xm
requests
next
will
FAIL!
UNEXPECTED
DOWN-TIME
get the same version!
AND
THEN
EVERY
CONSUMER
IS
DOWN

136. single point
the
FAILURE
of

138. LET’S TALKabout
CACHING

140. CACHING
PERFORMANCE
SAVING COPIES
……FOR SPEED

141. Your computer
npm publish
Warehouse.ai
your design system
all your users
new
request
versions
every Xm

142. Your computer
npm publish
Warehouse.ai
your design system
all your users
new
request
versions
every Xm
+80ms

143. Your computer
npm publish
Warehouse.ai
your design system
all your users
new
request
versions
every Xm
+80ms
+80ms for your users

144. Your computer
npm publish
Warehouse.ai
your design system
all your users
new
request
versions
every Xm
+80ms
use
always
cached
copy
+80ms for your users+0ms for your users

146. FAILOVER
CACHINGSAVING COPIES
……FOR LATER

147. Your computer
npm publish
Warehouse.ai
your design system
everyone is still up!
new
request
versions
every Xm
requests
next
will
FAIL!
UNEXPECTED
DOWN-TIME AND
THEN
EVERY
CONSUMER
IS
DOWN

148. Your computer
npm publish
Warehouse.ai
your design system
everyone is still up!
new
request
versions
every Xm
requests
next
will
FAIL!
UNEXPECTED
DOWN-TIME
the
use
FAILOVER
CACHE

150. OUT-OF-BAND-CACHE
THIS IS WHY
WE CREATED
A REUSABLE
npm install out-of-band-cache

153. HYGIENEPAYING TECHNICAL DEBT

154. ... YOU CAN’T AVOID IT

155. ... YOU CAN’T AVOID IT
WARNING: ON A LONG ENOUGH TIMELINE,
IF LEFT UNCHECKED ALL SOFTWARE WILL
CRUMBLE FROM TECHNICAL DEBT
PLEASE BE ADVISED.

157. UPGRADING TO NEW VERSIONS: REACT, BABEL, WEBPACK, ETC.
REMOVING DEPRECATED APIS E.G. componentWillReceiveProps, etc.
USING LATEST APIS – E.G. PORTALS, REACT@16 CONTEXT, etc.

158. IT ADDS UP
QUICKLYUPGRADING TO NEW VERSIONS: REACT, BABEL, WEBPACK, ETC.
REMOVING DEPRECATED APIS E.G. componentWillReceiveProps, etc.
USING LATEST APIS – E.G. PORTALS, REACT@16 CONTEXT, etc.

159. MAY THE SOURCE BE WITH YOU
SLIDES WILL BE POSTED ON TWITTER SHORTLY – FOLLOW ME @INDEXZERO
THANKS FOR LISTENING!