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
   

   View Slide

2. 🧔 Luca
   
   
   🇮🇹 Italian (🤌)
   
   
   📍 London
   
   
   🛠 Android engineer
   
   
   💼 Triller
   
   
   luca_nicolett
   
   
   INTRODUCTIONS 👋
   

   View Slide

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 🧑🎨
   

   View Slide

4. WHAT IS A DESIGN SYSTEM?
   DESIGN SYSTEM 🧑🎨
   

   View Slide

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 🧑🎨
   

   View Slide

6. NOT ONLY!
   DESIGN SYSTEM 🧑🎨
   

   View Slide

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 🧑🎨
   

   View Slide

8. A design system is not just aesthetics, it’s implementation, code, all
   together
   DESIGN SYSTEM 🧑🎨
   

   View Slide

9. DESIGN SYSTEM 🧑🎨
   

   View Slide

10. DESIGN SYSTEM 🧑🎨
    

    View Slide

11. DESIGN SYSTEM 🧑🎨
    

    View Slide

12. DESIGN SYSTEM 🧑🎨
    

    View Slide

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 🧑🎨
    

    View Slide

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 🧑🎨
    

    View Slide

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 🧑🎨
    

    View Slide

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 🧑🎨
    

    View Slide

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 🧑🎨
    

    View Slide

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 🧑🎨
    

    View Slide

19. Disadvantages:
    
    
    • Huge initial effort
    
    
    • Less
    fl
    exibility
    DESIGN SYSTEM 🧑🎨
    

    View Slide

20. Disadvantages:
    
    
    • Huge initial effort
    
    
    • Less
    fl
    exibility
    DESIGN SYSTEM 🧑🎨
    

    View Slide

21. DESIGN SYSTEM 🧑🎨
    

    View Slide

22. Core components:
    
    
    • Color palette (colors)
    DESIGN SYSTEM 🧑🎨
    

    View Slide

23. Core components:
    
    
    • Color palette (colors)
    
    
    • Fonts
    DESIGN SYSTEM 🧑🎨
    

    View Slide

24. Core components:
    
    
    • Color palette (colors)
    
    
    • Fonts
    
    
    • Grid system
    DESIGN SYSTEM 🧑🎨
    

    View Slide

25. DESIGN SYSTEM 🧑🎨
    

    View Slide

26. Core components:
    
    
    • Color palette (colors)
    
    
    • Fonts
    
    
    • Grid system
    
    
    • Atoms
    DESIGN SYSTEM 🧑🎨
    

    View Slide

27. Core components:
    
    
    • Color palette (colors)
    
    
    • Fonts
    
    
    • Grid system
    
    
    • Atoms
    
    
    • Components
    DESIGN SYSTEM 🧑🎨
    

    View Slide

28. Core components:
    
    
    • Color palette (colors)
    
    
    • Fonts
    
    
    • Grid system
    
    
    • Atoms
    
    
    • Components
    DESIGN SYSTEM 🧑🎨
    

    View Slide

29. Core components:
    
    
    • Color palette (colors)
    
    
    • Fonts
    
    
    • Grid system
    
    
    • Atoms
    
    
    • Components
    DESIGN SYSTEM 🧑🎨
    

    View Slide

30. Core components:
    
    
    • Color palette (colors)
    
    
    • Fonts
    
    
    • Grid system
    
    
    • Atoms
    
    
    • Components
    DESIGN SYSTEM 🧑🎨
    

    View Slide

31. Core components:
    
    
    • Color palette (colors)
    
    
    • Fonts
    
    
    • Grid system
    
    
    • Atoms
    
    
    • Components
    DESIGN SYSTEM 🧑🎨
    

    View Slide

32. Core components:
    
    
    • Color palette (colors)
    
    
    • Fonts
    
    
    • Grid system
    
    
    • Atoms
    
    
    • Components
    DESIGN SYSTEM 🧑🎨
    

    View Slide

33. Core components:
    
    
    • Color palette (colors)
    ANDROID 🤖
    

    View Slide

34. Core components:
    
    
    • Color palette (colors)
    ANDROID 🤖
    

    View Slide

35. Core components:
    
    
    • Color palette (colors)
    
    
    • Fonts
    ANDROID 🤖
    

    View Slide

36. Core components:
    
    
    • Color palette (colors)
    
    
    • Fonts
    
    
    • Grid system
    ANDROID 🤖
    

    View Slide

37. Core components:
    
    
    • Color palette (colors)
    
    
    • Fonts
    
    
    • Grid system
    ANDROID 🤖
    

    View Slide

38. Core components:
    
    
    • Color palette (colors)
    
    
    • Fonts
    
    
    • Grid system
    ANDROID 🤖
    

    View Slide

39. Core components:
    
    
    • Color palette (colors)
    
    
    • Fonts
    
    
    • Grid system
    
    
    • Atoms
    ANDROID 🤖
    

    View Slide

40. Core components:
    
    
    • Color palette (colors)
    
    
    • Fonts
    
    
    • Grid system
    
    
    • Atoms
    ANDROID 🤖
    

    View Slide

41. Core components:
    
    
    • Color palette (colors)
    
    
    • Fonts
    
    
    • Grid system
    
    
    • Atoms
    
    
    • Components
    ANDROID 🤖
    

    View Slide

42. WIDGETS!
    ANDROID 🤖
    

    View Slide

43. • Idea from reactive frameworks
    ANDROID 🤖
    

    View Slide

44. • Idea from reactive frameworks
    
    
    • Re-usable
    ANDROID 🤖
    

    View Slide

45. • Idea from reactive frameworks
    
    
    • Re-usable
    
    
    • Slightly customisable/con
    fi
    gurable
    ANDROID 🤖
    

    View Slide

46. WIDGETS!
    ANDROID 🤖
    

    View Slide

47. WIDGETS!
    ANDROID 🤖
    

    View Slide

48. WIDGETS!
    ANDROID 🤖
    

    View Slide

49. WIDGETS!
    ANDROID 🤖
    

    View Slide

50. Small components (single responsibility)
    
    
    Vs
    
    
    Bigger components (more purpose, con
    fi
    gurable)
    
    
    ANDROID 🤖
    

    View Slide

51. Small components (single responsibility) ❌
    
    
    Vs
    
    
    Bigger components (more purpose, con
    fi
    gurable) ✅
    
    
    ANDROID 🤖
    

    View Slide

52. ANDROID 🤖
    

    View Slide

53. ANDROID 🤖
    

    View Slide

54. ANDROID 🤖
    

    View Slide

55. ANDROID 🤖
    

    View Slide

56. Small components (single responsibility) ✅
    
    
    ÷
    
    
    Bigger components (more purpose, con
    fi
    gurable) ❌
    
    
    ANDROID 🤖
    

    View Slide

57. ANDROID 🤖
    

    View Slide

58. ANDROID 🤖
    

    View Slide

59. ANDROID 🤖
    

    View Slide

60. ANDROID 🤖
    

    View Slide

61. ANDROID 🤖
    

    View Slide

62. ANDROID 🤖
    

    View Slide

63. ANDROID 🤖
    

    View Slide

64. ANDROID 🤖
    

    View Slide

65. ANDROID 🤖
    

    View Slide

66. ANDROID 🤖
    

    View Slide

67. ANDROID 🤖
    

    View Slide

68. ANDROID 🤖
    

    View Slide

69. ANDROID 🤖
    

    View Slide

70. ANDROID 🤖
    

    View Slide

71. ANDROID 🤖
    

    View Slide

72. ANDROID 🤖
    

    View Slide

73. ANDROID 🤖
    

    View Slide

74. ANDROID 🤖
    

    View Slide

75. DEV APP
    ANDROID 🤖
    

    View Slide

76. ANDROID 🤖
    

    View Slide

77. ANDROID 🤖
    

    View Slide

78. ANDROID 🤖
    

    View Slide

79. ANDROID 🤖
    

    View Slide

80. ANDROID 🤖
    

    View Slide

81. CURRENT STATE
    ANDROID 🤖
    

    View Slide

82. ANDROID 🤖
    

    View Slide

83. ANDROID 🤖
    

    View Slide

84. 㲗
    
    
    㲗
    
    
    㲗
    CURRENT STATE ⏳
    

    View Slide

85. FUTURE?
    CURRENT STATE ⏳
    

    View Slide

86. SPECIAL THANKS 🙏
    @leiajmassey
    @nicoletti_vale @lucaluzzatti @IzzyStannett
    

    View Slide

87. QUESTIONS?
    QUESTIONS ⁉
    

    View Slide

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 ⁉
    

    View Slide

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 🗃
    

    View Slide