Flexible Design Systems

Flexible Design Systems

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.

D43e8ea63b61e7669ded5b9d3c2e980f?s=128

Charlie Robbins

July 20, 2019
Tweet

Transcript

  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.
  3. None
  4. Who am I? Just

  5. None
  6. SENIOR DIR., UX PLATFORM GoDaddy ON THE INTERNET THEY CALL

    ME @INDEXZERO BOARD MEMBER, OPENJS FOUNDATION
  7. None
  8. UX Platform? …?

  9. None
  10. cross cutting All of our technology user experience A BIT

    MORE THAN JUST OUR DESIGN SYSTEM
  11. None
  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 BREAKDOWN THE PROBLEM

  14. Delivering Flexible 
 Design Systems Design Systems Flexible Delivering

  15. Delivering Flexible 
 Design Systems Design Systems

  16. ELEMENTS of a DESIGN SYSTEM

  17. None
  18. ‘sub-atomic’ First off the atomic design of COLOR PALETTE, TYPOGRAPHY,

    SPACING, “VOICE”
  19. None
  20. COMPONENTS ATOMS & MOLECULES OF ATOMIC DESIGN Lots of

  21. None
  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

  28. None
  29. governance of system extensibility The

  30. Delivering Flexible 
 Design Systems Design Systems Flexible Delivering

  31. Delivering Flexible 
 Design Systems Flexible

  32. RESPONSIVE DESIGN Assuming of course …yeah? Not up for debate,

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

  34. None
  35. FEATURES HOW MANY IS “TOO MANY”?

  36. STYLES

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

  38. None
  39. None
  40. None
  41. None
  42. None
  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 Systems Design Systems Flexible Delivering

  49. Delivering Flexible 
 Design Systems Delivering

  50. None
  51. STAGES of DELIVERY

  52. DEVELOP & PUBLISH & PROMOTE & MAINTAIN & ROLLOUT

  53. None
  54. DEVELOP WHERE WORKFLOW IS KING

  55. None
  56. EASY Make it contributors for any new

  57. None
  58. ENTRY POINT Treat every a FIRST INTERACTION as though IT

    COULD BE
  59. None
  60. small module the

  61. small module the most easily is understood

  62. None
  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. HAVE an EXAMPLE STRUCTURE

  68. None
  69. imagine Now 25+ examples

  70. None
  71. EXACTLY WHAT’S A BETTER APPROACH?

  72. None
  73. None
  74. AS SIMPLE possible with as CLEAR REQUIRE / IMPORT USAGE

    DESIGN DOCUMENTATION PLATFORM SPECIFIC EXAMPLES ZERO CONFIG, SANE DEFAULTS
  75. None
  76. DOCZ is solving SIMILAR CHALLENGES

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

  78. None
  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)
  81. None
  82. PUBLISH WHAT COULD GO WRONG?

  83. None
  84. PRODUCTION begins at PUBLISH TIME

  85. None
  86. can break publishing NPM INSTALL & UNIT TESTS UPSTREAM BUILD

    TOOLCHAINS REACT NATIVE APPS MISCONFIGURED CONSUMERS
  87. None
  88. None
  89. PROMOTE ... CONTINUOUS DEPLOYMENT AND THE NATURE OF DESIGN SYSTEMS

  90. None
  91. too many unknowns there are simply …WHEN OPERATING AT LARGE

    ENOUGH SCALE ANYWAY
  92. None
  93. Let’s ROLLOUT TO PRODUCTION!

  94. WARNING: CONSUMER BUNDLES SHOULD NOT INCLUDE YOUR DESIGN SYSTEM OR

    DEPENDENCIES THAT CHANGE INFREQUENTLY PLEASE BE ADVISED.
  95. None
  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

  104. None
  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

  108. None
  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

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

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

    0 module.exports = /* module 0’s code */ MODULE 1 module.exports = /* module 1’s code */ MODULE 2 module.exports = /* module 2’s code */ MODULE 3 module.exports = /* module 3’s code */ module.exports = window.path.to.module2;
  115. None
  116. ANY WEBPACK.CONFIG.JS

  117. ANY WEBPACK.CONFIG.JS

  118. CONSISTENT asset 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 MUST have a ROLLBACK
 PLAN

  125. None
  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
  127. None
  128. MAINTAIN FIXING FIRES BEFORE THEY HAPPEN

  129. None
  130. DEVOPS WHEN 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
  135. None
  136. single point the FAILURE of

  137. None
  138. LET’S TALK about CACHING

  139. None
  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
  145. None
  146. FAILOVER CACHING SAVING 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
  149. None
  150. OUT-OF-BAND-CACHE THIS IS WHY WE CREATED A REUSABLE npm install

    out-of-band-cache
  151. None
  152. None
  153. HYGIENE PAYING 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.
  156. None
  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 QUICKLY 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.
  159. MAY THE SOURCE BE WITH YOU SLIDES WILL BE POSTED

    ON TWITTER SHORTLY – FOLLOW ME @INDEXZERO THANKS FOR LISTENING!