Engineering a design system

Slides for my Droidcon Berlin 2021 presentation:
Engineering a design system: how we design ours in our company, the entire process alongside with problems, controversy, and advantages we faced while building it.

Transcript

1. luca_nicolett ENGINEERING 🛠 A DESIGN SYSTEM 🧑🎨 HOW WE “DID” IT
2. 🧔 Luca 🇮🇹 Italian (🤌) 📍 London 🛠 Android engineer 💼 Triller luca_nicolett INTRODUCTIONS 👋
3. • What is a design system? • How does it impact the speed of design & development? • UI 㲗 code • Problems • Where we’re at • Conclusions ENGINEERING 🛠 A DESIGN SYSTEM 🧑🎨
4. WHAT IS A DESIGN SYSTEM? DESIGN SYSTEM 🧑🎨
5. “A design system is a set of interconnected patterns and shared practices coherently organised.” “A design system is a collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.” DESIGN SYSTEM 🧑🎨
6. NOT ONLY! DESIGN SYSTEM 🧑🎨
7. “The complete set of designs standards, documentation, and principle along with the toolkit (UI patterns and code components) to achieve those standards” DESIGN SYSTEM 🧑🎨
8. A design system is not just aesthetics, it’s implementation, code, all together DESIGN SYSTEM 🧑🎨
9. DESIGN SYSTEM 🧑🎨
10. DESIGN SYSTEM 🧑🎨
11. DESIGN SYSTEM 🧑🎨
12. DESIGN SYSTEM 🧑🎨
13. Advantages: • Consistency • Higher quality • Faster builds, through reusable components and shared rationale • Improved maintenance and scalability • Stronger focus on product - concentrate on solving user needs • More and better communication between teams DESIGN SYSTEM 🧑🎨
14. Advantages: • Consistency • Higher quality • Faster builds, through reusable components and shared rationale • Improved maintenance and scalability • Stronger focus on product - concentrate on solving user needs • More and better communication between teams DESIGN SYSTEM 🧑🎨
15. Advantages: • Consistency • Higher quality • Faster builds, through reusable components and shared rationale • Improved maintenance and scalability • Stronger focus on product - concentrate on solving user needs • More and better communication between teams DESIGN SYSTEM 🧑🎨
16. Advantages: • Consistency • Higher quality • Faster builds, through reusable components and shared rationale • Improved maintenance and scalability • Stronger focus on product - concentrate on solving user needs • More and better communication between teams DESIGN SYSTEM 🧑🎨
17. Advantages: • Consistency • Higher quality • Faster builds, through reusable components and shared rationale • Improved maintenance and scalability • Stronger focus on product - concentrate on solving user needs • More and better communication between teams DESIGN SYSTEM 🧑🎨
18. Advantages: • Consistency • Higher quality • Faster builds, through reusable components and shared rationale • Improved maintenance and scalability • Stronger focus on product - concentrate on solving user needs • More and better communication between teams DESIGN SYSTEM 🧑🎨
19. Disadvantages: • Huge initial effort • Less fl exibility DESIGN SYSTEM 🧑🎨
20. Disadvantages: • Huge initial effort • Less fl exibility DESIGN SYSTEM 🧑🎨
21. DESIGN SYSTEM 🧑🎨
22. Core components: • Color palette (colors) DESIGN SYSTEM 🧑🎨
23. Core components: • Color palette (colors) • Fonts DESIGN SYSTEM 🧑🎨
24. Core components: • Color palette (colors) • Fonts • Grid system DESIGN SYSTEM 🧑🎨
25. DESIGN SYSTEM 🧑🎨
26. Core components: • Color palette (colors) • Fonts • Grid system • Atoms DESIGN SYSTEM 🧑🎨
27. Core components: • Color palette (colors) • Fonts • Grid system • Atoms • Components DESIGN SYSTEM 🧑🎨
28. Core components: • Color palette (colors) • Fonts • Grid system • Atoms • Components DESIGN SYSTEM 🧑🎨
29. Core components: • Color palette (colors) • Fonts • Grid system • Atoms • Components DESIGN SYSTEM 🧑🎨
30. Core components: • Color palette (colors) • Fonts • Grid system • Atoms • Components DESIGN SYSTEM 🧑🎨
31. Core components: • Color palette (colors) • Fonts • Grid system • Atoms • Components DESIGN SYSTEM 🧑🎨
32. Core components: • Color palette (colors) • Fonts • Grid system • Atoms • Components DESIGN SYSTEM 🧑🎨
33. Core components: • Color palette (colors) ANDROID 🤖
34. Core components: • Color palette (colors) ANDROID 🤖
35. Core components: • Color palette (colors) • Fonts ANDROID 🤖
36. Core components: • Color palette (colors) • Fonts • Grid system ANDROID 🤖
37. Core components: • Color palette (colors) • Fonts • Grid system ANDROID 🤖
38. Core components: • Color palette (colors) • Fonts • Grid system ANDROID 🤖
39. Core components: • Color palette (colors) • Fonts • Grid system • Atoms ANDROID 🤖
40. Core components: • Color palette (colors) • Fonts • Grid system • Atoms ANDROID 🤖
41. Core components: • Color palette (colors) • Fonts • Grid system • Atoms • Components ANDROID 🤖
42. WIDGETS! ANDROID 🤖
43. • Idea from reactive frameworks ANDROID 🤖
44. • Idea from reactive frameworks • Re-usable ANDROID 🤖
45. • Idea from reactive frameworks • Re-usable • Slightly customisable/con fi gurable ANDROID 🤖
46. WIDGETS! ANDROID 🤖
47. WIDGETS! ANDROID 🤖
48. WIDGETS! ANDROID 🤖
49. WIDGETS! ANDROID 🤖
50. Small components (single responsibility) Vs Bigger components (more purpose, con fi gurable) ANDROID 🤖
51. Small components (single responsibility) ❌ Vs Bigger components (more purpose, con fi gurable) ✅ ANDROID 🤖
52. ANDROID 🤖
53. ANDROID 🤖
54. ANDROID 🤖
55. ANDROID 🤖
56. Small components (single responsibility) ✅ ÷ Bigger components (more purpose, con fi gurable) ❌ ANDROID 🤖
57. ANDROID 🤖
58. ANDROID 🤖
59. ANDROID 🤖
60. ANDROID 🤖
61. ANDROID 🤖
62. ANDROID 🤖
63. ANDROID 🤖
64. ANDROID 🤖
65. ANDROID 🤖
66. ANDROID 🤖
67. ANDROID 🤖
68. ANDROID 🤖
69. ANDROID 🤖
70. ANDROID 🤖
71. ANDROID 🤖
72. ANDROID 🤖
73. ANDROID 🤖
74. ANDROID 🤖
75. DEV APP ANDROID 🤖
76. ANDROID 🤖
77. ANDROID 🤖
78. ANDROID 🤖
79. ANDROID 🤖
80. ANDROID 🤖
81. CURRENT STATE ANDROID 🤖
82. ANDROID 🤖
83. ANDROID 🤖
84. 㲗 㲗 㲗 CURRENT STATE ⏳
85. FUTURE? CURRENT STATE ⏳
86. SPECIAL THANKS 🙏 @leiajmassey @nicoletti_vale @lucaluzzatti @IzzyStannett
87. QUESTIONS? QUESTIONS ⁉
88. • Do your iOS team have the same things in place? • What was the hardest thing to achieve while implementing your design system? • Do you plan to move your code to Jetpack Compose? If so, how? • Are there any limitation to this system? • Why are you using a grid system? What are the advantages? QUESTIONS ⁉
89. • https://en.wikipedia.org/wiki/Design_system • https://www.invisionapp.com/inside-design/guide-to-design-systems/ • https://www.youtube.com/watch?v=wc5krC28ynQ • https://www.youtube.com/watch?v=TgWyyoofKIA • https://atomicdesign.bradfrost.com/ • http://material.io/ RESOURCES 🗃