Les outils de prototypage
Pour qui :
Les designers Ux/Ui.
Pourquoi ?
- Designer les composants.
- Partager des bibliothèques de composants.
- Travailler en collaboration.
#1 Figma
Le plus :
Figma regroupe toutes les fonctions Sketch, Invision, Zeplin : conception, présentation, prototypage et inspection de code à elle toute seule.
- partage collaboratif en direct.
- bibliothèques partagées activables et désactivables.
- commentaires sur l’espace de travail.
- modification & récupération des composants facile / style en cascade.
Le prix :
- Gratuit 2 éditeurs & 3 projets.
- Bibliothèques DS 12$/ mois /user.
Compatibilité plateforme de partage de design system :
- Zéro height
Note : 4 étoiles / 4
#2 Sketch
Le plus :
- Outil le plus utilisé par la communauté Ux > compatible avec beaucoup d’autres outils (plugin material theme editor +++).
- Librairies partagées natives (adaptées au DS).
- Séparation claire page des symboles.
- Nombreux plugin zeplin / marvel / material theme editor avant.
- Option Cloud pour un travail collaboratif.
- Style modifiable.
Les moins :
- Gestion des styles de typographie compliquée.
- A pris légèrement du retard sur Figma (attention la course n’est pas finie !).
Le prix :
- 9$ par user.
- Cloud compris dans la licence Sketch.
Compatibilité plateforme de partage de design system :
- Invision DSM
- Zeroheight
Note : 3,5 étoiles sur 4
#3 Adobe XD
Le plus :
- Cloud de travail collaboratif.
- Plugin jira / zeplin / teams.
- Outil en pleine évolution.
- Grille de répétition / état des composants.
Les moins :
- Pas possibilité de prendre en charge plusieurs pages.
- Pas de copie de style.
- Pas encore aussi performant que Figma et toujours en bêta.
Le prix :
- Gratuit pour prototyper.
- Pour DS 11,99 €/ mois / user.
Compatibilité plateforme de partage de design system :
- Plugin toollab DSM (bêta).
- Zeroheight
Note : 2 étoiles sur 4
Les plateformes de partage de composants
Pour qui :
Les Ux designer et les développeurs front & toute l’équipe.
Pourquoi ?
Donner aux développeurs les composants, gérer le versioning et donner à l’équipe toute la documentation du design system.
Mandatory
La plateforme doit gérer le versioning.
# 1 Zéro height
Les plus :
Outil accessible pour les designers.
Vision par composant.
Visualisation d’un style guide en ligne facile à documenter.
Rattaché aux librairies partagées Sketch Figma ou XD.
Historique des versions pour chaque composant.
Les moins :
Pas de commentaires possibles.
Pas de plugin pour les dév natifs.
Le prix :
45€ / mois / user
Compatible :
Adobe Xd (ok) / Figma (très facile) / Sketch (un peu complexe)
Story book côté dév.
Note :
3 étoiles sur 4
#2 Invision DSM
Les plus :
Outil accessible pour les designers.
Documentation directement depuis le système versioning.
Design tokens.
Les moins :
Encore en beta.
Pas d’inspection codée des composants.
Les assets se récupèrent un par un.
Prix sur devis (trop cher).
Ne fonctionne pas encore avec Figma.
Compatible :
Sketch
Note :
2 étoiles sur 4
Les Outils de Handoff
Storybook
Pour qui :
Les développeurs.
Pourquoi ?
Stocker le code des composants front & back.
Mettre à disposition de l’équipe des Star d’UX.
Les plus :
Outil accessible pour les designers à condition de connaître le code.
Fonctionne avec du HTML brut, React, React Native, Vue, Angular, Mithril, Marko, Ember, Riot, Svelte.
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”.
Il peut éventuellement se plugger directement à Figma si pas de plateforme de partage.
Le prix :
Gratuit.
Les moins :
Très orienté “composants dev”, pas idéal pour de la documentation UX/UI.
Style guide maintainable uniquement par les développeurs.
A retenir :
1 Figma
Outil le plus adapté au Design system, fonctionnalités en avance, partage, travail en équipe, interface très simple, idéal, et prise en main rapide.
Très fluide avec Zero Eight.
2 Sketch
Sketch est une valeur sûre, on ne peut pas se tromper avec cet outil qui est le plus utilisé de la communauté.
https://uxtools.co/survey-2017/
Si on part sur du material design c’est l’outil le plus adapté.
3 L’outil de prototypage oriente le choix des autres outils
On associe facilement sketch avec invision DSM ou figma + zéro height & story book, l’important est d’avoir une chaîne d’outils compatible et un workflow bien rodé.
4 L’outil que je rêverais d’avoir
Oui les éditeurs de logiciels c’est à vous que je parle puisque c’est Noël :
A quand une plateforme de partage accessible pour un designer et pour un développeur qui rassemble les fonctionnalités d’un zéro height + story book ? 🙂
À demain pour de nouvelles surprises sur notre calendrier de l’Avent UX-Republic !
Leslie POCHAT, UX Designer @UX-Republic
[actionbox color=”default” title=”Formation DESIGN SPRINT -20%” description=”-20% de promotion sur la session de formation DESIGN SPRINT de Décembre en donnant le code 12-UX-DEC lors de votre inscription ! Il est encore temps…” btn_label=”Nos formations” btn_link=”http://training.ux-republic.com” btn_color=”primary” btn_size=”big” btn_icon=”star” btn_external=”1″]