UX CALENDAR – 08 DÉCEMBRE – Comparatif des outils pour un design system en 2020

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 

 

Grand jeu du mot caché !
Un mot caché s’est glissé dans le texte mais n’a rien à y faire. Pourtant ce mot est important pour nous. Si, le jour de la publication, vous le retrouvez et postez sur Twitter en premier cet article avec le hashtag #CalendrierUXRepublic et le mot caché, vous gagnez un jeux d’UX-Cards ou un Jeu de Zoning Cards. Attention on ne peut gagner qu’une seule fois … après il faut laisser la chance aux autres 😉 !

 

[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″]