Design System Driven Android Development: A Guide to Automation Tools

Slide 1

Slide 1 text

Design System Driven Android Development: 07 | 2023 © TRADE REPUBLIC BANK 2023 1

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

Q& Slido.com: #1056058 4 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

Topic Start foundation Early 2021 How it started © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools 6

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

Foundation of a Design System 18 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools

Slide 19

Slide 19 text

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.

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Topic Colors 27 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools Code Sample

Slide 28

Slide 28 text

Topic Typography 28 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools

Slide 29

Slide 29 text

Topic Shapes/Icons 29 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools

Slide 30

Slide 30 text

Topic Components 30 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools

Slide 31

Slide 31 text

Topic ● Theme ● Spacing ● etc.. Foundations © TRADE REPUBLIC BANK 2022 | PROJECT NAME 31

Slide 32

Slide 32 text

Exporting tools 32 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

Topic Figma © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools 34

Slide 35

Slide 35 text

Topic Designer Request © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools 35

Slide 36

Slide 36 text

Topic Designer Request © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools 36

Slide 37

Slide 37 text

Topic Designer Request © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools 37

Slide 38

Slide 38 text

Topic Designer Request © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools 38

Slide 39

Slide 39 text

Topic Designer Request © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools 39

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

Topic Figma © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools 42

Slide 43

Slide 43 text

Topic Figma © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools 43

Slide 44

Slide 44 text

Topic Figma © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools 44

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

Topic Figma Export © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools 46

Slide 47

Slide 47 text

Topic Setup 47 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools

Slide 48

Slide 48 text

Topic Setup 48 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools

Slide 49

Slide 49 text

Topic Setup 49 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools

Slide 50

Slide 50 text

Topic How it work! 50 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools

Slide 51

Slide 51 text

Topic How it work! 51 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools

Slide 52

Slide 52 text

Topic How it work! 52 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools

Slide 53

Slide 53 text

Topic How it work! 53 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools

Slide 54

Slide 54 text

Topic How it work! 54 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools

Slide 55

Slide 55 text

Topic How it work! 55 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools

Slide 56

Slide 56 text

Topic How it work! 56 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools

Slide 57

Slide 57 text

Topic How it work! 57 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools

Slide 58

Slide 58 text

Topic How it work! 58 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools

Slide 59

Slide 59 text

Topic How it work! 59 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

Lint check Following common convention for Design System 62 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools

Slide 63

Slide 63 text

Topic Extend Jetpack Compose naming convention 63 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools

Slide 64

Slide 64 text

Topic Using Detekt rules from Twitter 64 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

Snapshot testing Verifying Design System components 71 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools

Slide 72

Slide 72 text

Topic Paparazzi from Square (Block) 72 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

Daily life of engineers 74 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

Topic PHOTO Finding the 🐛 bug Daily life of engineers 79 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools

Slide 80

Slide 80 text

Topic PHOTO Fix the bug 🛠 Daily life of engineers 80 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

Topic Ensuring that Design System Components are not broken 82 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools

Slide 83

Slide 83 text

Topic Ensuring that Design System Components are not broken 83 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools

Slide 84

Slide 84 text

Design System Gallery App 84 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools

Slide 85

Slide 85 text

Topic 85 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools - Engineers - QA (Designers/ Product) - etc Target Audience

Slide 86

Slide 86 text

Slide 87

Slide 87 text

Slide 88

Slide 88 text

Slide 89

Slide 89 text

Slide 90

Slide 90 text

Slide 91

Slide 91 text

Slide 92

Slide 92 text

Slide 93

Slide 93 text

Slide 94

Slide 94 text

Slide 95

Slide 95 text

Slide 96

Slide 96 text

Slide 97

Slide 97 text

KSP annotation tools for Gallery 97 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools

Slide 98

Slide 98 text

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

Slide 99

Slide 99 text

Slide 100

Slide 100 text

Slide 101

Slide 101 text

Slide 102

Slide 102 text

Summary What we have used 102 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools

Slide 103

Slide 103 text

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

Slide 104

Slide 104 text

Slide 105

Slide 105 text

Q& Slido.com: #1056058 105 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools