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

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

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/

73f82a90bab5250087193c95ea45585d?s=128

Design Systems France

January 24, 2019
Tweet

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

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

    composants
  29. None
  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