Download as PDF, PPTX
Uploaded bySarah Federman
Design Systems at Scale
The document discusses the evolution and importance of design systems in scaling design practices across organizations, emphasizing that a design system functions as an organizational tool that minimizes duplication of efforts. It highlights benefits such as stronger brand identity and improved user experiences while outlining challenges and strategies for collaboration among designers and engineers. Additionally, it details the design system implementation at Adobe, including the operational aspects, measurement of success, and the necessity for inclusive and accessible documentation.
![[Kapič] Why You Should (Not) Probably Care about Machine Learning](https://cdn.slidesharecdn.com/ss_thumbnails/cyuwq2woqxsw7ntf2bie-signature-d4523b3bf020616e67040d2a940ba8bf9aeab187b20da49956548f98de22ea12-poli-180606121949-thumbnail.jpg?width=640&height=640&fit=bounds)
Design Systems at Scale
- 1. Sarah Federman Design Engineer Design Systemsat Scale @sarah_federman
- 2. Sarah Federman Design Engineer Design Systemsat Scale @sarah_federman
- 3.
- 4.
- 5. A brief historyof the universe
- 6.
- 8.
- 9. “We’re not designingpages, we’re designing systems of components.” - Stephen Hay (2012)
- 10.
- 14. Design and engineeringhave been on a collision course for years.
- 15.
- 16. Styleguides & BrandGuidelines
- 18. Spoiler: No onehas figured it out yet.
- 19. Spoiler: No onehas figured it out yet.
- 20. What is adesign system?
- 21. A product thathelps us scale our design practice.
- 22. Scale means gettingthe best results with the least duplication of effort.
- 23. Scale means gettingthe best results with the least duplication of effort. Keeping your designs DRY.
- 24. Duplication leads tofragmentation.
- 25. Duplication leads tofragmentation.
- 26.
- 27. In order toreally understand what a design system is, we have to understand where it lives.
- 28. A design systemis an organizational problem.
- 29. A design systemis an organizational problem.
- 30. A design systemis run like a product.
- 31. A design systemis run like a product.
- 35. Resources + Operationsoutputs Product Product + Emotion creates Experience
- 36. The product iswhat users consume. The experience is how it makes them feel. The operations are how it’s made.
- 38. None of itreally 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.
- 41. The benefits Quick iteration Strongerbrand identity Everyone speaks the same language Better user experience
- 42. A delivery mechanismfor important goals.
- 43. A delivery mechanismfor important goals.
- 44. A delivery mechanismfor important goals.
- 45. Collaborating at Scale DesignSystems at Adobe
- 47.
- 48.
- 49. What scale arewe dealing with?
- 50. What scale arewe dealing with? Over 250 designers world wide
- 51. What scale arewe dealing with? Over 124 products sent to market
- 52. What scale arewe dealing with? Available in 4 color themes
- 53. What scale arewe dealing with? Available on 6 platforms UWP (Windows) macOS Web Desktop iOS Android Web Mobile
- 54. What scale arewe dealing with? Built in multiple frameworks
- 56. This has 1,080permutations
- 57.
- 58. Standard & quietstyles
- 59. 5 interactive states (default,hover, down/touch, keyboard focus, disabled)
- 60.
- 61. Web Desktop macOSUWP (Windows) Web Mobile iOS Android
- 62. Web DesktopmacOSUWP (Windows) WebMobileiOSAndroid
- 63.
- 64. Establishing trust Implementing atscale Designing at scale Measuring success
- 65.
- 66.
- 69.
- 70. Spectrum “Basic Elements”- 2017 Q2
- 71.
- 72. “Does this workfor my product?” pain point
- 73. Spectrum needed tobe something people can really trust.
- 74.
- 75. Inclusion Criteria cross-platform 4 colorthemes accessible documentation etc.
- 76.
- 77.
- 79.
- 80. Imperative vs. DeclarativeApproach
- 81.
- 82. callout image Imperative vs. DeclarativeApproach column
- 83.
- 84.
- 85.
- 86. Spectrum DNA Store constantsas data Integrate constants with UI code Validate design integrity
- 88.
- 89.
- 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 4pt 8 pt 16 pt 2 pt 1 pt 2 pt 4 pt 8 pt checkbox-box-border-radius
- 91.
- 92. Asset Delivery Cataloging &Tracking Storage & Workflow Delivery & Validation
- 93. an evolving designprocess Designing at scale
- 94.
- 95. Button Link Split Button Action Button Toggle Switch Radio Checkbox TextField 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 TextField 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 TextField 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 growfaster?
- 99.
- 100.
- 101.
- 102.
- 103.
- 105.
- 106.
- 111.
- 112. How can wemeasure adoption at scale? pain point
- 113.
- 114.
- 115.
- 116.
- 117.
- 118.
- 119.
- 120.
- 121. Thank you! Sarah @sarah_federman Special thanksto PJ Buddhari (@pudjeeb_pj )for her contributions to the content and slides.