FIGMA vs SKETCH | MultipleMedia | Design | Montréal
Lisez sur nos vingt ans !

Figma vs Sketch

Le design d’interface a beaucoup évolué ces dernières années. Pendant longtemps, Photoshop était l’outil de référence pour les UI Designers mais il devenu peu pratique dans le workflow d’une équipe de production. Sketch est alors apparu avec de nouveaux atouts : peu coûteux, très fluide, permettant de prototyper et maquetter dans le même outil. Les concurrents de Sketchs ont alors afflué : de Flinto à Invision Studio, c’est surtout Figma qui a fait une entrée remarquée. Quels sont leurs points forts ? Que choisir entre les deux ?

Figma

Figma et Sketch : un outil commun pour le UX / UI

L’intérêt majeur de ces nouveaux outils  reste la possibilité de les utiliser dans le workflow UX/UI . UX designers et UI designers partagent un outil commun qui permet à chacun de continuer à travailler sur ses problématiques propres. L’UX travaille la conception. L’UI part de cette version pour créer un nouveau design. Le temps économisé et la cohérence graphique gagnée est substantielle.

Ces deux outils offrent la possibilité de prototyper toutes les interactions d’une interface.

Cela permet de montrer facilement le parcours d’un utilisateur de la façon la plus réaliste possible avant que le site soit développé. Un autre atout important est l’incorporation de plugins. L’un des plus connus est Zeplin. Le designer peut envoyer ses maquettes sur Zeplin, qui va donner toutes les spécifications CSS et HTML aux développeurs. Il existe aussi des plugins pour transposer facilement ses mockup en responsive (auto-layout) ou encore pour insérer directement du contenu aléatoire dans ses maquettes (Craft, Unsplash).

Les deux sont des outils peu coûteux ( de l’ordre de 99$ pour l’année pour Sketch et de 12$/mois pour Figma pour l’offre professionnelle). L’avantage est qu’ils sont régulièrement mis à jour offrant constamment de nouvelles fonctionnalités.

Figma contre Sketch, que le match commence

  • Rapidité et Performance : FIGMA

Sketch est plus rapide au démarrage mais apparaît plus lent une fois le fichier lancé. Il prend plus de mémoire vive sur votre ordinateur à cause de l’auto-Save régulier.

Ainsi, le Zoom/Dézoom, les tracés vectoriels et le lancement du prototype s’effectuent un peu plus rapidement sur Figma.

 

  • Le coût : FIGMA

Figma possède une offre gratuite alors qu’une licence à l’année est obligatoire sur Sketch (à 99$).

L’offre gratuite possède néanmoins l’inconvénient de ne pas pouvoir travailler en équipe sur le même fichier (ce qui est, nous le verrons après, le gros atout de Figma).

 

  • Les Plugins : SKETCH

Figma ne supporte pas les plugins incorporés directement comme sketch, il reste cependant la possibilité d’exporter ses maquettes sur Zeplin.

Sketch est clairement le leader dans ce domaine, de nombreux plugins très utiles peuvent être intégrés directement dans son interface. Ils permettent vraiment de gagner en efficacité.

 

  • Symboles vs composants : SKETCH

Ils sont appelés Symboles sur Sketch et Composants sur Figma. Il s’agit d’éléments graphiques puissants qui vont pouvoir être réutilisés sur plusieurs maquettes de façon dynamique. Alors Symboles ou Composants ? L’égalité n’est pas loin mais les symboles dans Sketch offrent plus de possibilité. Notamment au niveau des overrides, l’utilisation de plugins dédiés à l’organisation des symboles est aussi un gros plus pour Sketch (Symbol Organizer). En somme, Sketch est plus solide pour monter un Design System.

 

  • Collaboration : FIGMA

Figma offre une collaboration en temps réel sur les projets alors que Sketch travaille encore sur cette fonctionnalité. C’est un grand atout différenciant pour Figma,  très pratique lorsque plusieurs designers travaillent sur le même projet ; il n’y a aucune perte de temps et aucun risque de se tromper de fichier.

 

  • Outils vectoriels : ÉGALITÉ

Figma comme Sketch offre des manipulations vectorielles de qualité. Il est plus facile d’affiner les angles sur Sketch, l’affichage étant plus pratique mais Figma offre les mêmes possibilités.

Figma

  • Accessibilité : FIGMA

Figma est accessible sur Windows comme sur Mac en app et possède une version web alors que Sketch est une application utilisable uniquement sur Mac. Ce point revient donc incontestablement à Figma. C’est notamment pratique quand un développeur (souvent sur Windows) veut accéder au fichier source. Ou lors d’une présentation client quand le designer veut faire une modification en direct.

Autre point intéressant, il est possible d’importer des fichiers Figma sur Sketch alors que l’inverse n’est pas possible. Sketch cible clairement les designers et veut garder un système plus fermé.

 

  • Fichiers supportés : SKETCH

Sketch supporte davantage de formats que Figma à l’exportation, notamment les PDF bien qu’ils ne soient pas optimisés au niveau du poids.

Sketch:

  • PNG
  • JPG
  • TIFF
  • WebP
  • PDF
  • EPS
  • SVG

Figma:

  • PNG
  • JPG
  • SVG

 

  • "Responsiveness" : ÉGALITÉ

Les deux offrent des possibilités similaires en terme de responsive.  Figma offre nativement des fonctionnalités plus puissantes que Sketch mais l’incorporation du plugin auto-layout dans Sketch permet de pallier à ce problème.

Figma

  • Prototypage : SKETCH

Ce ne sont pas les meilleurs outils pour prototyper (Invision Studio et Adobe XD ont plus de fonctionnalités dans ce domaine). Les deux possèdent les fonctionnalités de base : liens entre les artboards, transitions basiques. Cependant Sketch se différencie grâce à l’intégration de plugins de prototypage (Marvel, Invision).

 

  • Partage et commentaires : FIGMA

Enfin, c’est Figma qui remporte ce dernier point. Il est très facile de partager un projet et de donner des droits pour chaque utilisateur (avoir le droit d’éditer/droit de lecture). Pour Sketch, il est uniquement possible de partager en lecture seule via Sketch Cloud. Concernant les commentaires, Figma remporte aussi la manche puisqu’il permet de mettre des commentaires à un endroit précis du mockup, Sketch affichant simplement les commentaires à la suite dans une sidebar.

 

En conclusion

Il est difficile de faire un choix catégorique ici puisque les deux outils offrent deux environnements intéressants. J’apprécie beaucoup Sketch pour des plugins comme Craft / Zeplin / Auto-Layout  qui permettent de gagner un temps considérable sur les projets. D’un autre côté, il m’arrive souvent de travailler avec Figma depuis quelques mois pour son coté accessible, je peux ouvrir mes maquettes de n’importe quel endroit, que ce soit chez moi ou autre. Le partage de mes fichiers avec mes collègues est également plus simple. Sentimentalement, je voterais Sketch qui a révolutionné le design d’interface mais Figma n’est pas loin !

Top 5 des meilleures applications sportives

Recherche

8 août 2019

L’été bat son plein à Montréal, et c’est dejà l’occasion de prendre des bonnes résolutions qui feront du bien à notre corps!  Entre course à pied, natation, …

Par : Jean-Philippe Talamon, Designer UX/UI

WebP, le format d’image que vous ne connaissez pas?

Recherche

30 avril 2019

Quel format d’image faut-il utiliser sur vos sites web en 2019 ? Lorsque vous entendez les termes « jpeg », « png », « gif », « svg », etc, vous savez que l’on...

UX Design, Top 5 des meilleures applications.

Recherche

26 mars 2019

Voici notre TOP 5 des meilleures expériences utilisateurs (UX Design) sur application mobile.   City Mapper : la mobilité urbaine! Les trajets les plus récents sont...

Par : Jean-Philippe Talamon, Designer UX/UI et
Jean-Philippe Georges, Responsable Marketing et Communication