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

by Design Systems France

Slide 1

Slide 1 text

Component State Meetup #3 Design System Review @Malt

Slide 2

Slide 2 text

DESIGN SYSTEM SAPHIR - LE FIGARO REVIEW

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

“ 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

Slide 6

Slide 6 text

15 janvier 1826 Le journal LA GENÈSE

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

VIE DU DESIGN SYSTEM

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

Choix du logo VIE DU DESIGN SYSTEM

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

! Webflow SOLUTI N LA GENÈSE

Slide 38

Slide 38 text

VIE DU DESIGN SYSTEM

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

! Zeroheight SOLUTI N LA GENÈSE

Slide 41

Slide 41 text

VIE DU DESIGN SYSTEM

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

Juin 2019 Vision Cible AVENIR DU DESIGN SYSTEM

Slide 47

Slide 47 text

Workflow fluide Voice & Tone Branding AVENIR DU DESIGN SYSTEM

Slide 48

Slide 48 text

Questions ? THE END

Slide 49

Slide 49 text

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