Tous les designers doivent un jour ou l’autre choisir parmi les nombreux outils qui s’offrent à eux. Fut une période où l’outil de prédilection était sans conteste Photoshop. Mais son règne est depuis plusieurs années contesté par l’apparition d’excellents challengers en matière de design d’interfaces produit, comme Sketch et Figma (mais aussi Invision Studio, FramerX, Adobe Xd, et bien d’autres).
Dans cet article, nous allons donc nous prêter au jeu des comparaisons, et faire s’affronter Sketch et Figma pour définir lequel des deux est le meilleur outil de design d’interface produit. Ce concept de battle reviendra d’ailleurs de manière régulière sur notre blog (au moins une fois par mois) !
Mais commençons par faire les présentations. D’un côté du ring, on retrouve Sketch, créé en 2014 et qui fait aujourd’hui partie des outils de design les plus utilisés (même s’il est uniquement disponible sur Mac). Face à lui : Figma, créé peu de temps après, mais qui a mis plus de temps à se faire connaître, bien qu’il soit accessible à une plus large base d’utilisateurs (via son navigateur et une application).
Beaucoup de designers sont pourtant passés ces derniers temps de Sketch à Figma, argumentant notamment que ce dernier était bien plus collaboratif, et permettait de mieux travailler à distance (un point non négligeable, par exemple en période de confinement).
On va voir dans ce match que nous ne nous positionnons pas forcément sur la même ligne. Voici pourquoi.
Sketch vs Figma : les fonctionnalités de design de produit
Les deux outils de design de produit ont presque les mêmes fonctionnalités et la même structure. Si vous savez comment utiliser Sketch, vous n’aurez aucun mal à passer sur Figma, et inversement.
On peut cependant noter les différences suivantes :
- Figma fonctionne dans n’importe quel système d’exploitation (Windows, MacOS ..), car il est basé sur le Web ;
- Sketch est une application MacOS native, qui ne fonctionne donc que sur Mac ;
- Sketch est beaucoup plus rapide que Figma (le chargement de votre fichier vous prendra moins d’une seconde) ;
- Figma permet d’ouvrir les fichiers Sketch (l’inverse n’est pas vrai).
Comparaison des systèmes de design d’interfaces produit : symboles vs composants
De nombreux designers argumentent que Figma fait un bien meilleur travail que Sketch en matière de système de conception. Notamment pour ce qui est d’automatiser certains composants, comme vos styles de texte, ou calques d’esquisses.
Sketch nécessite d’enregistrer, par exemple, chaque style de texte, même lorsque vous ne modifiez qu’une propriété (comme l’alignement, la couleur, etc.) Sur Figma, ces derniers sont nettement plus automatisés, ce qui permet de définir un style principal et d’enregistrer les propriétés, comme les couleurs ou les ombres, séparément.
Idem pour les composants. Si vous ne pourrez pas supprimer des éléments à l’intérieur d’un composant sur Sketch, Figma offre un système bien moins restreint et facilite la modification de chaque couche, et même de leurs propriétés.
Quel outil de design est le plus collaboratif ?
Si vous travaillez en équipe, les fonctionnalités de collaboration entre designers seront très importantes dans le choix de votre outil de design d’interfaces produit.
Figma fait également un peu mieux que Sketch dans ce domaine, en adoptant une approche assez similaire à celle de Google Docs, ou Time Viewer. Plusieurs utilisateurs peuvent prendre part au même projet, et il sera nettement plus facile pour chacun d’entre eux de suivre ce que les autres font.
Ce n’est cependant pas forcément une bonne chose pour tous les designers. Beaucoup n’aiment pas avoir toujours une autre paire d’yeux qui surveille leur travail en permanence, ni même être plusieurs à travailler sur le même fichier.
Pour ceux-là, Sketch sera nettement plus adapté, notamment grâce à un plugin nommé Abstract. Ce dernier permet aux concepteurs d’utiliser un système de branchement (un peu comme Github pour les développeurs), puis de fusionner les branches et de résoudre les conflits, s’il y en a. Personnellement, nous préférons cette façon de travailler, mais certains designers la trouvent un peu trop compliquée.
La question des transferts est aussi importante. Sur Figma, les développeurs devront envoyer tous les liens du fichier de projet (ce qui implique un temps de chargement plus long).
Sketch fonctionne sur le cloud et facilite le partage des écrans** (même si vous aurez besoin de plusieurs plugin, dont Abstract, ou Zelpin) pour rendre le processus de spécifications plus fluide.
Et le prototypage dans tout ça ?
Un prototype conçu sur Figma est assez simple à partager, mettre à jour et vous permettra de réaliser des tests utilisateurs assez aisément. Sketch n’offre pas les mêmes facilités de partage (vous devrez obligatoirement travailler avec le Cloud), mais se rattrape sur les plugins d’animations.
Exportation et travail hors ligne
Sketch et Figma sont relativement similaires en terme d’exportation, et offrent tous les deux différents plugins d’intégration. Cependant, l’outil de design d’interfaces produit Figma offre de moins bonnes performances dans ce domaine, car il ne permet pas de copier un élément ou plan de travail pour le coller dans un autre outil (comme Slack ou Jira, par exemple), ce qui est le cas de Sketch.
Même constat pour le travail en ligne. Si les deux outils de design de produit offrent cette fonctionnalité, Figma ne charge pas les composants et fonctionne très lentement.
Quel outil de design offre-t-il les meilleurs plugins ?
Sketch prend largement le dessus sur Figma en matière de plugins (et plus largement de ressources et templates disponibles) pour une raison très simple : son ancienneté.
Bénéficiant d’une plus large communauté d’utilisateurs, l’outil dispose non seulement de plus de plugins, mais surtout de plugins qui permettent réellement d’augmenter les performances de son logiciel.
On peut cependant accorder à Figma le mérite d’examiner tous les plugins avant de les faire entrer dans sa boutique, ce qui permet de s’assurer qu’ils soient vraiment fiables et ne puissent pas compromettre votre fichier projet.
Notre Verdict : les trois raisons pour lesquelles nous préférons travailler avec Sketch
Comme vous avez pu le constater dans ce match des outils de design d‘interfaces produit, Sketch et Figma sont deux solutions ultra efficaces, et votre préférence se fera globalement en fonction des contraintes de votre projet.
Quoi qu’il en soit, sachez que vous pourrez facilement passer de l’un à l’autre (et tirer parti du meilleur de ces deux solutions), tant leurs interfaces et fonctionnalités sont proches.
Chez Agily, notre préférence va clairement vers Sketch pour trois raisons :
- c’est le meilleur outil pour créer un système de design poussé, et ainsi gagner du temps sur les prochaines conceptions ;
- les nombreux plugins offerts par Sketch et sa flexibilité facilitent grandement le design de produit et permettent d’optimiser son temps ;
- nous travaillons avec Overlay pour l’intégration (notamment parce que cet outil permet d’obtenir automatiquement le code de chaque élément). Or, Overlay supporte très bien Sketch, ce qui nous permet de gagner du temps sur l’intégration.
Et vous, quel est l’outil de design d’interfaces produit que vous préférez ?
