InVision, Zeplin, Measure : quelles solutions pour partager vos designs Sketch dans un process Agile ?

Pierre Ducouret
BeTomorrow
Published in
6 min readOct 9, 2018

--

Là où une méthode de travail en cascade donne au designer un interlocuteur défini en entrée et un autre en sortie, en agilité les échanges viennent de partout : client, PO (Product Owner), testeurs, développeurs, etc. Le designer doit jongler avec les besoins de chaque profil, et adapter la mise à disposition des designs. Pour ne pas perdre de temps dans les spécifications de chacun, il faut donc que les outils utilisés soient efficaces pour tous.

Au cours de nos projets, nous avons pu essayer plusieurs solutions en complément de Sketch, le logiciel de prédilection de nos designers à BeTomorrow. Voici un résumé de nos impressions.

Utiliser seulement Sketch

Une première option est de n’utiliser que Sketch. Il faut alors que chaque utilisateur dispose d’une licence, et… sache se servir un minimum du logiciel. Les développeurs y trouvent leur bonheur, ainsi que les PO à l’aise avec Sketch qui y voient un endroit où aller chercher les écrans à présenter. Cependant, l’utilisation peut se révéler frustrante pour le designer :

  • il faut faire les exports des écrans à chaque mise à jour pour les PO et clients ;
  • mais également gérer les ouvertures simultanées et les conflits qui en découleraient (partager une copie des fichiers).

Cela peut se révéler particulièrement pénible lorsque les retouches sont mineures et régulières sur plusieurs fichiers.

L’interface de Sketch — image tirée de https://www.sketchapp.com/docs/prototyping/

Au-delà du côté pratique, l’aspect financier n’est pas négligeable. En effet, tous vos utilisateurs (devs, PO, client, etc.) ont besoin d’une licence. La politique de Sketch à ce propos implique de les renouveler tous les 2 ans si vous souhaitez bénéficier des dernières fonctionnalités et assurer la compatibilité entre vos différents postes, ce qui peut vite devenir pesant pour une PME.

Bilan

Cette option peut être adaptée aux petites équipes, mais se révèle à la longue inadaptée pour le designer gérant plusieurs projets et plusieurs fichiers avec une équipe nombreuse.

Sketch + Measure

Measure est un plugin de Sketch, qui propose de créer et exporter les découpages nécessaires aux développeurs. On retrouve l’affichage des spécifications de design (position, taille, couleur, style CSS, règles, etc.) sans avoir à manipuler directement Sketch. Et, cerise sur le gâteau, Measure est gratuit.

Exemple d’export réalisé avec Measure — image tirée de http://utom.design/news/

Il y a donc 2 avantages à utiliser cette solution par rapport à notre précédente option :

  • une seule licence Sketch à acheter ;
  • pas besoin de former les développeurs, PO, et clients à l’utilisation de Sketch.

Mais qu’en est-il de la fluidité des échanges ? Hé bien, c’est là que le bât blesse : les exports de Measure sont des zip, accompagnés d’un fichier html. Il faut donc ici aussi mettre les fichiers à disposition sur un espace partagé et les mettre à jour au gré des évolutions régulières des designs.

Bilan

Difficile de recommander cette solution dans un procédé Agile. L’utilisation de fichiers zip apparaît comme un archaïsme face aux mises à jour continues.

Sketch + InVision

InVision, c’est aujourd’hui un peu la Rolls Royce des outils de design. Ça fait même le café ! On y trouve un nombre impressionnant de fonctionnalités :

  • un environnement cloud pour faciliter le partage des designs et des assets
  • un espace d’inspection pour les développeurs, avec génération de code LESS, SASS, etc.
  • le versioning des designs pour naviguer dans l’historique de votre projet (pratique pour les clients qui changent d’avis régulièrement !)
  • des espaces dédiés aux boards d’inspiration et aux whiteboards
  • des annotations sur les design pour des échanges rapides et centralisés
  • des prototypes interactifs animés, parfait pour les PO
  • et même l’intégration à Slack pour y recevoir des notifications !
Vue d’un projet InVision — image tirée de https://www.invisionapp.com

Alors, sans reproche InVision ? Pas vraiment. Chaque profil (PO, dev, client, etc.) a ses spécificités et ses besoins propres. À force d’empiler les fonctionnalités, l’interface ne se montre plus très intuitive : il est par exemple difficile pour un PO de ne pas être perturbé par les options proposées aux devs. Résultat, pour les PO et surtout pour les clients, le temps d’apprentissage peut s’avérer rebutant. De plus, le produit étant basé sur une interface web, le chargement des pages est parfois long, ce qui peut provoquer quelques crises aux moments clés.

Toutefois, choisir InVision c’est choisir une solution pérenne : en vrai mastodonte du secteur, il est évident que si de nouvelles fonctionnalités à succès apparaissent dans des services concurrents, InVision possède la force de frappe nécessaire pour les implémenter dans son propre produit. C’est d’ailleurs le sens de leur démarche avec le lancement de InVision Studio : remplacer Sketch pour créer un service 100% autonome.

D’un point de vue financier on notera que les abonnements sont à prendre par designer : 1 contributeur peut partager un projet InVision avec autant de personnes que souhaité. Très pratique pour les petites structures où il y a peu de designers.

Bilan

Que reprocher au duo Sketch + InVision ? Pas grand chose. InVision ne propose pas l’interface la plus rapide et la plus intuitive du marché, mais possède l’indéniable force d’être une solution complète. Le seul vrai frein est finalement peut-être le prix, en fonction du budget alloué aux échanges autour du design dans votre entreprise.

Sketch + Zeplin

Zeplin est comme un petit InVision, dans le sens où il propose une partie de ses fonctionnalités, en se concentrant sur les fonctionnalités dédiées aux designers et aux développeurs. On y retrouve l’environnement cloud, les inspections de style avec la génération de code, le versioning, les annotations sur les designs, et l’intégration Slack.

L’app desktop de Zeplin — image tirée de https://zeplin.io/why-zeplin

À BeTomorrow, plusieurs développeurs militent pour cette solution. La simplicité de Zeplin est clairement son point fort. C’est beau, c’est fluide. Pour assurer des performances dignes d’un cadre professionnel, Zeplin propose des apps desktop pour Mac ou Windows permettant de fonctionner hors-connexion.

Le point faible de ce logiciel, c’est finalement la comparaison avec InVision : pour un unique designer, là où Zeplin vous limite à 12 projets actifs à 26$/mois, InVision vous propose un nombre de projets illimité en y rajoutant la possibilité d’animer vos designs et de partager vos boards d’inspiration ou tableaux blancs.

Bilan

Zeplin se concentre sur la relation entre les designers et les développeurs, et c’est à notre sens le meilleur logiciel pour cela. Mais peut-il faire le poids face à InVision ? Ce sera essentiellement à votre PO de voir s’il veut utiliser les fonctionnalités supplémentaires proposées par celui-ci.

Conclusion

Bilan de nos préférences et nos coups de coeur par profil, dans un contexte de projet Agile

Après avoir utilisé ces différentes combinaisons sur nos projets, nous recommandons d’utiliser InVision. C’est en effet le plus complet et le plus à même d’accompagner des équipes et des projets de toute taille.

Zeplin en est un bon challenger. Choisir Zeplin, c’est privilégier la fluidité et la clarté, avec des capacités hors-ligne qui peuvent être déterminantes en fonction de votre contexte.

Vous avez aimé cet article ? Cliquez sur 👏 en bas de page pour que d’autres lecteurs puissent le trouver !

N’hésitez pas à nous poser des questions ou à partager en commentaire vos outils, vos setups, ou vos expériences de mise à disposition continue de design à vos devs, PO, et clients !

Cet article a été écrit à deux mains avec l’appui précieux de Noémie M. Rivière.

BeTomorrow est une agence de conseil, design et développement. Pour aller plus loin, nous vous invitons à lire nos derniers articles ou nous contacter directement.

--

--

Pierre Ducouret
BeTomorrow

Chef de projet enthousiaste chez BeTomorrow !