Design systems : Bench et reco sur les outils

Design Systems : Bench et reco sur les
outils
Digital Service Design
by Capgemini

2
Préambule
Cette liste d’outils permet de donner une bonne vision d’ensemble de ce qui
existe aujourd’hui sur le marché. Les outils de design sont en évolution
constante et rapide ces dernières années donc il faut s’attendre à beaucoup
d’autres nouveautés.
Le but va être de mettre en place un écosystème d’outils en fonction de
chaque contexte projet.

3
Ces outils doivent permettre de...
DESIGNER (en basse et/ou haute fidélité)
PROTOTYPER (en basse et/ou haute fidélité)
PARTAGER (entre designers)
VERSIONNER (des fichiers, des composants…)
TRANSMETTRE (aux équipes de dev)
DOCUMENTER (les connaissances, les guidelines, …)

4
Sommaire
1
2
3
4
5
6
Design
Prototypage
Librairies partagées UI
Versioning de composants
Outils de Hand-off
Partage et documentation

Place your description here (between 2 and 4
lines). The block should never be moved. The
style of text should remain the same
(Montserrat light, 28pt, dark gray, leading 1.3).
Place your long title
here on 3 lines
maximum.
Backelite - Digital Service Design by CapgeminiBackelite - Digital Service Design by Capgemini
Les outils de design
5

6
À quoi ça sert ?
Les outils de design permettent de
démontrer les hypothèses de conception
et de valider des choix avant de les
développer.
Beaucoup de nouveaux logiciels adaptés
au design d’interfaces ont vu le jour ces
dernières années. Ces logiciels ont
l’avantage de proposer aux designers
une conception par composants.

7
Sketch
Les +
● Fait pour travailler par composants
(symboles atomic, factorisation,
responsive…)
● Librairies partagées natives
● Beaucoup de plugins et de compatibilités
avec des outils externes (Zeplin, Marvel,
Invision, Sympli, Craft etc…)
● Grosse communauté derrière pour faire
évoluer ces plugins
● Peu coûteux
Les -
● Dispo uniquement sur Mac
● Ne va pas jusqu’au prototypage poussé
Pourquoi, quand et comment l’utiliser
80 € / an

8
Invision studio
Les +
● Permettrait d’avoir un seul outil/suite
d’outils pour tout faire (design, prototypage,
hand-off…)
Les -
● Encore en version beta
→ à surveiller de près.
Les premiers retours que j’ai entendus :
prometteur mais encore un peu léger en
fonctionnalités et possibilités par rapport à
sketch.
Encore en Beta

9
Figma
Les +
● Fait pour travailler par composants
● Versioning et librairies intégrés (puisque
le concept même du logiciel est le travail
collaboratif)
● Encore plus adapté que sketch pour faire
de l’atomic design (override de texte, de
couleur et de style beaucoup plus
simple)
● En ligne, donc pour MAC & PC
● Possibilité d’importer facilement des
fichiers Sketch
Les -
● Pas de prototypage poussé
● Les .fig enregistrables en local ne sont
pas ouvrables par d’autres logiciels
● Obligation d’avoir une connexion
internet
voir le site
10 € par mois

10
UxPin Les +
● Seul outil existant aujourd’hui et proposant
une expérience globale (wireframes +
prototypage + UI design + specs +
documentation)
● Fonctionnalité pour créer ou importer des
design systems et gérer des designs cross-
plateformes.
Les -
● Pas identifié aujourd’hui comme logiciel de
design (plutôt en complément de Sketch)
● Courbe d’apprentissage plus longue
● Pas de possibilité d’enregistrer en local
● Obligation d’avoir une connexion internet
Uxpin et design system
24 € par mois

11
Adobe Xd
Les +
● Disponible sur Mac & PC
● Grosse société derrière (Adobe)
● Prototypage plus poussé que sur Sketch
(animations)
● Bonnes performances
Les -
● Vient de sortir : manque encore plusieurs
fonctionnalités importantes (responsive,
dev handoff)
● Gestion des symboles encore limitée
● Library partagée adobe limitée
24 €/mois (ou 60€/mois pour toutes la CC)

12
Quelques chiffres (2017)
Source : Design Tools Survey 2017
Quel logiciel de design d’interface utilisez-vous ?

13
Mon avis
Je déconseille les logiciels Photoshop et Illustrator qui ne sont
pas faits pour travailler par composants. Ils doivent cependant
être conservés pour de la production de contenus
(illustrations, photomontage et retouches etc…)
Je favoriserais Sketch, qui pour le moment est en avance sur
les autres logiciels, mais il faut garder en tête que tout cela
bouge très vite.
Il faut trouver des workflows qui soient plus ou moins
indépendants d’un logiciel de design en particulier.

here on 3 lines
maximum.
Les outils de prototypage
14

15
À quoi ça sert ?
Les outils de prototypages servent à
pouvoir tester rapidement un parcours
ou un écran en situation réelle.
On distinguera 2 types de proto :
Simples : un proto simple se réduira à
une suite d’écrans avec quelques
transitions
Complexes : un proto complexe pourra
intégrer des animations plus poussées,
des variables avec de la vraie saisie de
texte etc.

16
Invision Les +
● Simple et rapide
● Bonne synchronisation avec Sketch via le
plugin Craft
● Idéal pour avoir tout de suite quelque
chose à tester, même très tôt dans la
conception
Les -
● Prototype très simple avec peu d’autres
interactions que celle de “clic&go”
● Pas de notion de variables
● Pas d’animations poussées
Voir les prix
Invision

17
Principle Les +
● Assez facile à prendre en main
● Possibilité de tester des gestures
(drag&drop, swipe…)
● Permet de régler assez finement des
micro animations
● Bonne compatibilité avec Sketch
Les -
● Peut vite s’avérer complexe pour animer
tout un parcours
● Pas forcément très adapté pour du test
utilisateur poussé
● Mac only
Principle For Mac
Prix : 110 €

18
Flinto Les +
● Prise en main rapide.
● Animations propres et fluides.
● Gestion simple des comportements,
micro-interactions sur des éléments.
● Bonne compatibilité avec Sketch.
● Fichier .flinto généré en local.
● Voir sur son mobile son travail en cours.
Les -
● ...
Flinto
Prix : 83 €

19
Proto.io Les +
● Prototype hébergé en ligne donc
accessible depuis n’importe où.
● Permet de prototyper de la VR
Les -
● Les fichiers sources sont hébergés en ligne
et ne sont plus accessibles une fois la
période d’essai expirée.
● Lenteurs observées sur du prototypage
complexe.
→ attention, les protos créés en version d’essai
ne sont plus récupérables si on ne passe pas en
payant
Proto.io
Prix : de 20 à 135 € / Mois

20
Axure
Les +
● Le top pour faire des tests utilisateurs
poussés avec beaucoup de règles
d’affichage et de variables
Les -
● Outil complexe à prendre en main et qui
a un peu vieilli
● Mieux adapté au web qu’à des proto
mobiles
Axure
25 € par mois ou 402 € à l’achat

21
Framer Studio Les +
● Prototypage très poussé qui permet tous
les types d’interactions
● Intégration de données et de variables
● Intégration de code
● Possibilité de l’utiliser aussi en outil de
design
Les -
● Courbe d’apprentissage plus longue
● Mac only
Prix : entre 10 € et jusqu’à 700 € / mois
Framer

here on 3 lines
maximum.
Librairies partagées UI
(pour les designers)
22

23
Les librairies partagées
À quoi ça sert ?
Les librairies permettent aux designers
d’aller chercher à un seul endroit tous les
éléments principaux (couleurs, grilles,
templates, icônes, composants…) qui leur
permettront de construire le/les
produit(s).
Les composants sont accessibles
directement depuis l’outil de design
(intégration totale dans leur workflow).
Tous les composants sont synchronisés à
cette librairie.

24
Librairies Sketch Les +
● Native au logiciel Sketch (pas de coût
supplémentaire)
● Possibilité de choisir le serveur de
stockage des librairies (cloud, drive,
dropbox…)
● Beaucoup de passerelles avec des plugins
pour avoir un workflow complet
(versioning, documentation etc…)
Les -
● Pas de gestion des styles de typos
● Pas de vision online des composants
● Workflow peut vite devenir complexe à
gérer
● Sketch onlySketch libraries
0 € (Intégré dans sketch)

25
Lingo Les +
● Visibilité du système en ligne en un clic
● Contrôle des permissions (qui peut
éditer ou non le système)
● Gestion ultra puissante des icônes
(réutilisables sur tous les logiciels)
Les -
● Composants stockés sur leurs serveurs
● Pas d’inspection codée des composants
● Pas de versioning de composants
● La documentation des composants
reste très simple (partie “note”)
Lingo
Entre 23 € par mois (5 users) et 121 € (50 users)

26
DSM invision Les +
● Visibilité du système en ligne en un clic
● Documentation directement depuis le
système (avec mise en forme, possibilité
d’intégrer des gif etc…)
● Possibilité de gérer plusieurs versions du
système en parallèle (versionning)
● Mise à dispo des design tokens
Les -
● Encore en beta
● Pas d’inspection codée des composants
● Les assets se récupèrent un par un et on
ne peut pas venir ramener dans sketch
tous le design system d’un coup
Design System Manager - Invision
Inclus dans l’abonnement invision

27
Mon avis
Les librairies partagées sont un fabuleux outil pour se partager
des assets entre designers. Cela permet d’avoir une seule
source pour aller chercher les composants et être sûr que tout
le monde est à jour.
Attention tout de même car cela demande d’avoir une
certaine rigueur dans les process de travail et une librairie mal
rangée, mal nommée ou mal entretenue peut vite devenir
contre-productive.

here on 3 lines
maximum.
Les outils de versioning
(pour les designers)
28

29
À quoi ça sert ?
À partir du moment où plusieurs
designers vont travailler avec des
composants communs (via les librairies
partagées) le versioning va leur servir à
monitorer les changements et organiser
leur workflow.
Il faut distinguer le versionning du
système (et des composants) et le
versionning des fichiers de travail des
designers.

30
Plant.io Les +
● Directement depuis Sketch (pas d’outil en
plus) → + intégré au workflow des designers
● Très simple
Les -
● Pas de vision du projet en ligne (donc seuls les
designers peuvent voir les changements)
→ Autre modèle = Pas de branches, pas de commit.
Est-ce vraiment adapté aux gros projets ?
Plant
10 € par mois

31
Abstract Les +
● Outil le plus en vogue du marché sur ces
problématiques
● Basé sur un workflow similaire à celui des dev
(commit/branches/Merge)
● Prise en compte des librairies sketch
● Commentaires et annotations
Les -
● Nécessite une vraie organisation d’équipe
autour de ce logiciel
● Obligation d’ouvrir les fichiers sketch depuis
Abstract (Oblige tout le monde à passer par cet
outil = Dépendance à abstract)
● Pas de versioning par composant (le
versionning se fait par plan de travail donc par
écran).
Go Abstract
Entre 7 et 12 € par mois

32
Design File Versioning
Kactus Les +
● Open source. Possibilité de contribuer
● Intégration avec Github (centralisation des
livrables dev et design)
Les -
● Nécessite une bonne connaissance de
github (peu de designers le maîtrise)
● Très peu visuel
→ bien pour des petits projets avec des profils de
designers très “tech”
Kactus
4 € par mois

33
Design File Versioning
Mon avis
Abstract est aujourd’hui le logiciel qui semble s’imposer pour le versionning.
Ces logiciels de versionning sont utiles si l’on part sur un système ultra synchronisé
(librairies partagées Sketch) OU si on sait que beaucoup de personnes différentes
seront amenées à collaborer sur les mêmes fichiers Sketch.
A noter qu’un outil comme le DSM d’invision par exemple permet le versionning
du système de composants UI mais pas le versionning et le merging des fichiers
Sketch en eux-mêmes.

here on 3 lines
maximum.
Les outils de “Hand-off”
(Faciliter le passage en dev)
34

35
Les outils de hand-off
À quoi ça sert ?
Tant que le pont entre design et code ne
sera pas tombé, les composants devront
exister côté UI (sur sketch, figma...) ET côté
dev (vrais composants codés).
Les outils de “hand-off” facilitent le
passage en développement front en
permettant de récupérer des couleurs,
styles de typos, positions, tailles…
directement en code.
Ils permettent également aux
développeurs de télécharger les assets
graphiques dont ils ont besoin.

36
Visualization & Handoff
Sympli Les +
● Plugins Sketch et photoshop
● Des plugins pour les dev natifs (android, iOS)
● Intégration Jira
● Commentaires, annotations
● Possibilité de voir les différentes versions et
l’historique des changements
● Permet de prototyper directement dans l’outil
Les -
● Le développeur ne reçoit pas d’alerte lorsqu’il
y a un changement sur un écran.
● Le rendu des typographies peut parfois poser
problèmeSympli
12 € par mois

37
Inspect by InVision Les +
● Plugins Sketch et photoshop
● Écosystème invision qui permet
avec un seul abonnement de
couvrir la plupart des besoins en
outils
● Combiné à l’outil de prototypage
(une seule source à regarder pour
les développeurs)
● Intégration Jira et Intégration
Slack
Les -
● Pas de plugins pour les dev natifs
→ connexion avec invision design studio
? avec le DSM ?
Inspect
Inclus dans l’abonnement invision

38
Zeplin Les +
● Plugins Sketch, Figma, XD et photoshop
● Intégration Jira et Intégration Slack
● Génération automatique de Style Guide
(mais souvent pas optimale car prend en
compte TOUS les éléments des écrans
comme des couleurs d’illustration par
exemple qui ne font pas partie du système)
Les -
● Pas de plugins pour les dev natifs
Zeplin
12 € par mois

39
ZeroHeight Les +
● Va beaucoup plus loin que les autres outils
en proposant une vision par composants
● Propose la visualisation d’un style guide en
ligne facile à documenter
● Rattaché aux librairies partagées Sketch
● Historique des versions pour chaque
composant
Les -
● Pas de commentaires possibles
● Pas de plugin pour les dev natifs
ZeroHeight
400 € par mois

4
0
Mon avis
Tous ces logiciels de hand-off se valent plus ou moins.
Zéro Height est un bon candidat car en plus d’une vision
intelligente et factorisée des composants, il permet de créer
un style guide en ligne sur la base du fichier Sketch (design
only) et d’avoir très rapidement une première ébauche de
design system.

here on 3 lines
maximum.
41

42
À quoi ça sert ?
L’objectif est d’avoir un seul endroit, connu
de tous pour trouver toute la matière
“officielle” pour commencer ou reprendre un
projet digital. C’est une sorte de hub qui peut
rediriger vers d’autres liens, d’autres outils.
Cette source doit être :
- facile à mettre à jour (le + automatique
possible)
- bien organisée (par exemple par profil
ou type de produit)
- facile d'accès par les équipes (trouvable
et diffusée largement)

43
Frontify
côté design
Les +
● Possibilité de gérer plusieurs marques sous
un même compte
● Tout le monde peut venir éditer la
documentation (pas juste les profils tech)
● Possibilité de créer une page "landing" pour
mettre des news et faire vivre le style guide
● Espace de commentaires pour
échanger/itérer sur le projet et suivre les
évolutions (versioning)
Les -
● Pas de lien entre Sketch et Frontify (pas de
remplissage automatique du style guide)
● Tout est sur leurs serveurs (comment cela se
passe si on veut récupérer la
documentation?)
● Pas de possibilité de customisation (on prend
l’outil tel qu’il est et on s’intègre dedans).
Frontify

4
4
Frontify
côté tech
Les +
● Hébergement géré par Frontify
● La pattern librairie est synchronisée avec le
projet des développeurs
● Modèle déjà réfléchi en atomic design
● Le back office est déjà tout fait et facile à
prendre en main
Les -
● Tout est sur leurs serveurs
● Pas de possibilité de customisation
Frontify
Pattern library
2500 € par mois

45
Le site custom Les +
● Permet d’afficher tout ce qu’on veut, de la
manière dont on le souhaite.
● Pas dépendant d’une solution existante qu’il
faudra payer tous les mois.
● Possibilité de prévoir un back office pour
l’alimenter
● Possibilité de développer des passerelles
entre les composants codés/designés et le
système (mise à jour automatique, plugins…)
Les -
● Plus long (et plus coûteux ?) à réaliser
→ ça peut être la vision long terme
Prix à définir
Un site entièrement custom

46
Storybook Storybook peut être une solution pour des projets web
afin d’avoir rapidement un endroit où partager les assets
entre développeurs.
Les +
● Populaire et gratuit
● Bibliothèque de composants générée à partir des
composants React/Angular.
● Intégré au projet de dév, donc versionné.
● Notion de playground, qui permet de tester les
paramètres d’un composant “en live”.
Les -
● Très orienté “composants dev”, pas idéal pour de la
documentation UX/UI
● Styleguide maintenable uniquement par les
développeurs.
Storybook
Gratuit (open
source)

47
Google drive
Material.io
Google a sorti récemment une nouvelle
version du site Material.io
Toute leur documentation est rédigée
sur des Google doc partagés et ils ont
créé un outil qui lit ces documents et
vient alimenter automatiquement le
front de leur Design System…
Cela permet à tous de pouvoir éditer et
modifier la documentation.
Malin non ?

4
8
Mon avis
Le sujet du partage et de la documentation est épineux et dépend
de beaucoup de paramètres.
Les outils seront différents si le produit est amené à vivre
uniquement sur du web ou si au contraire il sera multi-
plateformes.
Dans tous les cas, l’idée est de commencer par la méthode, les
outils à mettre à dispo des équipes et la montée en compétences
de chacun.
Le lieu pour stocker toute cette matière doit pouvoir changer et
évoluer énormément au cours du projet.
La single source of truth

here on 3 lines
maximum.
Backelite - Digital Service Design by Capgemini
Pour toute question
audrey.hacq@backelite.com
The information contained in this presentation is
proprietary.
© 2018 Capgemini. All rights reserved. 49

Design systems : Bench et reco sur les outils

Contenu connexe

Tendances

Similaire à Design systems : Bench et reco sur les outils

Plus de Idean France

Design systems : Bench et reco sur les outils