Design System Driven Android Development: A Guide to Automation Tools

In today's fast-paced development environment, implementing design systems is crucial for achieving consistency and efficiency in Android app development. However, designing and implementing a comprehensive design system can be a daunting task, especially without the proper automation tools.

At Trade Republic, our Design Systems team has been working on an automation tool that streamlines the design system implementation process for our Android development workflow. In this session, we will share our experience and insights on how automation tools can help developers translate designs into code and enforce design system rules automatically, reducing human errors and saving valuable development time.

In this presentation, we will showcase our journey and highlight the importance of automation tools in accelerating the design system implementation process. We will focus on the following key areas:

1. Exporting resources from Figma: Discover how we have leveraged automation tools to seamlessly export design assets, such as colours, typography, icons, and more, from Figma into the Android development environment.
2. Snapshot testing Design System components: Learn how we have integrated snapshot testing techniques into our automation tools to ensure the visual consistency and integrity of Design System components across different Android devices and screen sizes.
3. Localisation of resources: Explore our approach to automating the localisation of design resources, mostly strings resources for users across different languages.
4. Annotation-based Design System gallery: Dive into the power of annotation-based automation tools that automatically generate a comprehensive gallery of Design System components, making it easy for developers to prototype and designers to QA components.

Transcript

1. Design System Driven Android Development: 07 | 2023 © TRADE REPUBLIC BANK 2023 1
2. Topic Zhanibek Marshal Senior Engineer at Trade Republic Twitter: @megasuperhero Mastodon: @zhanibek@androiddev.social Ahmed Ateek Senior Engineer at Trade Republic Twitter: @AhmedAteek Mastodon: @ateek@androiddev.social © TRADE REPUBLIC BANK 2022 | PROJECT NAME Salem 󰏱 & Alaykum 󰎺 2
3. 01. Design System at Trade Republic New beginning of the journey (Zhanibek) 02. Foundation of Design Systems What makes a design system a design system! (Ahmed) 03. Exporting tools Automate and generate everything (Ahmed) 04. Lint check Following common convention (Zhanibek) 05. Snapshot testing Verifying Design System components (Zhanibek) 06. Design System Gallery app How to show & use the gallery app (Ahmed) 07. Summary What we have used (Zhanibek) © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools 3
4. Q& Slido.com: #1056058 4 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
5. Design System 2.0 Beginning of the journey for the Next Gen © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools 5
6. Topic Start foundation Early 2021 How it started © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools 6
7. Topic Start foundation Early 2021 Jetpack Compose Beta June 2021 How it started © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools 7
8. Topic We took a risk early and invested our time into Jetpack Compose Beta PHOTO 8 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
9. Topic Start foundation Early 2021 Jetpack Compose Beta June 2021 How it started Launch of 1.0 February 2022 9 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
10. Topic Launched at the beginning of 2022. Since then we have shipped many new features, but we needed to make a new foundation to enable us scaling up to even more new products Design System 1.0 PHOTO 10 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
11. Topic New vision on how to democratise wealth Mid 2022 How it’s going 11 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
12. Topic New vision on how to democratise wealth Mid 2022 Foundation of Design System 2.0 Autumn 2022 How it’s going 12 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
13. Topic New vision on how to democratise wealth Mid 2022 Foundation of Design System 2.0 Autumn 2022 Basic components December 2022 How it’s going 13 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
14. Topic New vision on how to democratise wealth Mid 2022 Foundation of Design System 2.0 Autumn 2022 Finishing Design System 2.0 April 2023 Basic components December 2022 How it’s going 14 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
15. Topic New vision on how to democratise wealth Mid 2022 Foundation of Design System 2.0 Autumn 2022 Finishing Design System 2.0 April 2023 Launch 2.0 May 2023 Basic components December 2022 How it’s going 15 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
16. Topic We have refined existing components and created new ones that enabled us to redesign the application Design System 2.0 16 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
17. Topic New vision on how to democratise wealth Mid 2022 Foundation of Design System 2.0 Autumn 2022 Finishing redesign April 2023 Launch 2.0 May 2023 Basic components December 2022 How it’s going Droidcon Berlin July 2023 17 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
18. Foundation of a Design System 18 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
19. Topic Atomic Design © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools 19 Atomic design is a methodology for creating and organizing user interfaces (UI) and design systems. It was introduced by Brad Frost in 2013 as a way to approach design in a modular and systematic manner.
20. Topic The smallest building blocks, such as buttons, inputs, and labels. Atom 20 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
21. Topic Combinations of atoms that create small functional components, like a search bar or a form. Molecules 21 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
22. Topic Collections of molecules and/or atoms that form larger, more complex components, like a navigation menu or a list of items. Organisms 22 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
23. Topic Complete layouts that demonstrate the overall structure of a page, combining organisms, molecules, and atoms. Templates 23 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
24. Topic Pages: Concrete instances of templates that showcase real content and data, representing the final product. Pages 24 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
25. The Foundations What makes a design system a design system! 25 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
26. Topic is a collection of reusable components, guidelines, and standards that are used to build and maintain consistent, cohesive, and user-friendly digital products. It serves as a single source of truth for design and development teams, providing a set of pre-defined rules, patterns, and assets that help streamline the process of creating and maintaining user interfaces. Design System 26 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
27. Topic Colors 27 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools Code Sample
28. Topic Typography 28 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
29. Topic Shapes/Icons 29 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
30. Topic Components 30 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
31. Topic • Theme • Spacing • etc.. Foundations © TRADE REPUBLIC BANK 2022 | PROJECT NAME 31
32. Exporting tools 32 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
33. Topic 33 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools Having a single source of truth for a design system is crucial for several reasons - Consistency - Efficiency - Scalability - Maintenance and Updates - Collaboration and Communication Figma
34. Topic Figma © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools 34
35. Topic Designer Request © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools 35
36. Topic Designer Request © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools 36
37. Topic Designer Request © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools 37
38. Topic Designer Request © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools 38
39. Topic Designer Request © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools 39
40. Topic 40 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools The Figma API supports read access and interactions with Figma files. This gives you the ability to view and extract any objects or layers, and their properties, so you can render them as images outside of Figma. https://www.figma.com/developers/api Figma API
41. Topic 41 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools The Figma API supports read access and interactions with Figma files. This gives you the ability to view and extract any objects or layers, and their properties, so you can render them as images outside of Figma. https://www.figma.com/developers/api Figma API
42. Topic Figma © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools 42
43. Topic Figma © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools 43
44. Topic Figma © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools 44
45. Topic 45 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools Command line utility to export colors, typography, icons and images from Figma to Xcode / Android Studio project https://github.com/RedMadRobot/figm a-export RedMadRobot - Figma-export
46. Topic Figma Export © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools 46
47. Topic Setup 47 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
48. Topic Setup 48 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
49. Topic Setup 49 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
50. Topic How it work! 50 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
51. Topic How it work! 51 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
52. Topic How it work! 52 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
53. Topic How it work! 53 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
54. Topic How it work! 54 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
55. Topic How it work! 55 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
56. Topic How it work! 56 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
57. Topic How it work! 57 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
58. Topic How it work! 58 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
59. Topic How it work! 59 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
60. Topic 60 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools Same setup we did for Icons, it can be repeated for Colors, Typography and Images RedMadRobot - Figma-export
61. Topic 61 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools be aware that the auto-generated files will replace the old ones with the new Class/Files. It is recommended that you create a new modules for the auto-generated files RedMadRobot - Figma-export
62. Lint check Following common convention for Design System 62 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
63. Topic Extend Jetpack Compose naming convention 63 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
64. Topic Using Detekt rules from Twitter 64 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
65. Topic Design System 1.0 (legacy) was not following common naming, so customise it whatever your need is Customise Detekt Rule 65 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
66. You rule your rule Writing your own rule helps a lot to automise custom process 66 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
67. Topic 1. Extend io.gitlab.arturbosch.detekt.api.Rule. Small guide to create your own detekt rule 67 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
68. Topic 1. Extend io.gitlab.arturbosch.detekt.api.Rule. 2. Write the logic for your rule Small guide to create your own detekt rule 68 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
69. Topic 1. Extend io.gitlab.arturbosch.detekt.api.Rule. 2. Write the logic for your rule 3. Create unit tests for the rule Small guide to create your own detekt rule 69 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
70. Topic 1. Extend io.gitlab.arturbosch.detekt.api.Rule. 2. Write the logic for your rule 3. Create unit tests for the rule 4. Add your rule to detekt-config.yml Small guide to create your own detekt rule 70 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
71. Snapshot testing Verifying Design System components 71 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
72. Topic Paparazzi from Square (Block) 72 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
73. Topic We need a snapshot testing to verify works done on Design Systems running on Github Actions. Luckily Paparazzi from Square(Block) announced support for Jetpack Compose out of the box Paparazzi has Jetpack Compose support out of the box 73 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
74. Daily life of engineers 74 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
75. snapshot Checking the component behaviour by generating the snapshot recordings 75 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
76. Topic PHOTO It’s best to verify component behaviour by writing a test. 76 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
77. Topic PHOTO It’s best to verify component behaviour by writing a test. 77 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
78. Default device Small device Dark theme ❌ ❌ ❌ Expanded state Dynamic color ✅ ❌ PHOTO 78 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
79. Topic PHOTO Finding the 🐛 bug Daily life of engineers 79 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
80. Topic PHOTO Fix the bug 🛠 Daily life of engineers 80 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
81. Default device Small device Dark theme Expanded state Dynamic color PHOTO ✅ ✅ ✅ ✅ ✅ 81 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
82. Topic Ensuring that Design System Components are not broken 82 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
83. Topic Ensuring that Design System Components are not broken 83 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
84. Design System Gallery App 84 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
85. Topic 85 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools - Engineers - QA (Designers/ Product) - etc Target Audience
86. Topic Why 86 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
87. Topic Why 87 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
88. Topic How 88 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
89. Topic How 89 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
90. Topic How 90 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
91. Topic How it looks 91 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
92. Topic How it works 92 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
93. Topic How it works 93 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
94. Topic How it works 94 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
95. Topic How it works 95 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
96. Topic How it works 96 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
97. KSP annotation tools for Gallery 97 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
98. Topic is an API that you can use to develop lightweight compiler plugins. KSP provides a simplified compiler plugin API that leverages the power of Kotlin while keeping the learning curve at a minimum. Compared to KAPT, annotation processors that use KSP can run up to 2x faster. Kotlin Symbol Processing (KSP) 98 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
99. Topic How 99 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
100. Topic How 100 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
101. Topic How 101 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
102. Summary What we have used 102 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
103. Figma-export Paparazzi To export colors, typography to DS foundation Snapshotting DS components KSP Twitter-Compose Rules Automatically generating DS gallery Static analysis of DS rule with Detekt PHOTO PHOTO PHOTO What we have used to automate 103 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
104. THANK 104 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
105. Q& Slido.com: #1056058 105 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools