Adobe XD contre Sketch – Confrontation 2020

Deux concurrents de poids lourds continuent de s'affronter pour s'emparer de la première place de l'outil de conception le plus apprécié : Adobe XD contre Sketch. Quel outil les gouvernera tous ? La réponse n'est pas simple. Étant donné que les deux ont fait des progrès extraordinaires ces dernières années, une comparaison complète des outils de conception sur les fonctionnalités, les performances et la facilité d'utilisation est en retard.

Sketch avait déjà des années d'avance avant les débuts de XD : six, pour être exact. Il avait une large base de fans dédiée, il était chargé de fonctionnalités et disposait d'un vaste écosystème de plugins. Mais Sketch avait un talon d'Achille : il ne fonctionnait que sur Mac.

En 2016, Adobe a fait monter la pression et s'est lancé dans la mêlée. Non seulement ils ont associé Sketch à des fonctionnalités similaires dans XD, mais ils l'ont rendu disponible sur Windows. Étant donné qu'environ 78 % des ordinateurs de bureau dans le monde fonctionnent sous Windows, il s'agissait d'une décision audacieuse et compétitive.

Adobe XD a également comblé un vide important dans la gamme Creative Suite. Fireworks a reçu la poignée de main en or et les fonctionnalités offertes par XD n'étaient pas disponibles dans d'autres applications comme Illustrator ou Photoshop. Non seulement XD est le même outil de conception vectoriel léger que Sketch, mais il s'intègre également mieux au reste de l'écosystème Adobe Creative Suite.

Cependant, parmi les concepteurs, les opinions varient encore quant à savoir quel outil est le meilleur. La bataille s'est récemment transformée en une guerre totale, car des fonctionnalités sont rapidement ajoutées aux deux outils, jouant souvent du rattrapage et s'imitant fréquemment.

Plongeons-nous et comparons les fonctionnalités suivantes dans Adobe XD vs Sketch :

• Interface utilisateur
• Travailler avec des symboles/composants maîtres
• Panneaux Actifs et Composants
• Mise à l'échelle des couches et des composants
• Dupliquer et distribuer des éléments
• Outils de conception réactifs
• Plugins
• Prototypage
• La collaboration d'équipe
• Transfert de développeur
• Contrôle de version et bibliothèques partagées
• Mode sombre

Interface utilisateur

Même si Sketch et Adobe XD partagent une interface similaire, l'interface utilisateur de Sketch a l'avantage sur XD . Cela ressemble plus à un outil de conception robuste et professionnel, tandis que XD ressemble à une combinaison allégée d'Illustrator et de Photoshop.

Un inconvénient majeur d'Adobe XD est qu'il affiche le panneau des ressources à l'ouverture par défaut. Ce n'est pas ce à quoi la plupart des designers s'attendent. Lors du démarrage d'un document de conception, la plupart des concepteurs s'attendent à voir immédiatement le panneau des calques , et non les actifs ou les plug- ins .

➠ +1 à Sketch pour son interface intuitive.

Travailler avec des symboles/composants maîtres

Les « symboles » de bibliothèque de conception réutilisables sont disponibles dans Sketch et Adobe XD (ils sont appelés « composants principaux » dans XD). Lorsqu'un symbole ou un composant principal est mis à jour, toutes les autres instances de ce composant dans le projet reflètent la mise à jour.

Contrairement à Adobe XD, cependant, la fonctionnalité Smart Layout de Sketch est plus puissante lorsque vous travaillez avec de tels composants principaux. Il permet une plus grande flexibilité et des flux de travail plus rapides.

Dans Sketch, nous pouvons attribuer une mise en page particulière à un composant → faites glisser le composant sur le canevas → utilisez des remplacements pour personnaliser le contenu, et le composant sera redimensionné en fonction de son nouveau contenu.

➠ +1 à Sketch car il fait mieux les symboles.

Panneaux Actifs et Composants

Sketch et Adobe XD partagent des panneaux d'actifs/composants similaires avec quelques différences.

Pour les ressources, XD dispose d'un menu déroulant offrant aux concepteurs la possibilité de ne voir que des catégories spécifiques, à l'exception de "Tous". Les concepteurs peuvent également basculer entre une « vue en grille » et une « vue en liste ». Ces options rendent le panneau des actifs dans XD beaucoup plus convivial. De plus, une liste déroulante pour afficher des catégories spécifiques offre plus de flexibilité pour ajouter plus de catégories à l'avenir.

L'esquisse est moins flexible. Il affiche les actifs du projet sous un contrôle segmenté à trois boutons (pour les symboles, les styles de texte et les styles de couleur). Avec Sketch, les composants peuvent faire l'objet d'une recherche, mais pas d'une catégorie à l'autre. XD effectue une recherche plus efficace en parcourant tous les composants de tous les actifs.

➠ +1 à Adobe XD car il gère mieux les assets.

Utilisation des composants maîtres d'autres bibliothèques

Avec Sketch, les concepteurs peuvent ajouter rapidement et facilement des symboles principaux aux plans de travail à partir d'une multitude de bibliothèques liées, locales ou partagées en ligne. Dans Adobe XD, les « ressources liées » peuvent être placées dans des conceptions à partir du « nuage XD » (composants, couleurs et styles de caractères), mais en raison de ce flux de travail délicat, Adobe XD est beaucoup moins flexible.

➠ +1 à Sketch pour une meilleure UX lorsque vous travaillez avec des composants principaux.

Modification des styles de couleur

Une fois ajouté à la bibliothèque de ressources, Adobe XD permet aux concepteurs de modifier les styles de couleur et d'observer le changement de couleur en temps réel sur les plans de travail. Dans Sketch, il existe une solution de contournement pour modifier les couleurs globalement, mais ce n'est pas aussi intuitif qu'Adobe XD.

➠ +1 à Adobe XD pour une meilleure édition des styles de couleurs.

Configuration d'un système de conception

Sketch offre un excellent moyen d'organiser les composants lors de la création de systèmes de conception (icônes, boutons, styles de couleur, styles de texte, etc.). En utilisant une barre oblique '/' lors de la création et du nom de ces actifs, ils sont regroupés dans le panneau des composants et organisés hiérarchiquement dans le menu d'insertion. C'est une excellente méthode pour organiser les composants de manière logique et logique pour les concepteurs travaillant avec des centaines d'éléments de conception.

Adobe XD n'offre pas cette flexibilité.

➠ +1 à Sketch pour une gestion facile des ressources de conception.

Mise à l'échelle des couches et des composants

La mise à l'échelle d'objets contenant plusieurs composants n'est pas bien gérée par Adobe XD. En général, Sketch gère cela beaucoup mieux. Il préserve bien l'espacement proportionné entre les éléments lors de la mise à l'échelle d'un symbole, par exemple.

De plus, Sketch dispose d'une fonctionnalité utile de mise à l'échelle des calques ( Commande + K ) où un groupe d'éléments peut être mis à l'échelle à l'aide de pourcentages ou de nombres tout en spécifiant à partir de quelle origine mettre à l'échelle. Sketch redimensionne les calques sélectionnés, tandis que les attributs de style tels que l'épaisseur de la bordure, la taille de l'ombre et le rayon seront mis à l'échelle de manière appropriée.

Une autre fonctionnalité pratique de Sketch est la possibilité de redimensionner les éléments de l'inspecteur en nombres ou en pourcentages. Ceci est légèrement différent de la commande Échelle des calques ci-dessus. En ajoutant les lettres suivantes aux pourcentages ou aux nombres —c/m, t, b, r— Sketch mettra à l'échelle l'élément sélectionné à partir de cette origine. Par exemple, « 50 % c » mettra à l'échelle l'élément sélectionné à 50 % du centre.

• c/m : échelle à partir du centre
• t : échelle à partir du haut
• b : échelle à partir du bas
• r : échelle à partir de la droite

Remarque : L'option "échelle à partir de la gauche" n'est pas affichée car c'est le comportement par défaut dans Sketch.

Découvrez comment fonctionne la mise à l'échelle des calques dans Sketch→

➠ +1 à Sketch pour plus de polyvalence et de précision lors de la mise à l'échelle des éléments.

Duplication et distribution d'éléments

La grille de répétition dans Adobe XD est une fonctionnalité pratique qui transforme un groupe d'éléments en une grille qui répète ces objets. La plupart des concepteurs l'ont probablement essayé plusieurs fois lorsqu'ils ont exploré XD, mais combien de fois les concepteurs l'utiliseront-ils ? Et malheureusement, Repeat Grid ne s'aligne pas sur les calques, une lacune importante.

Avec Sketch, en revanche, nous pouvons maintenir la touche Option enfoncée et faire glisser un calque pour le dupliquer (maintenez également la touche Maj enfoncée pour le contraindre). Ensuite, Commande + D répète l'élément autant de fois que souhaité avec le même espacement exact entre les doublons.

De plus, Sketch accélère les workflows de conception avec Smart Distribute . Il donne aux concepteurs plus de contrôle sur la création de grilles, l'ajustement de l'espacement et la réorganisation des calques. Outre les nombreuses petites choses utiles que Smart Distribute fait, il a un bouton magique "Tidy" dans l'inspecteur.

Après avoir placé plusieurs objets au hasard sur un plan de travail, nous pouvons cliquer sur le bouton Tidy , et il les répartira comme par magie uniformément sur une grille. Nous pouvons apporter des ajustements supplémentaires à l'espacement en faisant glisser les poignées qui apparaissent (lors du survol du groupe) ou en entrant des valeurs manuelles pour une précision absolue.

Plusieurs plugins Sketch ont été créés pour aider les concepteurs avec les grilles, les guides et la distribution en plus de Smart Distribute . En voici trois :

Répartir les calques • SketchDistributor • Guides uniformément répartis

➠ +1 à Sketch pour mieux dupliquer et répartir les éléments.

Outils de conception réactifs

Adobe XD et Sketch ont des fonctionnalités de réponse automatique similaires. Ils permettent tous deux de contrôler manuellement la largeur et la hauteur fixes d'un élément tout en épinglant l'élément à une origine particulière de la boîte englobante. Adobe XD dispose également d'un outil intelligent de "redimensionnement réactif" qui détermine automatiquement le redimensionnement des éléments et des groupes, mais ce n'est pas parfait.

Sketch dispose d'un outil réactif intelligent appelé Smart Layout . Les concepteurs peuvent créer des composants réactifs, et chaque fois que leur contenu est ajusté, les composants s'adaptent au changement, permettant plus de flexibilité et des flux de travail plus rapides.

Avec Smart Layout , les concepteurs peuvent facilement créer des boutons qui se redimensionnent automatiquement tout en conservant des marges et un remplissage cohérents, quelle que soit la longueur des étiquettes de texte. Smart Layout fonctionne également avec les groupes.

Adobe XD a récemment implémenté une fonctionnalité de "redimensionnement réactif", mais elle est toujours à la traîne par rapport à Sketch.

➠ +1 à Sketch pour des fonctionnalités de conception réactives rapides et faciles.

Plugins

Parmi une surabondance d'outils de conception numérique, Sketch possède l'un des écosystèmes de plugins les plus robustes. Avoir des milliers de plugins est l'une des fonctionnalités les plus attrayantes de Sketch, et les développeurs créent continuellement des plugins utiles qui étendent les fonctionnalités de Sketch.

La collection de plugins d'Adobe XD est pâle en comparaison. Même si le même développeur crée une version XD d'un plugin Sketch, XD est trop récent pour que le plugin soit largement adopté. De plus, de nombreux nouveaux plugins XD n'ajoutent pas suffisamment de valeur pour que les concepteurs les adoptent.

➠ +1 à Sketch pour son vaste écosystème de plugins.

Prototypage

Avec Auto-animate , Adobe XD a mis la barre très haut pour le prototypage. Grâce à la fonction d'animation automatique « intelligente », les concepteurs peuvent créer de superbes transitions dans des prototypes pour visualiser le mouvement du contenu sur les écrans. XD peut également ajouter des sons aux prototypes avec une nouvelle "action" qui joue des effets sonores et d'autres fichiers audio en réponse aux déclencheurs.

Sketch a quelques lingettes de base entre les écrans pour le prototypage mais n'offre pas la même fluidité avec les microinteractions. Il n'est pas certain que Sketch puisse les ajouter. Il semble que l'accent soit davantage mis sur l'intégration d'autres fonctionnalités utiles, telles que les assistants dans Sketch.

Les créateurs de Sketch estiment très probablement qu'il existe de nombreux autres outils pour créer des prototypes avec des microinteractions très détaillées, comme ProtoPie. Il est puissant et peut facilement importer des conceptions à partir de Sketch, Figma et Adobe XD.

Sketch et Adobe XD sont au coude à coude lorsqu'il s'agit de fournir des applications permettant de prévisualiser des prototypes sur mobile : Sketch Mirror et Adobe XD . Les applications tirent le prototype conçu sur un ordinateur de bureau vers l'écran mobile via un câble USB ou le wifi.

➠ +1 à Adobe XD pour les transitions auto-animées pour visualiser les prototypes.

La collaboration d'équipe

Les deux outils offrent une collaboration d'équipe. Sketch a Sketch pour les équipes où les concepteurs utilisant un espace de travail cloud partagé peuvent partager des idées, rester synchronisés avec les bibliothèques cloud partagées , vérifier l'avancement des autres projets d'équipe et laisser des commentaires sur les conceptions, le tout au même endroit.

De plus, les parties prenantes et les collaborateurs invités qui n'ont pas accès à l'application Sketch peuvent afficher, inspecter et commenter les conceptions dans le navigateur. Le transfert du développeur est également intégré à Sketch à l'aide de Sketch for Teams .

Au moment d'écrire ces lignes, la version premium d'Adobe XD permet aux équipes de co-éditer des fichiers XD avec d'autres concepteurs (en ligne et hors ligne) via Creative Cloud, de partager des fichiers pour révision et de transmettre facilement les spécifications aux développeurs. Toutes ces fonctionnalités sont actuellement en version bêta .

➠ +1 à Sketch pour une collaboration d'équipe simple.

Transfert de développeur

La remise des conceptions aux développeurs est une étape cruciale, et Adobe XD et Sketch la gèrent aussi bien. En partageant des projets via des plateformes en ligne, les concepteurs peuvent générer des spécifications et collaborer avec les développeurs pour les aider à transformer leurs conceptions en sites Web et en applications.

➠ +1 à Adobe XD et +1 à Sketch pour le transfert du développeur.

Contrôle de version et bibliothèques partagées

Le contrôle des versions des fichiers de conception est essentiel lorsque vous travaillez avec d'autres concepteurs sur le même projet. Cela facilite également la collaboration d'équipe et les commentaires sur la conception plus efficacement. Sketch a récemment intégré ces fonctionnalités dans Sketch for Teams . Avec Sketch Cloud , les concepteurs peuvent partager des fichiers de conception et des bibliothèques qui facilitent le travail avec des systèmes de conception au sein d'équipes distribuées.

Adobe XD dispose également d'un système de gestion des versions de fichiers dans le cloud avec Adobe Creative Cloud. Bien que le site Web Creative Cloud conserve les versions des fichiers XD, il n'est pas possible de revenir aux versions précédentes. Pour revenir à une version précédente, les concepteurs doivent ouvrir le fichier dans Adobe XD via le site Web Creative Cloud, puis copier et coller le contenu dans le document actuel. Les versions de fichiers sont également automatiquement supprimées après 30 jours, sauf si elles sont nommées ou mises en signet. En d'autres termes, ce n'est pas un processus transparent.

Comme Sketch, XD permet également aux équipes d'utiliser facilement les ressources partagées à l'aide des bibliothèques Creative Cloud. Les concepteurs peuvent importer des couleurs, des styles de caractères et des graphiques dans XD à partir de ces bibliothèques.

➠ +1 à Sketch pour une gestion facile des versions de fichiers et des bibliothèques partagées dans le cloud.

Mode sombre

A fière allure et fait ressortir les designs

De nombreux designers préfèrent travailler dans des pièces peu éclairées afin de voir leurs créations à l'écran sans reflets ni éblouissements. Une interface utilisateur en mode sombre s'intègre bien dans cet environnement. Il offre un excellent contraste pour presque toutes les couleurs et rend le contenu visuel plus saisissant.

Le mode sombre n'est pas seulement beau, il est connu pour minimiser la "fatigue oculaire numérique". Avouons-le, les concepteurs regardent les écrans la majeure partie de la journée. La fatigue oculaire numérique est une affection courante qui touche des millions de personnes. Causé par tout, de l'utilisation excessive de l'ordinateur à l'exposition régulière à la lumière vive, il peut provoquer des maux de tête, des douleurs au cou, une vision floue et des yeux brûlants/piquants.

Couleurs d'accentuation et de surbrillance

Sketch prend en charge le mode sombre depuis Sketch 52 (octobre 2018). Il prend également en charge les préférences globales de couleur Accent et Highlight de macOS Mojave. Les options sélectionnées qui sont mises en surbrillance dans le panneau Calques, l'inspecteur et ailleurs dans l'application correspondront aux préférences système.

Le mode sombre n'est pas disponible dans Adobe XD, pas même sur macOS.

➠ +1 à Sketch pour le mode sombre.

Le gagnant d'Adobe XD contre Sketch Showdown est… Sketch

Sketch remporte la bataille pour la suprématie des outils de conception avec une avance significative sur Adobe XD.

Dans certains scénarios, le choix est évident : Sketch n'est pas disponible pour Windows. Un avantage notable pour les abonnés Adobe Creative Cloud est également que le "plan de démarrage" XD est gratuit, bien qu'il comporte des limitations considérables.

La polyvalence de Sketch devrait obliger les concepteurs sur macOS à choisir Sketch plutôt que XD. Son interface, ses plugins, ses fonctionnalités de collaboration, ses outils de conception réactifs, ses symboles réutilisables, ses bibliothèques partagées et d'autres fonctionnalités pratiques l'emportent sur ceux d'Adobe XD.

Il convient de noter qu'il n'est pas possible de déplacer des fichiers de conception de XD vers Sketch . La transition de Sketch (et Photoshop ou Illustrator) vers XD est plus facile car XD peut ouvrir des fichiers Sketch. Certains problèmes peuvent survenir lors de l'utilisation de plugins Sketch uniquement comme Abstract ou InVision Craft, mais cela peut être évité avec un peu de nettoyage.

Certains concepteurs adorent Adobe XD pour sa fonctionnalité d'animation automatique. C'est une caractéristique attrayante qui rend les prototypes superbes. Cependant, les concepteurs doivent garder à l'esprit qu'il ne s'agit que d' un attribut fantaisiste. Compte tenu des avantages de Sketch vs XD, les compromis n'en valent pas la peine. De nombreux outils de prototypage sophistiqués sont disponibles et fonctionnent de manière transparente avec Sketch.

La bataille n'est pas encore terminée. Les années à venir devraient voir une guerre intense et totale entre Adobe XD et Sketch. En fin de compte, ce sont les concepteurs qui bénéficieront de l'ajout de nouvelles fonctionnalités aux deux outils de conception. Cela rendra leur vie professionnelle quotidienne beaucoup plus facile, et c'est quelque chose à attendre avec impatience.

Dites-nous ce que vous en pensez! S'il vous plaît laissez vos pensées, commentaires et commentaires ci-dessous.

• • •

Pour en savoir plus sur le blog Toptal Design :

• Concevoir avec précision – Une revue Adobe XD
• Exploration de la conception multimodale - Un didacticiel Adobe XD
• Forme et fonction - Un guide des meilleurs outils filaires
• Maîtrisez votre métier avec ces meilleurs outils UX
• Les meilleurs portefeuilles de concepteurs UX - Études de cas et exemples inspirants