Figma vs Sketch vs Axure - Un examen basé sur les tâches

Dans une infographie récente de Toptal : "Les meilleurs outils UX", nous avons examiné le large éventail d'outils de conception numérique sur le marché, dont la plupart sont capables d'aider dans les tâches quotidiennes du concepteur UX individuel.

Trois des outils présentés, Sketch, Figma et Axure, ont généré des adeptes fidèles car ils excellent dans des tâches spécifiques au sein du flux de travail de conception UX.

Cependant, les performances de ces outils varient en fonction de la tâche de conception à accomplir . Au lieu d'énumérer toutes leurs fonctionnalités dans un tableau de comparaison, nous déterminerons leur efficacité avec un examen basé sur les tâches.

Voici un aperçu rapide des concurrents :

• Croquis de Bohemian Coding basé à Hague, NL. Sketch est une application Mac uniquement.
• Figma par Figma basée à San Francisco, Californie. Figma fonctionne sur n'importe quel système d'exploitation via un navigateur.
• Axure par Axure Software Solutions basé à San Diego, Californie. Axure a une version Windows et Mac.

Nous attribuerons une note à chaque outil en fonction de son efficacité dans les tâches de conception quotidiennes, sans plug-ins, modules complémentaires ou applications tierces. Les tâches comprennent :

1. Faire de l'idéation conceptuelle
2. Création de livrables basse fidélité
3. Création de livrables haute fidélité
4. Création de prototypes interactifs
5. Création d'un système de conception
6. Livraison au développement

Remarque : Lorsque les outils ont des fonctionnalités presque identiques nécessaires pour accomplir une tâche, la victoire ira à l'outil qui est plus facile à utiliser et offre une livraison plus rapide. Si cette détermination semble trop proche pour être appelée, le support tiers est le facteur décisif.

Tâche : faire de l'idéation conceptuelle

L'idéation est un processus créatif pour générer de nouvelles idées, et elle est généralement effectuée par des groupes interdisciplinaires composés de concepteurs, de développeurs, de propriétaires de produits et de chefs de projet.

L'objectif est de créer de nouvelles idées à utiliser dans un produit après avoir pris en compte les exigences de base et tout travail déjà en cours de construction. Par exemple, une équipe peut participer à une session d'idéation de concept pour créer un ensemble de fonctionnalités MVP pour une nouvelle application ou des fonctionnalités de nouvelle génération dans une application existante.

De nombreux designers font des idées de concept sur un tableau blanc ou sur du papier. Cependant, l'idéation se fait également de manière numérique, en particulier dans les bureaux distribués. La génération de concepts est un sport d'équipe et inclut des non-concepteurs tels que les propriétaires/gestionnaires de produits et les développeurs front-end. Les outils qui favorisent la collaboration et sont faciles à utiliser sont les meilleurs pour cette tâche.

Vainqueur : Figma

Sketch et Axure proposent tous deux des services de partage dans le cloud, mais il n'existe aucun moyen de partager des écrans en temps réel avec des collaborateurs.

Les fichiers partagés dans Figma peuvent être joints en temps réel et le curseur étiqueté de chaque participant est affiché. Un clic sur les avatars représentatifs dans la barre d'outils bascule les vues vers la perspective de cette personne, ce qui facilite le partage rapide d'une idée. De plus, Figma n'exige pas que les non-concepteurs en possèdent une copie ; ils ouvrent le lien du fichier et commencent à travailler.

D'autres outils de collaboration de tableau blanc peuvent être mieux adaptés à l'idéation de concepts que Figma, tels que Mural et Realtimeboard, mais pour un outil de conception, Figma est meilleur que Sketch et Axure d'un mile.

Tâche : Créer des livrables de faible fidélité

Les livrables basse fidélité sont généralement produits sous forme de wireframes ou de croquis numériques qui peuvent être distribués et révisés par d'autres concepteurs et propriétaires de produits. Selon le processus UX, ils peuvent également être consultés par les développeurs et autres parties prenantes.

Les wireframes sont destinés à montrer la structure de base d'une application afin que le modèle d'interaction puisse être défini avant de passer du temps à créer des maquettes haute fidélité.

La création de wireframes basse fidélité peut être effectuée par des outils spécifiquement dédiés à la tâche, notamment Balsamiq Mockups, Moqups et FluidUI. Cependant, Sketch, Axure et Figma peuvent tous effectuer la même tâche, en particulier lorsque les utilisateurs créent des bibliothèques de composants filaires.

Étant donné que les wireframes servent généralement de mise en page initiale de l'interface utilisateur pour une application ou une page, ce sont des coupes grossières monochromes qui changent souvent. Cela permet de contrôler les attentes des parties prenantes.

Pour les wireframes, la facilité d'utilisation, la rapidité de livraison et la modification sont essentielles car elles permettent aux concepteurs de produire efficacement des variantes de conception.

Vainqueur : Axure

Axure remporte la victoire ici car il contient des composants pré-emballés pour le wireframing immédiatement après l'installation du logiciel. Sketch et Figma ont les outils qui vous permettent de créer des structures filaires, mais vous devez soit dessiner un composant filaire, soit télécharger un fichier qui les contient. Dans les deux cas, ils doivent être intégrés dans une bibliothèque de symboles (Sketch) ou de composants (Figma) pour être glissés-déposés comme les composants Axure.

Axure dispose de nombreuses bibliothèques tierces pour créer des livrables basse fidélité, et Sketch dispose d'une multitude de fichiers gratuits et payants qui peuvent être téléchargés, alors que les ressources publiques de Figma sont encore naissantes.

Une fois qu'un concepteur a créé des bibliothèques de composants filaires, les trois outils sont identiques. Notez que les composants d'Axure possèdent des propriétés paramétriques et ajustables, mais pour les wireframes statiques, les trois outils fonctionnent bien lorsque les bibliothèques sont disponibles.

Tâche : Créer des livrables haute fidélité

Les livrables haute-fidélité naissent des retours et des enseignements recueillis à partir de wireframes basse-fidélité. Ce sont des maquettes qui montrent la couleur, les détails visuels et les conceptions finales proposées pour une application.

La haute fidélité signifie également des maquettes d'écran prêtes à être présentées et présentées aux clients, aux cadres internes et à d'autres parties prenantes non concepteurs. Les outils de conception qui excellent dans cette tâche disposent de toutes les fonctionnalités nécessaires pour ajouter le polissage nécessaire à la création d'une représentation des livrables finaux destinés au client.

Cela inclut le contrôle des remplissages et des contours des objets, l'ajout d'effets tels que les ombres et les remplissages dégradés et l'exportation de l'art dans un format facile à digérer (png, pdf, jpg).

Vainqueur : Figma

Sketch et Figma ont des ensembles d'outils presque identiques qui peuvent créer des maquettes haute fidélité, mais le modèle d'interaction de Figma est plus raffiné et l'outil est plus facile à utiliser dès le départ. Les deux outils ont un accès facile à l'édition avancée et aux commandes booléennes telles que Joindre, Intersecter, Union et Soustraire. Bien que la prise en charge des plug-ins de Sketch permette à des tiers de créer des fonctionnalités supplémentaires, ces outils ne sont pas disponibles immédiatement après l'installation.

Les trois outils ont des fonctionnalités qui permettent la création d'objets personnalisés, mais Axure rend un peu difficile l'accès aux commandes. Les modifications mentionnées ci-dessus ne sont pas disponibles dans la barre d'outils. L'accès est uniquement obtenu via le menu contextuel lorsque plusieurs objets sont sélectionnés.

De plus, les réseaux vectoriels de Figma facilitent le travail avec les outils de ligne.

Tâche : Créer des prototypes interactifs

Les prototypes interactifs peuvent être aussi rudimentaires qu'un prototype papier ou aussi détaillés qu'une version ramifiée d'une application existante qui a été modifiée pour explorer de nouvelles fonctionnalités. En règle générale, les prototypes interactifs permettent aux utilisateurs de naviguer d'un écran à l'autre et d'utiliser des fonctionnalités telles que des menus et des listes.

Pour de nombreux designers, un diaporama interactif de base suffira lors de la présentation de leur travail. Cela est particulièrement vrai pour les applications mobiles, car des transitions simples fournissent suffisamment d'interaction avec l'appareil pour expliquer la conception.

Le modèle de prototypage de Figma est bien intégré et simple à utiliser, et comme il s'agit d'une application cloud en temps réel, il n'est pas nécessaire d'actualiser les pages HTML lorsqu'un fichier est mis à jour.

Parfois, les parties prenantes veulent des connexions de données en direct pour charger un prototype avec des données du monde réel afin de tester l'évolutivité d'une conception, mais la grande majorité des concepteurs n'ont désormais plus besoin de prototypes complexes.

Vainqueur : Figma

Sketch et Figma prennent tous deux en charge le prototypage simple avec une liaison « objet vers plan de travail » et un ensemble limité de transitions. Les plugins aident à renforcer les capacités de prototypage simples de Sketch, mais Axure est le plus puissant lorsqu'il s'agit de fournir un modèle d'interaction robuste pour les prototypes.

Tâche : Créer un système de conception

Les systèmes de conception, bien que relativement nouveaux dans le domaine de la conception UX, existent depuis des décennies. Ils incluent un langage de conception partagé, des composants, des ressources et des directives qui permettent aux équipes de collaborer et de prendre de meilleures décisions. Une bibliothèque de système de conception est généralement implémentée en tant que site Web et agit comme la source unique de vérité pour un produit dans toute une entreprise.

Vainqueur : Figma

Bien que des bibliothèques de composants puissent être construites dans n'importe lequel des programmes, aucun d'entre eux ne permet aux concepteurs d'actionner un interrupteur et de produire une bibliothèque de composants viable dès le départ. Axure peut générer une page HTML avec des composants personnalisés, mais il n'y a aucun moyen d'interroger le composant unique pour connaître la valeur de couleur, la taille et d'autres propriétés.

La création d'un système de conception à l'aide de l'un de ces outils reste un processus manuel. Cependant, il existe des plugins pour Sketch (tels que le plugin Material Design récemment publié par Google) et au moins un outil tiers en préparation pour Figma.

Figma remporte la victoire car la collaboration est au cœur d'un bon système de conception. Les employés de l'entreprise de plusieurs disciplines (conception, développement, qualité, contenu) doivent accéder à une bibliothèque de système de conception, et beaucoup ajouteront au fichier de composants de conception qui se synchronise avec la bibliothèque partagée. Figma peut être utilisé par n'importe qui, pas seulement par un titulaire de licence, ce qui facilite l'accès et l'ajout à un fichier partagé.

Tâche : Livraison au développement

Lorsque les concepteurs d'interface utilisateur ont fini de créer une interface, il leur incombe de transmettre les fichiers de conception aux développeurs afin que le projet puisse être terminé. Mais un transfert est plus qu'un simple échange de données, c'est une opportunité pour les concepteurs de communiquer la raison d'être de leur travail et d'aider ainsi les développeurs à marier la forme à la fonction.

Il existe des dizaines de méthodes de transfert et encore plus d'outils tiers pour faciliter les requêtes de redlining et d'informations sur les objets à partir de fichiers Sketch et Figma (voir Avocode et Zeplin). Cependant, dans cette comparaison, nous examinons l'outil de conception d'origine avant qu'il ne soit complété par des plugins ou d'autres applications.

Fait intéressant, l'essor des systèmes de conception UX atténue le besoin de cette forme de transfert, car les bibliothèques de composants publiées sont la seule source de vérité pour le développeur. Ils peuvent extraire les informations exactes de disposition et de conception des composants sans attendre un livrable ou une consultation UX.

De plus, obtenir des informations à partir d'objets dans un fichier de conception peut être utile lors de la construction d'un système de conception, donc une vue du CSS est une bonne chose.

Sketch vous permet de sélectionner des objets et d'utiliser un menu contextuel pour "Copier les attributs CSS", mais ce n'est pas idéal. Figma fait un travail équitable en fournissant un onglet "Code" dans le panneau des propriétés qui produit des valeurs CSS, iOS ou Android pour les objets sélectionnés (les développeurs peuvent utiliser cette fonctionnalité en mode affichage uniquement ou prototype).

Vainqueur : Axure

À l'heure actuelle, seul Axure dispose de puissants «générateurs» qui produisent des fichiers HTML entièrement publiables, des spécifications Word et même des rapports au format CSV à importer dans une feuille de calcul. Bien que les résultats ne soient pas une bibliothèque de conception, l'application fournit du matériel de transfert de développeur utile.

Le gagnant général de l'outil de conception : Figma

En chiffres, Figma est le gagnant de cette comparaison, principalement en raison de sa nature collaborative et de sa disponibilité multiplateforme. Alors que de plus en plus d'équipes utilisent des systèmes de conception qui exigent une intégration plus étroite dans le développement et la conception front-end, la collaboration en temps réel et la fonction d'intégration en direct de Figma lui confèrent un grand avantage. En revanche, Figma est une application en ligne dont l'utilisation peut être interdite dans une entreprise pour des raisons de sécurité.

Axure occupe la deuxième place en raison de sa force prête à l'emploi avec des composants prédéfinis, de puissantes fonctionnalités de prototypage interactif et de génération de documents. Dans le cas plus rare où une entreprise a besoin d'accéder à des magasins de données du monde réel pour voir comment une fonctionnalité particulière se comporte, Axure est la meilleure ou la seule option.

Sketch est peut-être arrivé en dernier, mais une fois que les utilisateurs profitent des nombreux plugins et ressources disponibles pour l'outil, il est extrêmement puissant et peut être adapté pour répondre aux besoins d'un groupe de conception. La mise en garde ici est que les plugins doivent être mis à jour après chaque mise à jour de Sketch, et en tant qu'application Mac uniquement, les entreprises utilisant des PC Windows ne peuvent pas l'utiliser.

Les trois outils examinés dans cet article sont puissants en eux-mêmes. Cependant, chacun a ses limites. Il appartient aux concepteurs individuels et aux équipes d'identifier leurs besoins en matière de flux de travail, de peser le pour et le contre de chaque programme et de faire un choix approprié.

Pour en savoir plus sur le blog Toptal Design :

• Abandonnez les MVP, adoptez des prototypes minimum viables (MVPr)
• La puissance de Figma comme outil de conception
• Comment créer un guide de style d'esquisse, une bibliothèque et un kit d'interface utilisateur
• Comprendre les systèmes de conception et les modèles
• Mort au Wireframe. Directement en Haute-Fidélité !