Design Systems at Scale

1. Sarah Federman Design Engineer Design Systems at Scale @sarah_federman

2. Sarah Federman Design Engineer Design Systems at Scale @sarah_federman

3. Engineering Operations Design

5. A brief history of the universe

6. Old Photoshop

8. Atomic Design

9. “We’re not designing pages, we’re designing systems of components.” - Stephen Hay (2012)

10. Document-oriented development becomes component-oriented development

14. Design and engineering have been on a collision course for years.

15. Enter design systems

16. Styleguides & Brand Guidelines

18. Spoiler: No one has figured it out yet.

19. Spoiler: No one has figured it out yet.

20. What is a design system?

21. A product that helps us scale our design practice.

22. Scale means getting the best results with the least duplication of eﬀort.

23. Scale means getting the best results with the least duplication of eﬀort. Keeping your designs DRY.

24. Duplication leads to fragmentation.

25. Duplication leads to fragmentation.

26. Diving deeper

27. In order to really understand what a design system is, we have to understand where it lives.

28. A design system is an organizational problem.

29. A design system is an organizational problem.

30. A design system is run like a product.

31. A design system is run like a product.

35. Resources + Operations outputs Product Product + Emotion creates Experience

36. The product is what users consume. The experience is how it makes them feel. The operations are how it’s made.

38. None of it really matters as long as your team knows what the heck you’re talking about.

39. Buttons, links, inputs, icons, etc Fonts, colors, sizing Basic documentation UI Components Grid Code style Developer tooling Design tokens High level guidelines Accessibility information Internationalization Motion guidelines Voice and tone/writing Workflow tooling

40. The benefits

41. The benefits Quick iteration Stronger brand identity Everyone speaks the same language Better user experience

42. A delivery mechanism for important goals.

45. Collaborating at Scale Design Systems at Adobe

47. spectrum

48. SPECTRUUUUUU  UUUUUUMMM!!

49. What scale are we dealing with?

50. What scale are we dealing with? Over 250 designers world wide

51. What scale are we dealing with? Over 124 products sent to market

52. What scale are we dealing with? Available in 4 color themes

53. What scale are we dealing with? Available on 6 platforms UWP (Windows) macOS Web Desktop iOS Android Web Mobile

54. What scale are we dealing with? Built in multiple frameworks

56. This has 1,080 permutations

57. Call to action Primary Secondary Warning Over background

58. Standard & quiet styles

59. 5 interactive states  (default, hover, down/touch, keyboard focus, disabled)

60. Extra Light Light Dark Extra Dark

61. Web Desktop macOS UWP (Windows) Web Mobile iOS Android

62. Web DesktopmacOSUWP (Windows) Web MobileiOSAndroid

64. Establishing trust Implementing at scale Designing at scale Measuring success

65. relaunching our website Establishing trust

66. 2017 Q2

69. “Is this up-to-date?” pain point

70. Spectrum “Basic Elements” - 2017 Q2

71. Lightroom CC

72. “Does this work for my product?” pain point

73. Spectrum needed to be something people can really trust.

74. Inclusion Criteria

75. Inclusion Criteria cross-platform 4 color themes accessible documentation etc.

76. website

77. website spectrum=

79. Interactive playground Resources Anatomy Variations Usage guidelines Keyboard interactions

80. Imperative vs. Declarative Approach

81. callout image column row section column content-block callout image Imperative vs. Declarative Approach

82. callout image Imperative vs. Declarative Approach column

83. frameworks and tooling Implementing at scale

84. Designers Engineers Hybrids spectrum-react spectrum-css spectrum-native Spectrum Design Frameworks etc.

85. Spectrum DNA

86. Spectrum DNA Store constants as data Integrate constants with UI code Validate design integrity

88. checkbox-box-border-radius

89. border-radius-xsmall border-radius-small border-radius-regular border-radius-medium border-radius-large border-radius-small border-size-thin border-size-thick border-size-thicker border-size-thickest checkbox-box-border-radius

90. border-radius-xsmall border-radius-small border-radius-regular border-radius-medium border-radius-large border-radius-small border-size-thin border-size-thick border-size-thicker border-size-thickest 1 pt 2 pt 4 pt 8 pt 16 pt 2 pt 1 pt 2 pt 4 pt 8 pt checkbox-box-border-radius

91. Asset Delivery

92. Asset Delivery Cataloging & Tracking Storage & Workflow Delivery & Validation

93. an evolving design process Designing at scale

94. “Where did everything go!?” pain point

95. Button Link Split Button Action Button Toggle Switch Radio Checkbox Text Field Text Area Tag Table Forms Stepper Field Flyout Menu Dropdown Combo Box Simple Search Search Within Slider Color Slider Color Picker Loader Calendar Progress Bar Star Rating Scroll Bar In-line Alert Toast Tooltip Status Light Dialog Badge Banner Rule Tabs Accordion Panel Carousel Popover Web Rails Basic Table Basic Card Global Header Steplist Pagination Miller Columns Side Navigation Tree View Bread Crumbs Logic Button Tray Video Player Drag & Drop List Drag & Drop Zone Tool Well these have not been vetted

96. Button Link Split Button Action Button Toggle Switch Radio Checkbox Text Field Text Area Tag Table Forms Stepper Field Flyout Menu Dropdown Combo Box Simple Search Search Within Slider Color Slider Color Picker Loader Calendar Progress Bar Star Rating Scroll Bar In-line Alert Toast Tooltip Status Light Dialog Badge Banner Rule Tabs Accordion Panel Carousel Popover Web Rails Basic Table Basic Card Global Header Steplist Pagination Miller Columns Side Navigation Tree View Bread Crumbs Logic Button Tray Video Player Drag & Drop List Drag & Drop Zone Tool Well these are vetted against the entire system Button Link Switch Radio Checkbox Text Field Dropdown Tooltip Dialog

97. Button Link Split Button Action Button Toggle Switch Radio Checkbox Text Field Text Area Tag Table Forms Stepper Field Flyout Menu Dropdown Combo Box Simple Search Search Within Slider Color Slider Color Picker Loader Calendar Progress Bar Star Rating Scroll Bar In-line Alert Toast Tooltip Status Light Dialog Badge Banner Rule Tabs Accordion Panel Carousel Popover Web Rails Basic Table Basic Card Global Header Steplist Pagination Miller Columns Side Navigation Tree View Bread Crumbs Logic Button Tray Video Player Drag & Drop List Drag & Drop Zone Tool Well these are vetted against the entire system Button Link Action Button Switch Radio Checkbox Text Field Tag Dropdown Slider Loader Progress Bar Tooltip Status Light Dialog Rule Tabs Basic Table Side Navigation Tool

98. How can Spectrum grow faster?

99. Spectrum Precursors

103. Documentation, a design process

105. Involve various disciplines early.

106. Involve various disciplines early.

111. scorecards Measuring success

112. How can we measure adoption at scale? pain point

113. Spectrum Scorecards

114. Spectrum Scorecards

115. Spectrum Scorecards Self-assessment

116. Spectrum Scorecards Self-assessment Spectrum assessment

117. color system elements icons inclusive etc.

121. Thank you! Sarah @sarah_federman Special thanks to PJ Buddhari (@pudjeeb_pj )for her contributions to the content and slides.

Design Systems at Scale

Design Systems at Scale

Recommended

More Related Content

Similar to Design Systems at Scale

Similar to Design Systems at Scale(20)

Recently uploaded

Recently uploaded(20)

Design Systems at Scale