Mise en place d'un design system dans l'application Dailymotion Android

Le Design System, on en parle, mais dans la pratique comment ça se passe ?

Cette présentation est un retour d’expérience du lancement d’un Design System dans l’application Android Dailymotion.

Des questions qu’il a fallu se poser, aux défis organisationnels qu’implique ce projet, en passant par les choix techniques retenus, nous exposerons la mise en place étape par étape de cet outil qui simplifie la vie de toute l’équipe (à moyen terme)

Transcript

1. Mise en place d’un design system dans l’application Android 14 Novembre 2019 MICHEL GAUZINS
2. Plan 2 2 1. Présentation. 2. L’évolution graphique. 3. Design System : la théorie. 4. Mise en pratique. 5. Design Show. 6. Migration.
3. The home for videos that matter 3 milliards video vues par mois 300 millions visiteurs uniques par mois 150 millions vidéos dans le catalogue DAILYMOTION: CHIFFRES CLES 3
4. Dailymotion Android c’est... Kotlin à 100% Coroutines 3 modules apps Android App Bundle 4 DAILYMOTION 4 GraphQL SQLDelight Shared Design Tracking Download
5. L’évolution graphique
6. Un peu d’histoire… EVOLUTION GRAPHIQUE 6 Néon - 2017 NextExplore - 2018 Home Improv - 2019
7. EVOLUTION GRAPHIQUE 7 Sources d’évolution L’evolution graphique d’une application est indispensable/inévitable. Lui donner une direction, une structure permet de la péréniser sur le long terme Guidelines Google/Apple Utilisateurs Roulement des équipes Evolution graphique
8. Design System : la théorie. 8
9. THEORIE 9 Principe de base “We’re not designing pages, we’re designing systems of components”, Stephen Hay
10. THEORIE 10 Atomic Design Atome Molécule Organisme
11. • Nommage des composants Les clés • Bonne communication • Travail en équipe • Une seule source de vérité 11 CHAPTER
12. La pratique 12
13. PRATIQUE 13 Resources Android layout
14. PRATIQUE 14 Resources Android layout drawable
15. PRATIQUE 15 Resources Android layout drawable style (Mais aussi color, font, dimens,…)
16. PRATIQUE 16 Module Design :design Attributs XML Agréger Préfixer Code Design
17. :design Attributs XML Agréger Préfixer Code Design PRATIQUE 17 Module Design
18. PRATIQUE 18 Classes ou attributs ? Choix basé sur la dose de complexité et de code commun
19. PRATIQUE 19 Les styles • Atome texte. • Variété des styles textview_styles.xml Structurer les styles
20. Design Show : l’app demo
21. DESIGN SHOW 21 Pourquoi une demo ? • Suivi des composants supportés • Support de développement des layouts • Verrouiller separation design/logic
22. DESIGN SHOW 22 Demo
23. DESIGN SHOW 23 Modules :design_show_lib build.gradle.kts :design_show_app
24. DESIGN SHOW 24 Dark Mode • Theme DayNight • Support minimal pour chaque composant ajouté
25. MIGRATION 25 L’Organisation • Prise d’initiative dans la construction du design system • Uniformisation des ressources • Rester pragmatique
26. La suite… • Intégrations aux autres apps • Continuer les efforts sur la migration
27. Questions ? 27
28. Annexes FOCUS TECH 28 • https://medium.com/dailymotion/introducing-a- design-system-in-dailymotion-android-application- e3c39c1ac982 • http://atomicdesign.bradfrost.com/chapter-2/