Design Systems France Meetup #3 - Design System Review - Saphir par Le Figaro

Design Systems France Meetup #3 - Design System Review - Saphir par Le Figaro

Orateurs :
Arthur Frouniol, Product Designer @ Le Figaro
Michael Rasoahaingo, Front-end Engineer @ Le Figaro

Talk :
Dans ce meetup, découvrez Saphir, le design system de Le Figaro.
Dans cette Design System Review, Arhtur et Michale présentent la genèse de Saphir.
En partant de la veille, la création de la première Sketch Design Library au début de la documentation et en passant par l'inventaire de composant dans Storybook.

Sources, outils cités
Sketch https://www.sketch.com/
ZeroHeight https://zeroheight.com/
Abstract https://www.abstract.com/
Storybook https://storybook.js.org/

Design Systems France
La communauté dédiée aux concepteurs de Design Systems dans l'éco-système français.
Constuire, apprendre, partager.
https://www.meetup.com/fr-FR/DesignSystemsFrance

Cet évènement a été hébergé par Malt.
https://www.malt.fr/

Transcript

1. Component State Meetup #3 Design System Review @Malt
2. DESIGN SYSTEM SAPHIR - LE FIGARO REVIEW
3. DESIGN SYSTEM REVIEW Arthur FOURNIOL PRODUCT DESIGNER Michael RASOAHAINGO FRONT END ENGINEER
4. DESIGN SYSTEM REVIEW Arthur FOURNIOL PRODUCT DESIGNER Sisley ROCHE PRODUCT DESIGNER Nicolas CHAPON DIRECTEUR ARTISTIQUE Ning CHENG UI DESIGNER JUNIOR Dylan DE OLIVEIRA UI DESIGNER JUNIOR Benjamin EIERMANN UX DESIGNER JUNIOR STUDIO CRÉATIF DU FIGARO
5. “ Le fossé séparant théorie et pratique est moins large en théorie qu’il ne l’est en pratique ” DESIGN SYSTEM REVIEW Auteur inconnu
6. 15 janvier 1826 Le journal LA GENÈSE
7. 1999 Le site 15 janvier 1826 Le journal LA GENÈSE
8. 2015 Sketch 1999 Le site 15 janvier 1826 Le journal LA GENÈSE
9. www.reverta.co m 1 5 lefigaro.fr Maquettes sur Photoshop LA GENÈSE
10. www.reverta.co m 1 6 Application Figaro Fichiers Sketch orphelins LA GENÈSE
11. www.reverta.co m 1 7 Multi produits LA GENÈSE
12. Début 2017 Le déclic 2015 Sketch 1999 Le site 15 janvier 1826 Le journal LA GENÈSE
13. ? Comment améliorer la maintenance des produits ? PR BLÈME LA GENÈSE
14. ! Avoir un endroit qui centralise les règles permettant de concevoir un produit SOLUTI N LA GENÈSE
15. Été 2017 Début du projet Design System VIE DU DESIGN SYSTEM
16. DÉBUT DU PROJET S’INFORMER METTRE EN PRATIQUE ÉVANGELISER
17. Découpage de composants Test des symbols dans Sketch DÉBUT DU PROJET S’INFORMER METTRE EN PRATIQUE ÉVANGELISER
18. VIE DU DESIGN SYSTEM
19. Convaincre les équipes produits Présentation à la direction S’INFORMER METTRE EN PRATIQUE ÉVANGELISER DÉBUT DU PROJET
20. ? Déléguer l'évangélisation à un public non averti LA GENÈSE PR BLÈME
21. ! Porter le sujet soi-même SOLUTI N LA GENÈSE
22. Janvier 2018 Bibliothèque de composants sur Sketch Été 2017 Qu’est-ce qu’un Design System ? VIE DU DESIGN SYSTEM
23. www.reverta.co m 2 9 Application Kiosque Perte des fichiers VIE DU DESIGN SYSTEM
24. ? Comment partager une bibliothèque Sketch à travers plusieurs produits ? PR BLÈME LA GENÈSE
25. ! Mise en place d’une bibliothèque d’éléments génériques aux différents produits SOLUTI N LA GENÈSE
26. Éléments atomiques (couleurs, icônes) VIE DU DESIGN SYSTEM
28. Éléments atomiques (couleurs, icônes) VIE DU DESIGN SYSTEM Bibliothèque de composants
30. Éléments atomiques (couleurs, icônes) VIE DU DESIGN SYSTEM Bibliothèque de composants Mobile iOS Tablette iOS Mobile Android Tablette Android
31. Été 2018 Saphir Janvier 2018 Bibliothèque de composants sur Sketch Été 2017 Qu’est-ce qu’un Design System ? VIE DU DESIGN SYSTEM
32. ? Comment rassembler les équipes autour de la création du Design System ? PR BLÈME LA GENÈSE
33. ! Choisir ensemble le nom du Design System SOLUTI N LA GENÈSE
34. Choix du nom VIE DU DESIGN SYSTEM Encre Plume Scoop Ink Saphir Comète
35. Choix du logo VIE DU DESIGN SYSTEM
36. ? Comment créer facilement une plateforme pour Saphir ? PR BLÈME LA GENÈSE
37. ! Webflow SOLUTI N LA GENÈSE
38. VIE DU DESIGN SYSTEM
39. ? Comment maintenir plus facilement le Design System ? PR BLÈME LA GENÈSE
40. ! Zeroheight SOLUTI N LA GENÈSE
41. VIE DU DESIGN SYSTEM
42. STACK TECH STACK DESIGN Sketch Zeroheight Zeplin React Node.js Storybook VIE DU DESIGN SYSTEM
43. VIE DU DESIGN SYSTEM La stack technique Découpage en composants Thème Storybook - - - -
44. Aujourd’hui Les limites été 2018 Saphir Janvier 2018 Bibliothèque de composants sur Sketch été 2017 Qu’est-ce que’un Design System ? VIE DU DESIGN SYSTEM
45. Rassembler + de gens Multi produits Maintenance et outillage AVENIR DU DESIGN SYSTEM
46. Juin 2019 Vision Cible AVENIR DU DESIGN SYSTEM
47. Workflow fluide Voice & Tone Branding AVENIR DU DESIGN SYSTEM
48. Questions ? THE END
49. 1 PROBLÉMATIQUES Quels outils et process utiliser pour maintenir le Design System de manière fluide et efficace ? Que faire de mon Design System si mes produits ont des chartes différentes ? Comment impliquer les différentes équipes dans la conception du Design System ? 2 3
50. Atelier
51. X /DesignSystemsFrance /DesignSystemsFr designsystems.fr