Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Design System Driven Android Development: A Gui...

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.

Zhanibek Marshal

August 02, 2023
Tweet

More Decks by Zhanibek Marshal

Other Decks in Technology

Transcript

  1. Topic Zhanibek Marshal Senior Engineer at Trade Republic Twitter: @megasuperhero

    Mastodon: @[email protected] Ahmed Ateek Senior Engineer at Trade Republic Twitter: @AhmedAteek Mastodon: @[email protected] © TRADE REPUBLIC BANK 2022 | PROJECT NAME Salem 󰏱 & Alaykum 󰎺 2
  2. 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
  3. Q& Slido.com: #1056058 4 © TRADE REPUBLIC BANK 2023 |

    Design System Driven Android Development: A Guide to Automation Tools
  4. 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
  5. Topic Start foundation Early 2021 How it started © TRADE

    REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools 6
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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
  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 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
  15. 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
  16. 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
  17. Foundation of a Design System 18 © TRADE REPUBLIC BANK

    2023 | Design System Driven Android Development: A Guide to Automation Tools
  18. 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.
  19. 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
  20. 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
  21. 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
  22. 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
  23. 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
  24. 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
  25. 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
  26. Topic Colors 27 © TRADE REPUBLIC BANK 2023 | Design

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

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

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

    System Driven Android Development: A Guide to Automation Tools
  30. Topic • Theme • Spacing • etc.. Foundations © TRADE

    REPUBLIC BANK 2022 | PROJECT NAME 31
  31. Exporting tools 32 © TRADE REPUBLIC BANK 2023 | Design

    System Driven Android Development: A Guide to Automation Tools
  32. 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
  33. Topic Figma © TRADE REPUBLIC BANK 2023 | Design System

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

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

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

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

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

    System Driven Android Development: A Guide to Automation Tools 39
  39. 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
  40. 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
  41. Topic Figma © TRADE REPUBLIC BANK 2023 | Design System

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

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

    Driven Android Development: A Guide to Automation Tools 44
  44. 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
  45. Topic Figma Export © TRADE REPUBLIC BANK 2023 | Design

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

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

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

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

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

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

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

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

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

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

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

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

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

    | Design System Driven Android Development: A Guide to Automation Tools
  59. 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
  60. 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
  61. Lint check Following common convention for Design System 62 ©

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

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

    BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
  64. 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
  65. 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
  66. 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
  67. 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
  68. 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
  69. 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
  70. Snapshot testing Verifying Design System components 71 © TRADE REPUBLIC

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

    2023 | Design System Driven Android Development: A Guide to Automation Tools
  72. 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
  73. Daily life of engineers 74 © TRADE REPUBLIC BANK 2023

    | Design System Driven Android Development: A Guide to Automation Tools
  74. 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
  75. 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
  76. 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
  77. 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
  78. Topic PHOTO Finding the 🐛 bug Daily life of engineers

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

    80 © TRADE REPUBLIC BANK 2023 | Design System Driven Android Development: A Guide to Automation Tools
  80. 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
  81. Topic Ensuring that Design System Components are not broken 82

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

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

    | Design System Driven Android Development: A Guide to Automation Tools
  84. Topic 85 © TRADE REPUBLIC BANK 2023 | Design System

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

    System Driven Android Development: A Guide to Automation Tools
  86. Topic Why 87 © TRADE REPUBLIC BANK 2023 | Design

    System Driven Android Development: A Guide to Automation Tools
  87. Topic How 88 © TRADE REPUBLIC BANK 2023 | Design

    System Driven Android Development: A Guide to Automation Tools
  88. Topic How 89 © TRADE REPUBLIC BANK 2023 | Design

    System Driven Android Development: A Guide to Automation Tools
  89. Topic How 90 © TRADE REPUBLIC BANK 2023 | Design

    System Driven Android Development: A Guide to Automation Tools
  90. Topic How it looks 91 © TRADE REPUBLIC BANK 2023

    | Design System Driven Android Development: A Guide to Automation Tools
  91. Topic How it works 92 © TRADE REPUBLIC BANK 2023

    | Design System Driven Android Development: A Guide to Automation Tools
  92. Topic How it works 93 © TRADE REPUBLIC BANK 2023

    | Design System Driven Android Development: A Guide to Automation Tools
  93. Topic How it works 94 © TRADE REPUBLIC BANK 2023

    | Design System Driven Android Development: A Guide to Automation Tools
  94. Topic How it works 95 © TRADE REPUBLIC BANK 2023

    | Design System Driven Android Development: A Guide to Automation Tools
  95. Topic How it works 96 © TRADE REPUBLIC BANK 2023

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

    2023 | Design System Driven Android Development: A Guide to Automation Tools
  97. 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
  98. Topic How 99 © TRADE REPUBLIC BANK 2023 | Design

    System Driven Android Development: A Guide to Automation Tools
  99. Topic How 100 © TRADE REPUBLIC BANK 2023 | Design

    System Driven Android Development: A Guide to Automation Tools
  100. Topic How 101 © TRADE REPUBLIC BANK 2023 | Design

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

    2023 | Design System Driven Android Development: A Guide to Automation Tools
  102. 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
  103. THANK 104 © TRADE REPUBLIC BANK 2023 | Design System

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

    Design System Driven Android Development: A Guide to Automation Tools