Sketch vs Figma, Adobe XD et d'autres applications de conception d'interface utilisateur

Depuis un certain temps, Sketch est l’application de choix pour de nombreux UX. et les concepteurs d'interface utilisateur. Cependant, nous avons récemment vu de nombreux nouveaux candidats à la position de leader de Sketch en tant qu’outil de conception d’interface utilisateur universelle. Figma et Adobe XD .

Deux applications qui, à mon avis, se distinguent le plus du reste (et qui ont réalisé les plus grands progrès dans leur développement) sont Figma et . concepteurs d'interface et développeurs. Je vais essayer de résumer mes idées sur la manière dont Figma et Adobe XD rivalisent avec Sketch et sur les fonctionnalités uniques qu’ils apportent à la table. Je ferai également référence à d'autres applications alternatives qui visent à devenir des leaders dans le même créneau.

Note : Pour bénéficier de l'article, vous n'avez pas besoin d'une expérience préalable de Sketch. , Figma ou Adobe XD. Néanmoins, si vous avez déjà utilisé au moins une de ces applications, cela vous sera certainement utile.

Table des matières

Les concurrents de Sketch (et les débuts pour nous)

Il y a quelque temps, Adobe Fireworks était l'application de conception d'interface utilisateur préférée pour l'ensemble de notre équipe. Fireworks était flexible, facile à utiliser et, avec l’aide de de nombreuses extensions gratuites s’inséraient parfaitement dans notre flux de travail de conception. Lorsque Adobe a arrêté Fireworks la seule alternative qui nous restait était Sketch. Nous avons effectué le changement (et c’était cher, étant donné que nous devions également passer de Windows à Mac), mais le gain de productivité était énorme, et nous n’avons jamais regretté le choix.

For Sketch a été l’application de choix non seulement pour notre équipe, mais pour de nombreux autres concepteurs d’interfaces utilisateur. Mais ces dernières années, un certain nombre de concurrents ont commencé à rivaliser sérieusement avec Sketch en tant qu'outil n ° 1 actuel. Compte tenu de la rapidité avec laquelle ces nouvelles applications concurrentes se sont améliorées, notre équipe a été tentée d'essayer certaines d'entre elles et a même envisagé de basculer. Dans cet article, j'espère vous donner une comparaison complète des principaux concurrents de Sketch dans le domaine des outils de conception d'interface utilisateur.

Même s'il semble qu'une semaine ne se passe pas sans le lancement d'une nouvelle application de conception d'écran, seulement quelques-uns d'entre eux ont suffisamment mûri pour résister à la position de leader de Sketch. Je pense que les deux plus proches sont Figma et Adobe XD . Les deux applications disposent de versions entièrement fonctionnelles et gratuites, ce qui réduit considérablement les barrières à l'entrée pour les nouveaux utilisateurs.

XD propose des versions pour Mac et Windows, tandis que Figma prend en charge Mac, Windows, Linux et Chrome OS – quasiment tout système d'exploitation sur lequel un les navigateurs modernes modernes peuvent être installés et exécutés.

Figma

Figma est une application web; vous pouvez l'exécuter dans un navigateur et donc sur à peu près n'importe quel système d'exploitation. C’est un aspect qui contraste totalement avec Sketch, une application réservée aux Mac. Contrairement à mes hypothèses, Figma fonctionne parfaitement bien et surpasse même la réactivité de Sketch dans de nombreux domaines. Voici un exemple:

Pourquoi j'ai choisi @figmadesign plutôt que Sketch. pic.twitter.com/sZRO97tlNO

– Housseynou Fall (@HousseynouFall) 19. Décembre 2017

On a beaucoup parlé de la façon dont Figma se compare à Sketch, mais la course n'a fait que s'aggraver avec les mises à jour récentes des deux applications.

Le succès de Figma a amené les développeurs de Sketch à reconsidérer leur système natal. seule approche. La société a récemment collecté 20 millions pour l'aider à ajouter davantage de fonctionnalités, notamment une version Web de l'application Sketch.

Adobe XD

Bien qu'une génération entière de concepteurs ait grandi en utilisant Adobe Photoshop pour la conception, elle n'a jamais été conçu pour les concepteurs d'interface utilisateur . Adobe en a pris conscience et a commencé à travailler sur une nouvelle application appelée XD. Bien que XD ait mis un certain temps à se familiariser avec Sketch en termes de fonctionnalités, Adobe semble l'avoir pris très au sérieux au cours de la dernière année. De nouvelles fonctionnalités – et certaines d’entre elles très puissantes – sont ajoutées à l’application presque tous les mois, à un point tel que je peux réellement la considérer comme une alternative viable à ce stade.

Autres

Figma et Adobe XD ne sont en aucun cas signifie que les seuls candidats à la direction de Sketch. Bien que cela puisse sembler être une nouvelle recrue rejoignant la course toutes les quelques semaines, certains sont clairement en avance à ce stade – mais pas dans la même ligue que les précédentes, à mon avis.

• Framer X
  Bien que Framer ait commencé En tant qu'outil basé sur un code pour la création de prototypes, ils ont régulièrement ajouté des fonctionnalités de conception. La dernière version est Framer X, qui peut être qualifiée d’outil de conception d’interface utilisateur avec la possibilité de coder les interactions et les animations pour un contrôle plus précis et une plus grande flexibilité.
• InVision Studio
  InVision a commencé comme le meilleur moyen de partager des maquettes de conception avec des collègues. et les clients. Au fil des ans, ils ont ajouté des fonctionnalités à l'application et ont également créé Studio en tant qu'application autonome pour la conception d'interface utilisateur, les prototypes et les animations. (Studio est probablement basé sur Macaw, acheté par InVision au début de 2016.)
• Gravit
  Il s'agit d'une autre application de conception d'interface utilisateur qui s'est lentement mais régulièrement améliorée. Corel a acheté Gravit il y a quelques mois, ce qui signifie que nous pourrons bientôt le voir acquérir de plus en plus de fonctionnalités et de traction au sein de la communauté.

«Une autre catégorie d'applications en plein essor dans ce domaine est celle qui combine concevoir et coder pour générer du code prêt à la production que les développeurs peuvent utiliser directement dans leurs applications. Framer X fait cela dans une certaine mesure, mais des applications comme Alva Modulz et Supernova poussent les choses un peu plus loin. Je ne vais pas approfondir ces questions ici car elles en sont toutes à leurs débuts, mais je tenais à les signaler, car c'est là que semble se diriger l'avenir des outils de conception d'interface utilisateur. »

– moi et mon équipe chez Kritii Design – finissons par nous adapter à l’ensemble des outils utilisés par les clients. J'ai assisté au passage progressif de Photoshop à Sketch au fil des ans, mais au cours des dernières années, nous avons assisté à un basculement soudain de Sketch à Figma. L’esquisse reste l’outil dominant dans la plupart des équipes, mais Figma – et même XD dans certains cas – ont commencé à gagner les faveurs des plus grandes équipes. Je ne suis pas encore tombé sur un groupe qui préfère l'une des autres options, mais je suppose que cette divergence n'est pas très éloignée.

Similarities And Differences

Je suis un utilisateur de Sketch depuis trois ans et me considère comme un utilisateur expérimenté. Cela fait environ un an que je teste Figma, mais beaucoup plus ces derniers mois. Adobe XD est relativement nouveau pour moi – il y a environ un mois que j'ai commencé à en faire l'expérience. En tant que tel, la comparaison ci-dessous est basée sur mon expérience avec les trois applications. Je vais également inclure des extraits d’applications sur d’autres applications qui semblent améliorer certaines choses, mais il s’agit principalement de ces trois applications.

Interfaces utilisateur

Je ne vais pas entrer dans les détails des interfaces utilisateur de chaque application, car ils partagent tous les trois. une interface presque identique: panneau de couches à gauche, la toile au milieu, panneau de propriétés à droite et barre d'outils en haut. Les interfaces de Figma et XD sont fortement inspirées par les débuts de Sketch.

Note: Le panneau de droite (qui vous permet de contrôler les propriétés des objets sur le canevas) est appelé Inspecteur dans l'application Sketch, propriétés dans Figma Design et inspecteur de propriété dans Adobe XD. Cependant, ils font tous la même chose.

L'essentiel: tableaux et pages

Lorsque vous créez un nouveau fichier dans Sketch ou Figma, vous êtes par défaut sur la page 1 avec un canevas uni qui vous regarde. Vous pouvez créer des planches sur la page ou ajouter d'autres pages. Vous pouvez choisir parmi un ensemble de paramètres prédéfinis (pour les téléphones iPhone / Android, ou pour le Web), ou simplement faire glisser la taille de votre choix.

Adobe XD ne prend pas encore en charge plusieurs pages. Juste une toile à laquelle vous pouvez ajouter des planches. Compte tenu de la taille de certains de mes projets, je trouve cela extrêmement limitatif.

Les planches à Figma sont appelées cadres et sont beaucoup plus puissantes que Sketch. Alors que Sketch a cessé de prendre en charge les planches d’art imbriquées il y a quelques versions, Figma encourage l’imbrication des cadres. Vous pouvez donc avoir un cadre pour l'écran, puis des cadres pour l'en-tête, le pied de page, les listes, etc. Chaque image peut avoir sa propre grille de mise en forme et peut être définie sur le contenu de la séquence lorsque redimensionné.

Lorsque vous créez un nouveau document dans Adobe XD, il vous est explicitement demandé de choisir parmi une liste prédéfinie de tailles de plan de travail. Vous pouvez choisir «Personnalisé», bien sûr. La sélection prédéfinie est définie de la manière dont XD vous permet de prévisualiser les dessins. Tout ce qui dépasse la hauteur prédéfinie défile par défaut. Lorsque vous augmentez la hauteur de la planche graphique, XD ajoute un marqueur pour afficher la hauteur d'origine du cadre du périphérique.

Sketch diffère des deux autres applications en ajoutant une page de ‘Symboles’ contenant tous vos symboles par défaut. Vous pouvez décider de ne pas envoyer de symboles sur cette page lorsque vous les créez, mais je n’ai jamais vu personne le faire. En fait, il est logique de centraliser tous les symboles afin de faciliter leur organisation.

Résumé

Sketch et les pages de support et les planches d'art de Figma, bien que les planches d'art (ou les cadres) de Figma soient plus flexibles, car ils peuvent imbriqué. Adobe XD ne prend en charge que les planches d’art.

Grids And Layout

Les trois applications vous permettent de superposer des grilles sur les planches d’art. Dans Adobe XD, vous pouvez utiliser une grille carrée ou une grille de colonnes. Sketch autorise les deux en même temps, ainsi que les colonnes et les lignes dans la grille de présentation.

Figma vous permet d'ajouter autant de fois que vous le souhaitez pour chaque type: grille, colonnes et lignes. Un autre exemple de l’attention portée aux détails de Figma: lorsque vous définissez la gouttière sur 0, elle passe automatiquement de l’affichage des colonnes remplies à l’affichage des lignes uniquement.

Figma utilise les grilles de présentation a aller plus loin en autorisant les grilles sur les cadres (qui peuvent être imbriqués) ainsi que les composants individuels. Une possibilité intéressante avec ce dernier est que vous pouvez les utiliser comme guides pour le remplissage lorsque vous travaillez avec des composants redimensionnables.

Les trois applications vous permettent également de définir des contraintes pour définir la façon dont les éléments seront redimensionnés ou déplacés lorsque leurs conteneurs sont redimensionnés. En outre, ils utilisent tous une interface utilisateur presque identique pour définir et gérer ces contraintes. Figma était le premier du lot avec ce concept d'interface utilisateur. Sketch l'a suivie et améliorée dans sa dernière version et Adobe XD a introduit la fonctionnalité en septembre 2018.

Dans Figma, les contraintes ne fonctionnent que sur des éléments situés dans un cadre, pas sur des groupes (comme dans Sketch et Adobe XD). C’est un peu gênant car vous pouvez définir des contraintes, mais elles ne fonctionnent tout simplement pas lorsque vous redimensionnez le groupe. Mais Figma vous encourage activement à utiliser des cadres imbriqués beaucoup plus puissants que les groupes. Un autre avantage de Figma est que, lorsque vous utilisez des grilles de présentation, les contraintes s’appliquent à la colonne ou à la cellule dans laquelle se trouve l’élément.

Résumé

les applications vous permettent d'utiliser des grilles et des dispositions de colonnes dans les planches d'art. L’implémentation de Figma semble plus puissante parce que vous pouvez imbriquer des images et donc disposer de grilles distinctes pour les sections d’un écran. La prise en charge des contraintes dans les trois est assez bonne et plus ou moins au pair

Outils de dessin et d’édition

Aucune de ces applications n’a les outils vectoriels avancés tels que Adobe Illustrator ou Affinity Designer . Vous obtenez les éléments de base nus: outil rectangle, outil ellipse, outil polygone et outil de dessin vectoriel de forme libre. Plus des capacités booléennes pour combiner et soustraire des formes. Celles-ci conviennent parfaitement à la plupart des besoins en matière de conception d'interface utilisateur.

Cela ne veut pas dire que vous ne pouvez créer d'illustrations vectorielles complexes dans aucune de ces applications. Les images ci-dessous représentent les capacités de chaque application si vous êtes prêt à consacrer tout votre temps à l'apprentissage de tous les outils et fonctionnalités.

Sketch est depuis quelques années mon principal outil de création. Je n'ai jamais ressenti le besoin de consulter Adobe Illustrator pour les icônes et les illustrations occasionnelles dont j'avais besoin. mes dessins. Vous obtenez les formes habituelles de rectangle, d'ellipse et de polygone, un outil de Bézier pour tout le reste, et même un outil de ligne de forme libre qui n'a probablement de sens que si vous utilisez une tablette / un stylet.

Figma a un avantage dans ce département ils appellent « réseaux vectoriels ». Si vous avez déjà utilisé Adobe Flash pour dessiner, cela vous semblera très familier. Plutôt que d’essayer de le décrire, j’aimerais vous montrer ce qu’il fait…

Les outils de forme de Figma ont également une longueur d’avance sur Sketch. Pour les ellipses, il est désormais possible de découper facilement des tartes et des beignets – une fonctionnalité très utile pour ceux qui ont essayé d’utiliser les paramètres de tiret de Sketch pour créer des diagrammes en anneau. Vous pouvez faire glisser les coins d'un rectangle pour définir le rayon de celui-ci sans vous soucier du panneau Propriétés.

Adobe XD est à la traîne car il ne dispose même pas d'outil de polygone de maintenant. Vous ne pouvez pas non plus aligner des noeuds de Bézier individuels sur un chemin, ni en modifier la rondeur, ce que nous utilisons très souvent pour créer des graphiques linéaires lisses dans des tableaux de bord.

Une fois que vous avez ajouté des éléments à votre conception, les trois applications vous permettent de les regrouper. Alignez-les, placez-les au-dessus ou au-dessous les uns des autres, alignez et répartissez les objets sélectionnés de manière uniforme, etc.

Une fonction remarquable de XD s'appelle La grille de répétition . Il vous permet de créer un élément et de le répéter dans une liste ou une grille, chacune avec des propriétés similaires, mais un contenu unique. La réponse de Figma à cette question est la sélection intelligente . Plutôt que de spécifier quelque chose sous forme de liste ou de grille, Figma vous permet de sélectionner un groupe d’éléments qui constituent déjà une liste ou une grille, puis de les organiser en les espaçant de manière uniforme et en les triant facilement par glisser-déposer.

Résumé

Bien qu'aucune des applications ne puisse résister à la puissance d'Illustrator ou d'Affinity Designer en ce qui concerne les illustrations, elle fournit un ensemble d'outils de dessin suffisant pour la journée. trucs de conception UI aujourd'hui. Les réseaux de vecteurs de Figma la placent devant les deux autres en termes de flexibilité.

Symboles

Les trois applications prennent en charge les symboles – des éléments qui partagent les mêmes propriétés et peuvent être mis à jour en une fois. La manière dont ils les implémentent change toutefois considérablement d'une application à l'autre.

• Sketch
  Dans Sketch, la conversion de quelque chose en un symbole l'enverra par défaut à une page appelée "Symboles", en créant une instance à la place de les éléments sélectionnés. Cette séparation claire entre le symbole et ses instances est intentionnelle. Une occurrence de symbole ne peut être mise à jour que de certaines manières: taille, texte, images; tandis que les symboles imbriqués peuvent être mis à jour via le panneau Inspecteur à droite. Pour éditer le symbole d'origine, vous pouvez double-cliquer dessus pour aller à la page «Symboles» et y apporter des modifications. Toutes les modifications que vous y apporterez seront appliquées à à toutes les instances du symbole.

«Vous pouvez le configurer pour que les symboles ne soient pas envoyés à la page séparée, mais je ne connais personne qui est-ce que. Les symboles dans Sketch sont conçus pour vivre sur leur propre page. ”

À partir de Sketch version 53, vous pouvez désormais sélectionner des éléments dans une instance de symbole, puis utiliser le panneau Remplacements pour modifier le contenu correspondant. élément. Il s'agit d'une amélioration par rapport à l'époque où vous ne pouviez sélectionner que l'instance entière.

• Figma
  Dans Figma, les symboles sont appelés composants. Lorsque vous créez un composant, il reste en place et est désigné par le terme «Composant principal». Le copier ailleurs dans la conception crée des instances par défaut. Les instances peuvent être modifiées à un emplacement similaire à celui de n'importe quel groupe, à l'exception du fait que l'emplacement des éléments ne peut pas être modifié. Vous pouvez modifier le texte, la couleur, la taille et même échanger des symboles imbriqués, le tout en ligne. Cela semble nettement plus souple que l’approche de Sketch, tout en mettant en place des contraintes adéquates pour ne pas déranger le composant d’origine. Par exemple, la suppression du composant principal n'affecte pas les instances. Vous pouvez simplement "récupérer" le composant principal à tout moment et continuer à apporter des modifications.

• Adobe XD
  Les symboles d’Adobe XD sont les moins puissants du moment. Il n'a pas le concept d'un symbole maître et d'instances. Chaque instance est un clone du symbole. Par conséquent, toute modification apportée à une instance est appliquée à toutes les autres. Elles sont également extrêmement limitées dans ce que vous pouvez personnaliser par exemple – il s’agit essentiellement de texte et d’images de fond.

Les trois applications prennent en charge la réutilisation des symboles dans les fichiers.

Dans Sketch, tout fichier peut être ajouté en tant que bibliothèque. vous permet d’ajouter ses symboles et ses styles à n’importe quel autre fichier ouvert. Les modifications apportées au document de bibliothèque d'origine peuvent être synchronisées dans les fichiers qui utilisent ces symboles, à condition de les ouvrir et de cliquer sur la notification.

Adobe XD adopte une approche plus simpliste pour ses ‘symboles liés’. Copier un symbole d'un document à un autre lie automatiquement les deux. Les modifications apportées au symbole dans tout document apparaissent sous forme de notifications dans les autres, ce qui vous permet de les réviser et de les appliquer dans les autres documents.

L’approche de Figma est un référentiel centralisé de composants appelé "Bibliothèque d’équipe". Tous les membres d'une équipe disposant du bon accès peuvent ajouter des composants à la bibliothèque de l'équipe. Toutes les modifications apportées aux composants de la bibliothèque s'affichent sous forme de notifications, ce qui vous permet de les réviser et de les mettre à jour dans les fichiers que vous avez ouverts.

Résumé

Les trois applications prennent en charge les symboles, mais la version de XD est si élémentaire qu'elle pourrait bien n'existe pas. L’approche de Figma pour éditer une instance de symbole – ou composant – est beaucoup plus intuitive et puissante que celle de Sketch, bien que cette dernière ait été rattrapée par les versions récentes. Les deux disposent de fonctionnalités de bibliothèque puissantes pour faciliter la gestion et la collaboration.

Les styles

Les styles sont l'un des éléments les plus fondamentaux d'un système de conception. La possibilité de sauvegarder des ensembles de propriétés d'élément, de les appliquer à plusieurs éléments et d'appliquer des modifications sur toutes les cartes, est extrêmement utile lorsque vous travaillez sur des projets de conception de moyenne à grande taille. Les trois applications incluent la prise en charge des styles, mais la mise en œuvre varie un peu.

• Sketch prend en charge deux types de style: les styles de texte et les styles de calque. Les styles de texte incluent toutes les propriétés de police, la couleur et les effets. Les styles de calque incluent les remplissages, les bordures et les effets. Comme le montrent clairement les noms, les styles de texte ne s'appliquent qu'aux éléments de texte et les styles de calque à tout le reste. À partir de la version 52, Sketch vous permet de remplacer les styles d'éléments situés dans des occurrences de symboles. C'est une énorme mise à niveau de l'utilité des symboles dans Sketch, qui élimine un grand nombre de méthodes fastidieuses pour modifier des couleurs d'icône dans des instances de symbole.

Grand aperçu )

• Figma adopte une approche radicalement différente en rendant les styles en cascade. Cela signifie que vous pouvez enregistrer des styles de texte (police, taille, épaisseur, hauteur de ligne, etc.), de couleurs ou d'effets (ombres portées, flous, etc.), puis les mélanger et les faire correspondre à des éléments. Par exemple, les propriétés de police et la couleur d'un bloc de texte sont modifiables indépendamment. Cela permet d’avoir une couleur différente pour un mot dans un paragraphe, ce que vous ne pouvez pas faire dans Sketch.

• Les styles de XD sont limités aux styles de caractère pour les éléments de texte. Vous pouvez enregistrer des couleurs et les appliquer à partir de la bibliothèque, mais vous ne pouvez pas enregistrer un ensemble de caractéristiques (remplissage, bordure, ombre, etc.) en tant que style individuel.

Résumé

Les trois applications prennent en charge le texte. modes. Sketch possède également des styles de calque pouvant être appliqués à des éléments autres que du texte. Figma décompose les styles par caractéristique et vous permet de les mélanger pour obtenir le résultat souhaité. Il peut être plus flexible ou trop ouvert, en fonction de votre cas d'utilisation.

Designing With Data

L'un de mes plugins Sketch les plus utilisés est Content Generator ce qui m'a permis de rapidement remplissez mes conceptions avec des données factices réalistes au lieu des habituelles lorem ipsum et John Doe et autres. Avec la sortie de la version 52, Sketch a éliminé la nécessité de ce plug-in en introduisant un support intégré pour l'importation de données. Maintenant, vous pouvez facilement ajouter des noms, adresses, numéros de téléphone et même des photos réalistes dans votre conception. Quelques ensembles sont intégrés, mais vous pouvez en ajouter d'autres selon vos besoins.

L'équipe Adobe XD a présenté une démonstration de la prise en charge des travaux en cours pour les fonctionnalités intégrées de la conférence MAX d'Adobe, mais nous ne savons pas quand cela sera intégré au produit. . La seule fonctionnalité qui a déjà été intégrée est la possibilité de glisser-déposer un fichier TXT sur un élément d’une grille de répétition – ou un tas d’images sur une image d’une grille de répétition – pour remplir tous les éléments de la grille avec ces données. Mais ce qui me passionne le plus, c’est l’écosystème de plug-ins qui offre des moyens beaucoup plus puissants d’importer des données réalistes et en temps réel dans XD. Les plug-ins Airtable et Google Sheets qui vous permettent de vous connecter aux applications et d'extraire des données de feuilles de calcul en temps réel.

Figma traîne derrière Sketch et XD à cet égard. Pour le moment, il ne semble pas y avoir de moyen d'insérer du contenu réaliste dans des éléments de Figma, mis à part le copier-coller d'un bit à l'autre du contenu.

Résumé

Adobe XD prend enfin les devants. API beaucoup plus performante qui vous permet d’extraire des données en temps réel, pas seulement des données statiques comme le fait Sketch. Figma a encore beaucoup à faire sur ce front.

Plug-ins et intégrations

C’est là que se distingue la position de Sketch en tant qu’application de conception d’interface utilisateur la plus populaire. Avec une immense bibliothèque de plugins et de nouveaux à venir tous les deux ou trois jours, Sketch n'a pas son pareil pour son écosystème de plugins et d'intégrations. Des plugins pour l'animation, le prototypage et le contrôle de version, des aides pour la gestion de texte, de styles, aux connecteurs pour les applications populaires, il existe un plugin pour tout ce à quoi vous pouvez penser. Voici quelques-unes de mes préférées:

En tant que chef de file du peloton, Sketch bénéficie également du plus grand nombre d’intégrations avec des applications tierces. . Qu'il s'agisse de prototyper et de partager via InVision transfert de développeur via Zeplin contrôle de version via Abstract ou Plant la plupart des applications ont une intégration directe directe Sketch, avec la possibilité d'importer, de synchroniser ou de prévisualiser des fichiers Sketch.

Les plugins pour XD ont été lancés il y a quelques mois à peine, mais les choses s'annoncent déjà bien. Grâce à sa puissance marketing, Adobe a réussi à convaincre de nombreuses entreprises et développeurs de lancer leur écosystème de plug-ins avec brio. Bien qu’elle ne soit pas aussi longue que celle de Sketch, la liste des plugins pour XD est plutôt bonne et s’allonge rapidement. Voici quelques faits saillants:

Le plugin Airtable que j’ai mentionné ci-dessus est un exemple d’intégrations d’applications pour lesquelles XD devient rapidement très performant. Il existe également des intégrations avec usertesting.com Cloudapp Dribbble et plus encore.

En ce qui concerne la gestion des plugins, XD fait un bien meilleur travail avec une belle interface utilisateur pour trouver, lire et installer tous les plugins. Pour Sketch, vous devez trouver le plug-in sur le Web, le télécharger et lancer le fichier .sketchplugin pour l'installer. Vous pouvez les désactiver ou les supprimer de l’écran des préférences, mais pas grand-chose d’autre.

Figma n’a rien à envier aux plugins par rapport à Sketch et même à XD. Il n’a pas d’API de plug-in en particulier, mais Figma a ouvert certaines API pour les intégrations avec d’autres applications plus tôt cette année. Outre l'intégration intégrée avec le principe Zeplin Avocode et Dribbble vous obtenez principalement le résultat souhaité. fichiers en dehors de Figma – comme cet exportateur de PDF possibilité de déplacer des actifs de Figma vers Github à l'aide de Relay etc.

En mars 2018, Kris Rasmussen Dans Figma il est dit ce qui suit au sujet des projets d’extension:

«Nous avons vu nos concurrents ajouter des modèles d’extension qui accordaient aux développeurs la liberté dont ils ont besoin au détriment de la qualité, de la robustesse et de la prévisibilité. Nous sommes impatients de tirer parti de l'incroyable esprit collectif de la communauté Figma pour améliorer notre outil, mais nous n'allons pas introduire de extensions tant que nous ne sommes pas convaincus que notre modèle d'extension est robuste. Il n'y a pas encore de date estimée, mais nous explorons activement comment construire cela de manière solide. ”

Résumé

Encore une fois, Figma a du pain sur la planche, surtout si on le compare à l'immense écosystème de Sketch. , ou les puissantes API et le marketing d'Adobe pourraient attirer plus de développeurs.

Prototypage, interaction et conception graphique

Sketch et Figma ont commencé par être des applications de conception statiques, alors qu'Adobe XD a été lancé avec la possibilité intégrée de relier des écrans. ensemble pour construire des prototypes peu fidèles. Figma a ajouté la fonctionnalité de prototypage à la mi-2017, tandis que Sketch a ajouté le prototypage au début de 2018. À ce jour, les trois applications vous permettent de créer des prototypes et de les partager avec d'autres.

Les outils de prototypage de Sketch et Figma étaient principalement limités à la liaison d'éléments individuels. sur d’autres œuvres d’art sur click / tap ou sur le survol, avec une sélection limitée d’effets de transition. Figma vient de lancer l’introduction des recouvrements en décembre 2018. Ceci, combiné au fait que les cadres de Figma sont plus flexibles que la structure rigide de Sketch, permettent de créer des prototypes de menus, de boîtes de dialogue, etc. Les deux applications prennent cependant en charge d'autres applications de prototypage. Figma a une intégration avec Principle et Sketch avec pratiquement tous les outils de prototypage existants

Alors que Figma vous permet de partager les prototypes avec un simple lien (les avantages d'être dans le nuage), avec Sketch vous Vous devez télécharger votre fichier sur le Sketch Cloud avant de pouvoir le partager avec d’autres.

La sortie du logiciel Adobe XD en octobre 2018 l’a fait avancer de loin dans la course au prototypage. It now does everything I mentioned above, but includes two more powerful features:

• Auto-animate
  Where designers had to pull their designs into apps like Principle or After Effects to add motion design, some of it is built into XD now. It works by automatically moving elements with the same name when transitioning from one screen to another. This may sound simple, but the kind of effects you can generate are pretty spectacular.

• Voice prototypes
  You can now trigger interactions in XD by voice commands, and even include speech responses to triggers. This is a huge addition that makes it easy to prototype conversational user interfaces in XD, something that is not possible in Sketch, Figma, or any of the leading prototyping apps out there.

If animation is important to you, one app to look out for is InVision Studio. It has a timeline based animation workflow, something none of the other apps on this list can boast of. Or if you’re comfortable getting your code on, Framer’s code based interaction model is definitely something to explore.

Summary

Adobe XD has the most powerful prototyping toolset of the three apps, with voice and auto animate leading the way. Sketch has rudimentary prototyping capabilities, but Figma’s implementation feels more seamless when it comes to sharing and gathering feedback.

Collaboration

Sketch and Adobe XD are traditional desktop apps — built for designers to work in isolation and share their designs when ready. Figma, on the other hand, was built for collaboration in mind, more like Google Docs for designers.

In Figma, multiple users can work on the same document at the same time. You can see colored cursors moving around the design when others are viewing or editing the design you’re on. This can take some getting used to, but in situations where we have multiple designers working on a project, this can be a godsend. The cherry on top is the ability to view the design from another designer’s perspective. Just click the user’s avatar in the header and you can see exactly what she is seeing and follow along.

Going beyond collaborative editing, sharing your work is also more streamlined in Figma than in the other apps. You can either invite others to see or edit a design or simply send a URL to the design file or prototype preview.

Developers who are viewing the file can get specs for the design elements — a la Zeplin or Avocode — and export any image assets they need. The assets don’t even need to be set to export like in Sketch.

Note: For Figma designs, there are three levels of access: 1) owner 2) can edit, and 3) can view. We use “can view” to give developers access to all the specs, and the ability to export assets as and when they need them.

Figma also has a built-in commenting system which is important when reviewing designs with broader teams and clients. Today, I rely on a combination of Sketch and InVision to achieve this.

Sketch allows you to upload files to its cloud services, and then share a link for others to view. Ensuring that the latest version is in the cloud is up to you, though. This can be a big risk if you have developers working off of a design that may not be current. XD’s December 2018 release added the ability to save files to the cloud, and you can decide which files to save in the cloud and which ones locally. This addresses the problem with maintaining latest versions in the cloud.

Summary

This is where Figma’s web-based roots really shine. It leaves the other two far behind on the collaboration front with built-in sharing, commenting and the single-source-of-truth approach. Sketch and XD are adding sharing features at a good pace, but their file-first approach is holding them back.

Which One Is Right For You?

If you’re a user interface designer, you can’t go wrong with either of the three apps that I have covered here. Or the others that I touched upon just briefly. They all will get the job done, but with varying levels of productivity.

If a native desktop app is necessary for you, and you don’t care about a Windows — or a Linux — version, Sketch is the best bet right now. Adobe XD is getting better at breakneck speed, but it is not as good as Sketch yet for day-to-day design tasks.

If you’re on Windows though, or if motion design is part of your requirements, Adobe XD is your best shot. Sketch simply does not have any animation capabilities and it doesn’t look like that a Windows version could appear on the horizon any time soon. For animation, InVision Studio might also be something you can look at. And if you’re comfortable with code, Framer X provides the most flexibility of the lot.

For me though, at this moment Figma strikes the best balance between features, usability, and performance. Yes, you need to be online to use it (unless you have a file open, in which case you can edit it offline). No, it doesn’t have plugins or any animation capabilities. But if UI design mockups are your core requirement, Figma does a far better job for creating, sharing and collaborating with others than either Sketch or Adobe XD. It has a very generous free tier, it is available on any platform that can run a modern browser, and it’s very actively in development, with new features and updates coming in faster than I can keep up learning them all.

In my team, for example, there seems to be an even split between folks who prefer Sketch or Figma. I’m myself beginning to lean in on Figma myself, but also use Adobe XD every now and then for some quick motion design experiment.

And if you’re looking for an even shorter tl;dr summary — trust Meng To:

“My thoughts on design tools and why you should pick them.
Figma: collaboration and all-in-one
Sketch: maturity and plugins
Framer: code and advanced prototyping
Studio: free and animation
XD: speed and adobe platform”

References And Further Reading

Sketch

Figma

• “Figma Tips And Tricks,” Tom Johnson, Medium
• “Best Practices: Components, Styles, And Shared Libraries,” Thomas Lowry, Figma Blog
• “When To Use Groups Versus Frames In Figma,” Thomas Lowry, Figma Blog
• “We Refreshed Figma’s UI: An Inside Look At Our Process,” R asmus Andersson, Figma Blog

Adobe XD

(mb, yk, il)