Design Systems at Scale - Design Systems London
•
1 j'aime•406 vues
This document discusses design systems and scaling design practices across large organizations. It describes how a design system can include components, guidelines, and tools that help maintain consistency across products as an organization grows. An example system called Spectrum is described, which provides over 1,000 design permutations across platforms for a company with over 250 designers and 124 products. The key to scaling is establishing shared standards and processes, automating where possible, and measuring success.
Recommandé
Contenu connexe
Similaire à Design Systems at Scale - Design Systems London
Similaire à Design Systems at Scale - Design Systems London (20)
Dernier
Dernier (20)
Design Systems at Scale - Design Systems London
- 1. Design Systems at Scale Sarah Federman @sarah_federman
- 4. spectrum
- 6. What is a design system?
- 7. A collection of products that help scale our design practice.
- 8. Scale means getting the best results with the least duplication of effort.
- 9. Scale means getting the best results with the least duplication of effort. Keeping your designs DRY.
- 10. Duplication leads to fragmentation.
- 11. What scale are we dealing with?
- 12. What scale are we dealing with? Over 250 designers world wide
- 13. What scale are we dealing with? Over 124 products sent to market
- 14. What scale are we dealing with? Available in 4 color themes
- 15. What scale are we dealing with? Available on 6 platforms UWP (Windows) macOS Web Desktop iOS Android Web Mobile
- 16. What scale are we dealing with? Built in multiple frameworks
- 18. Solving for a diversity of user needs: XD, Scan, and Experience Manager.
- 19. These are just from Illustrator
- 21. This has 1,080 permutations
- 23. Standard & quiet styles
- 24. 5 interactive states (default, hover, down/touch, keyboard focus, disabled)
- 26. Web Desktop macOS UWP (Windows) Web Mobile iOS Android
- 28. Put in all in one place. Hint: that place shouldn’t be one designer’s head.
- 29. Spectrum DNA
- 33. 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 px 2 pt 4 px 8 px 16 px 2 px 1 px 2 px 4 px 8 px checkbox-box-border-radius
- 34. Let the robots do it. Automate all the things!
- 38. Make it easy to get your stuff. Meet users where they are.
- 42. Share the load. Give other people things to do.
- 43. Inclusion Criteria cross-platform 4 color themes accessible documentation etc.
- 46. Master Table Spectrum Search + Source: AtlasKit (Atlassian)
- 47. Get your versioning straight, ASAP. Putting off decisions is a decision.
- 49. Spectrum website displays the stable version by default, with an easy-to-find mechanism for viewing the latest.
- 50. Tell, but prefer Show. Document, but also demonstrate value
- 51. We’ve been known to tell a developer “If it isn’t documented, it doesn’t exist.” Not only does it have to be doc’d, but it has to be explained and taught and demonstrated. Do that, and people will be excited — not about your documentation, but about your product. Mike Pope “
- 52. Form Builder
- 54. What’s measured is managed. PMs are great at this
- 59. Establishing trust Implementing at scale Designing at scale Measuring success
- 60. Thank you! Sarah @sarah_federman Special thanks to PJ Buddhari