Figma vs Adobe XD, Sketch : quel est le meilleur outil de design ?

Il y a quelques années, lorsqu’il fallait concevoir la maquette d’un site web, le choix des outils disponibles était assez limité et ils n’étaient pas du tout conçus pour l’exercice. On voyait des web designers travailler sur Photoshop ou Illustrator, et rien qu’écrire cette phrase me fait mal au cœur. Et pourtant… Je vois encore des « web designer » concevoir des interfaces sur Illustrator, Photoshop ou même Canva… Mais alors, quel est le meilleur outil de design ?

Mais concentrons-nous sur le monde merveilleux des outils de design, qui ont bien évolué aujourd’hui ! Au fil des années, les besoins des web designers ont changé, ceux des développeurs aussi (oui il ne faut pas oublier qu’il y a quelqu’un derrière qui intègre la maquette). Les méthodes de travail aussi ont changé, on est beaucoup plus sur du travail collaboratif, surtout depuis l’émergence des métiers d’UX et d’UI designer. Et désormais, les web designers ont un vrai choix à faire sur leur outil de conception.

Figma, Adobe XD et Sketch : comparaison des outils

Nous allons maintenant comparer les trois produits afin de savoir lequel est le meilleur outil de design. Toutefois je n’ai jamais personnellement utilisé Sketch. Donc je vais me baser sur les retours que j’en ai eu ou les articles que j’ai pu lire dessus.

A savoir également, Sketch n’est disponible que sur Mac. Si vous êtes sous Windows ou autre, oubliez cet outil !

Ça coûte combien ?

Selon moi, c’est un élément très important dans le choix de votre outil. Au-delà de savoir quel est le meilleur outil de design, il faut pouvoir aussi en assumer le coût.

Figma

Figma propose 3 types d’abonnements.

• Une licence « Starter », gratuite mais limitée
• Une licence « Professionelle », à 12€/mois par éditeur
• Une licence « Entreprise », à 45€/mois par éditeur

Alors, pour ma part, je trouve cette version gratuite largement utilisable dans le cas d’un freelance. Vous ne pouvez ajouter que 3 projets, mais à l’intérieur d’un projet, vous pouvez créer autant de fichiers que vous voulez. Pour ma part, j’ai créé un projet « Pro » et « Perso » et ensuite j’y ajoute tous les projets par client.

Figma est un outil collaboratif, et la version gratuite est limitée à 2 éditeurs. Alors dans mon cas, ça me va très bien, je suis seule éditrice et mes clients peuvent seulement avoir le statut de « viewer » (qui est illimité). Et je m’y retrouve car je ne souhaite pas que mon client puisse accéder au fichier source et l’éditer, je lui propose seulement une vue pour la recette ou pour suivre l’avancée du projet. Une fois le projet terminé, j’exporte le fichier Figma, je lui envoie et il peut faire tout ce qu’il veut de son côté.

Adobe XD

Adobe XD propose 3 types d’abonnements.

• Une formule « Démarrage », gratuite mais limitée
• Une formule « Adobe XD », à 11,99€/mois
• Une formule « Tout Creative Cloud », à 59,99€/mois

De mon côté, je n’utilise que la version gratuite d’Adobe XD. Ce n’est pas l’outil que j’utilise au quotidien, je l’utilise exceptionnellement quand mes clients travaillent dessus et qu’ils ont besoin de maquettes réalisées sous Adobe XD.

Sketch

Sketch propose 2 types d’abonnements.

• Une licence « One time », à 99$
• Une licence « Teams », à 9$/mois par éditeur
• Pour les acheteurs de la licence « One time », vous ne payez qu’une fois, mais, chaque année il faudra payer 79$ pour la mise à jour du logiciel (ce n’est pas obligatoire)

Je n’ai jamais utilisé Sketch. Je suis sous Windows donc impossible à installer (dispo uniquement sur Mac). Et ensuite, en terme de coût, je trouve Figma et Adobe XD beaucoup plus intéressants dans ma situation, celle d’une freelance qui a lancé son activité il y a peu. Mais évidemment, cela dépend de vos besoins !

Les interfaces de chaque outil

Si vous utilisez déjà l’un de ces outils et que vous souhaitez en changer, la bonne nouvelle, c’est que vous ne devriez pas être perdu. Les interfaces des trois logiciels sont très similaires. Elles sont présentées de la même manière, ensuite ce sont les fonctionnalités qui diffèrent.

Pas besoin de découper mon explication en fonction du logiciel, ils ont été conçus sur le même modèle :

• À gauche : vous verrez toutes vos pages, vos frames, vos plans de travail, vos calques.
• Au centre : votre espace de travail. C’est là que vous allez concevoir vos interfaces, c’est là que votre travail va prendre forme
• À droite : c’est là que se trouvent tous vos outils. Sur Figma et Adobe XD c’est aussi dans cette colonne que vous pourrez créer des prototypes, etc.
• En haut : vous avez également d’autres outils, le nom de votre fichier et d’autres fonctionnalités

La création de pages

Ici le mauvais élève c’est Adobe XD. Selon moi, c’est vraiment un point négatif. Dans Figma, et aussi dans Sketch visiblement, vous pouvez créer des pages au sein d’un même projet.
Par exemple, vous pouvez avoir plusieurs onglets sur un projet : « Site desktop », « Site mobile », « Design System », etc. Ainsi, selon la taille de votre projet, ça vous évite d’avoir tout sur une seule et unique page.

Personnellement, je m’en sers toujours à minima pour la maquette principale et le design system. Sur Adobe XD cette notion n’existe pas, et c’est quelque chose qui me dérange beaucoup.

Les fonctionnalités

Sur la partie des fonctionnalités, ça va être difficile de comparer chaque outil, ça serait très long de tout détailler.
Mais il faut savoir que les trois outils font régulièrement des mises à jour pour intégrer de nouvelles fonctionnalités afin d’optimiser la conception des interfaces.
Figma par exemple, est très actif sur la publication de nouvelles fonctionnalités. Et depuis l’apparition des Plugins, notre champ des possibles s’agrandit.

Les Plugins et la communauté

Les trois outils proposent chacun une liste importante de Plugins. Et même si Figma est le petit dernier arrivé sur le « Plugin-game », il est sans doute devenu le premier sur ce point.

Et Figma fait même mieux en développant une partie « Communauté » (encore en Beta mais accessible par tous), où vous pouvez retrouver des Plugins partagés par des éditeurs, mais également des fichiers. Avec par exemple des UI Kit, etc.

Le prototypage

Ces outils ont d’abord été conçus pour concevoir des interfaces. Aujourd’hui, il existe des produits dédiés au prototypage, comme InVision, mais cette fonctionnalité a été ajouté dans chacun de ces outils.

Adobe XD est sans doute le meilleur. Je reconnais avoir utilisé XD certaines fois uniquement parce que je savais que je voulais un prototype de qualité. Toutefois, Figma n’est pas en reste, surtout depuis l’arrivée de son « Smart Animate ». Et aujourd’hui, je n’ai plus vraiment besoin d’aller sur XD pour mes prototypes.
Concernant Sketch, il est bon dernier sur cette partie, pour le moment.

L’application « miroir » pour le mobile

J’ai l’habitude de créer des interfaces pour des applications et pour des sites mobile. Oui, car généralement, même quand on fait un site internet, il faut aussi penser à sa version mobile.

Figma et Adobe XD ont leur application « miroir » pour iOS et Android. Autrement dit, vous pouvez projeter votre maquette mobile sur votre smartphone. Ça permet d’avoir un rendu plus « réel », plus concret. On ne se rend pas toujours compte, par exemple, de la lisibilité d’une typographie parce que sur notre écran d’ordinateur tout est zoomé et a l’air hyper gros.

Sketch a également son application (assez mal référencée d’ailleurs sur l’App Store), mais elle n’est disponible que sur iOS. Donc si vous avez un Mac mais un téléphone Android, oubliez cette fonctionnalité.

Le travail collaboratif

C’est l’une des raisons pour lesquelles j’ai choisi de travailler avec Figma (enfin, pas vraiment moi, mais l’équipe avec qui je travaillais dans mon entreprise en CDI). Je ne crois pas qu’à cette époque, donc il y a 4 ou 5 ans, Adobe proposait cette fonctionnalité.

Figma est un outil qui se veut collaboratif et il le fait très bien. On peut travailler à plusieurs dessus, on peut voir ce que fait l’autre, mettre des commentaires, répondre à ces commentaires. Personnellement, je m’en sers quand mes clients doivent recetter une de mes maquettes.
Grâce à ça, je peux voir précisément leur retour sur un écran, je peux corriger et « valider » leur commentaire pour qu’ils soient notifiés du correctif.

Adobe XD propose de la collaboration, mais je ne l’ai pas testé depuis. En tout cas, la fonctionnalité est présente. Là où je crois que sur Sketch ce n’est pas le cas et ça, c’est un vrai point négatif pour moi.

La disponibilité des produits

Sketch

Je l’ai déjà dit, mais il faut savoir que Sketch n’est disponible que pour les utilisateurs de Mac. Il s’agit d’une application donc on ne peut pas passer par le web. Je trouve ça très dommage de se limiter aux utilisateurs de Mac (c’est d’ailleurs pour ça que j’ai quitté Apple).

Non, tous les graphic designer ou web designer n’ont pas tous des Macbook ou des iMac. Et pour moi, Sketch s’est tiré une balle dans le pied car Figma et Adobe XD prennent beaucoup de place sur le marché.
Si tu veux utiliser Sketch, tu dois être pro Apple, c’est aussi simple que ça.

Adobe XD

Concernant Adobe XD, il est accessible depuis Windows ou Mac. En revanche, il ne fonctionne qu’en téléchargeant l’application. C’est un peu dommage, car quand on veut partager une maquette avec un client qui n’a pas l’outil, il va être obligé d’installer l’application. Ça peut être gênant pour votre client. Mais au moins, il peut l’utiliser peut importe son OS.

Figma

Bon, encore une fois, je donne le point à Figma. Car il est disponible sur Windows et Mac. Mais surtout parce qu’on n’est pas obligé d’installer l’application pour l’utiliser. Figma fonctionne sur le web (et parfois même mieux que sur l’application). Je trouve ça bien justement pour éviter à mes clients de devoir installer le logiciel. Bon, en revanche, il me semble qu’ils sont quand même obligés de créer un compte.

Figma, Adobe XD, Sketch… Alors, quel est le meilleur outil de design ?

Selon moi, il n’y a pas vraiment de bonne réponse. Je ne sais pas si on peut dire qu’il y a un meilleur outil de design à l’heure actuelle. Ça va dépendre de vos besoins en fait. J’aurais tendance quand même à éliminer Sketch pour les nombreux points que j’ai cité : non gratuité, disponible que sur Mac (et l’application miroir que sur iOS), pas de collaboration, etc. L’outil Sketch commence un peu à être à la traîne mais ça reste malgré tout un bon outil.

Entre Figma et Adobe XD, mon choix est largement fait. Pour moi, Figma est le meilleur outil de design. Je suis sans doute peu objective, mais c’est l’expérience qui me fait parler.
Mais tout dépend de vos besoins, si vous voulez plutôt travailler sur la collaboration, Figma est sans doute plus adapté. Si vous préférez avec une partie de prototypage puissante, alors Adobe XD est peut-être un meilleur outil de design.

Mais ce qu’il faut retenir, c’est que ces outils évoluent très vite. Quand je vois l’ascension de Figma, qui a débarqué y’a peut-être 5 ou 6 ans…
Et peut-être qu’Adobe XD sera meilleur plus tard. L’avantage d’Adobe, c’est qu’il fait partie de la Suite Adobe et que vous pouvez connecter plusieurs outils entre eux.

Quoiqu’il en soit, il faut surveiller ces produits, surveiller les nouvelles fonctionnalités.
Et si vous hésitez toujours, installez Adobe XD et Figma et testez-les. C’est gratuit, vous n’avez rien à y perdre à part un peu de temps. Ça vous permettra de savoir lequel est fait pour vous, lequel est le meilleur outil de design.