Design Systems: when and how much?

Design systems are an investment. It takes time and resources to build and maintain them. When your team is small, investing in design systems can seem unnecessary or feel like a luxury you can't afford. Many companies don't employ people to focus on design systems until the inefficiencies of not having one become too painful to bear.

This talk shares examples from building design systems at GitHub, shows you how this can improve the design and development workflow, and help you to understand when you need to start building design systems and how much of a system you might need.

Transcript

1. Design Systems When and how much? Diana Mounter | @broccolini
2. Design Systems at GitHub !
3. What is a design system?
7. Style guide, pattern library, CSS framework, or design system? ht @jonrohan
9. ! Design Systems at GitHub
10. Rules, constraints, and principles, implemented in design and code.
11. Color Rule: must pass minimum color contrast ratio of 4.5:1 Constraint: number of colors in the palette Principle: color should be used in a meaningful way
13. .utilities {…} .Components {…} .custom-styles {…} $foreground $background $border
14. Typography Spacing Color Parts of a system
15. Typography Spacing Color Components Page layouts Parts of a system
16. Typography Spacing Color Components Page layouts Interaction models Voice & tone, words, 
 grammar & mechanics Parts of a system
17. Interrelated independent parts
18. Button Component Interaction model Component Page layout
19. GitHub Design System Documentation (style guide) Prototyping tool Primer CSS Sketch UI Kit
20. GitHub Design System Documentation (style guide) Prototyping tool Primer CSS JS code style Brand guidelines Sketch UI Kit Email toolkit Native 
 UI kit
21. GitHub Design System Documentation (style guide) Prototyping tool Primer CSS JS code style Brand guidelines Sketch UI Kit Email toolkit Native 
 UI kit
22. Why
24. primercss.io github.com GitHub app More CSS Primer modules No docs }
25. Systems weren’t clearly defined 
 (in code or design)
26. 2,449
 hex values
27. Improve the workflow for designers who code & engineers who build UI
28. Introduce utilities based on systems
29. <div class=“p-3"> .p-1 { padding: $spacer-3; } $spacer-3: 16px;
30. 8 breaks down, and adds up to whole numbers more easily 16 16 16 16 16 16 16 16 32 32 32 32 64 64 32
31. Typography
32. Behind every part of the system is a micro-system
33. 7 different box styles
34. // block .Box {…} // elements .Box-header {…} .Box-body {…} .Box-footer {…} // modifiers .Box-header--blue {…} .Box--large {…}
35. "If I’m reading html, I want to know what the css is going to do.” Adam Morse, CSS and Scalability
36. <div class="Box Box--large”> <h2 class="text-center text-green"> 
 Saved!</h2> </div>
37. Documentation
38. Feedback loop HTML CSS I want to make a change!
39. Feedback loop HTML CSS I want to make a change!
40. A good system empowers 
 designers to code, and empowers engineers to design.
41. • Highly reusable and flexible styles • A clear and consistent naming convention • Up-to-date and well written documentation
42. “I feel like I have super powers and don’t want everyone else to realize that I’m totally faking.”
43. Scaling the system
44. What if you didn’t have to write all that markup either?
45. Primer CSS New 38% .erb files using Primer on dotcom
46. GH
47. GH R J R J J J J R R R J J R R R J
48. GH R J ? J ? J J R ? R J J R R R J
49. System Code Design programs Documentation
50. Source of truth Code Design programs Documentation
51. Distill the system into it’s 
 purest form
52. When and how much?
53. When? No System It really hurts not having one
54. No system Material Design We need a design system! Started to get painful
55. “…the inefficiencies that a medium [sized] team can roll with are catastrophically wasteful to a team of our size” Jon Gold, Painting with Code
56. This should be solved once Component Interaction model Component Page layout
57. You can start with systems
58. Design systems should be 
 built for change.
59. When? Now! How much? As much as you need!
60. Thank you Diana Mounter | @broccolini