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
   

   View Slide

2. DESIGN SYSTEM
   SAPHIR - LE FIGARO
   REVIEW
   

   View Slide

3. DESIGN SYSTEM REVIEW
   Arthur FOURNIOL
   PRODUCT DESIGNER
   Michael RASOAHAINGO
   FRONT END ENGINEER
   

   View Slide

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
   

   View Slide

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
   

   View Slide

6. 15 janvier 1826
   Le journal
   LA GENÈSE
   

   View Slide

7. 1999
   Le site
   15 janvier 1826
   Le journal
   LA GENÈSE
   

   View Slide

8. 2015
   Sketch
   1999
   Le site
   15 janvier 1826
   Le journal
   LA GENÈSE
   

   View Slide

9. www.reverta.co
   m
   1
   5
   lefigaro.fr
   Maquettes sur Photoshop
   LA GENÈSE
   

   View Slide

10. www.reverta.co
    m
    1
    6
    Application Figaro
    Fichiers Sketch orphelins
    LA GENÈSE
    

    View Slide

11. www.reverta.co
    m
    1
    7
    Multi produits
    LA GENÈSE
    

    View Slide

12. Début 2017
    Le déclic
    2015
    Sketch
    1999
    Le site
    15 janvier 1826
    Le journal
    LA GENÈSE
    

    View Slide

13. ?
    Comment améliorer la maintenance des produits ?
    PR BLÈME
    LA GENÈSE
    

    View Slide

14. !
    Avoir un endroit qui centralise les règles
    permettant de concevoir un produit
    SOLUTI N
    LA GENÈSE
    

    View Slide

15. Été 2017
    Début du projet
    Design System
    VIE DU DESIGN SYSTEM
    

    View Slide

16. DÉBUT DU PROJET
    S’INFORMER METTRE EN PRATIQUE ÉVANGELISER
    

    View Slide

17. Découpage
    de composants
    Test des symbols
    dans Sketch
    DÉBUT DU PROJET
    S’INFORMER METTRE EN PRATIQUE ÉVANGELISER
    

    View Slide

18. VIE DU DESIGN SYSTEM
    

    View Slide

19. Convaincre
    les équipes produits
    Présentation à
    la direction
    S’INFORMER METTRE EN PRATIQUE ÉVANGELISER
    DÉBUT DU PROJET
    

    View Slide

20. ?
    Déléguer l'évangélisation à un public non averti
    LA GENÈSE
    PR BLÈME
    

    View Slide

21. !
    Porter le sujet soi-même
    SOLUTI N
    LA GENÈSE
    

    View Slide

22. Janvier 2018
    Bibliothèque
    de composants
    sur Sketch
    Été 2017
    Qu’est-ce qu’un
    Design System ?
    VIE DU DESIGN SYSTEM
    

    View Slide

23. www.reverta.co
    m
    2
    9
    Application Kiosque
    Perte des fichiers
    VIE DU DESIGN SYSTEM
    

    View Slide

24. ?
    Comment partager une bibliothèque Sketch
    à travers plusieurs produits ?
    PR BLÈME
    LA GENÈSE
    

    View Slide

25. !
    Mise en place d’une bibliothèque d’éléments
    génériques aux différents produits
    SOLUTI N
    LA GENÈSE
    

    View Slide

26. Éléments atomiques
    (couleurs, icônes)
    VIE DU DESIGN SYSTEM
    

    View Slide

27. View Slide

28. Éléments atomiques
    (couleurs, icônes)
    VIE DU DESIGN SYSTEM
    Bibliothèque de composants
    

    View Slide

29. View Slide

30. Éléments atomiques
    (couleurs, icônes)
    VIE DU DESIGN SYSTEM
    Bibliothèque de composants
    Mobile iOS Tablette iOS Mobile Android Tablette Android
    

    View Slide

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
    

    View Slide

32. ?
    Comment rassembler les équipes autour
    de la création du Design System ?
    PR BLÈME
    LA GENÈSE
    

    View Slide

33. !
    Choisir ensemble le nom du Design System
    SOLUTI N
    LA GENÈSE
    

    View Slide

34. Choix du nom
    VIE DU DESIGN SYSTEM
    Encre
    Plume
    Scoop
    Ink
    Saphir
    Comète
    

    View Slide

35. Choix du logo
    VIE DU DESIGN SYSTEM
    

    View Slide

36. ?
    Comment créer facilement
    une plateforme pour Saphir ?
    PR BLÈME
    LA GENÈSE
    

    View Slide

37. !
    Webflow
    SOLUTI N
    LA GENÈSE
    

    View Slide

38. VIE DU DESIGN SYSTEM
    

    View Slide

39. ?
    Comment maintenir plus facilement
    le Design System ?
    PR BLÈME
    LA GENÈSE
    

    View Slide

40. !
    Zeroheight
    SOLUTI N
    LA GENÈSE
    

    View Slide

41. VIE DU DESIGN SYSTEM
    

    View Slide

42. STACK TECH
    STACK DESIGN
    Sketch
    Zeroheight
    Zeplin React
    Node.js
    Storybook
    VIE DU DESIGN SYSTEM
    

    View Slide

43. VIE DU DESIGN SYSTEM
    La stack technique
    Découpage en composants
    Thème
    Storybook
    -
    -
    -
    -
    

    View Slide

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
    

    View Slide

45. Rassembler
    + de gens
    Multi
    produits
    Maintenance
    et outillage
    AVENIR DU DESIGN SYSTEM
    

    View Slide

46. Juin 2019
    Vision Cible
    AVENIR DU DESIGN SYSTEM
    

    View Slide

47. Workflow
    fluide
    Voice & Tone
    Branding
    AVENIR DU DESIGN SYSTEM
    

    View Slide

48. Questions ?
    THE END
    

    View Slide

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
    

    View Slide

50. Atelier
    

    View Slide

51. X
    /DesignSystemsFrance
    /DesignSystemsFr
    designsystems.fr
    

    View Slide