Deux prétendants poids lourds continuent de se battre pour capturer la première place de l'outil de conception le plus populaire: Adobe XD vs Sketch. Quel outil les régnera 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 disposait d'une large base de fans dévoués, de fonctionnalités et d'un vaste écosystème de plugins. Mais Sketch avait un talon d'Achille - cela ne fonctionnait que sur les Mac.

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

Adobe XD a également comblé un trou 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. XD est non seulement le même outil de conception léger et vectoriel 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 sur l'outil le mieux adapté. La bataille est récemment devenue une guerre totale car des fonctionnalités sont rapidement ajoutées aux deux outils, jouant souvent du rattrapage et se mimant fréquemment.

Examinons et comparons les fonctionnalités suivantes d'Adobe XD et de Sketch:

• Interface utilisateur
• Travailler avec des symboles / composants principaux
• Panneaux Actifs et composants
• Mise à l'échelle des couches et des composants
• Dupliquer et distribuer des éléments
• Outils de conception réactive
• Plugins
• Prototypage
• La collaboration d'équipe
• Développeur Handoff
• 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 important dans Adobe XD est-ce qu'il affiche le les atouts panneau ouvert par défaut. Ce n'est pas ce à quoi s'attendent la plupart des designers. Lors du démarrage d'un document de conception, la plupart des concepteurs s'attendent à voir couches panneau immédiatement - pas les atouts ou plugins .

➠ +1 à Sketch pour son interface intuitive.

Travailler avec des symboles / composants principaux

Des «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, Sketch Disposition intelligente La fonction est plus puissante lorsque vous travaillez avec de tels composants maîtres. Cela permet une plus grande flexibilité et des flux de travail plus rapides.

Dans Esquisser , nous pouvons attribuer une mise en page particulière à un composant → faire glisser le composant sur le canevas → utiliser des remplacements pour personnaliser le contenu, et le composant se redimensionnera en fonction de son nouveau contenu.

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

Panneaux Actifs et composants

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

Pour les éléments, XD dispose d'un menu déroulant offrant aux concepteurs la possibilité d'afficher uniquement 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 ressources dans XD nettement plus convivial. En outre, une liste déroulante pour afficher des catégories spécifiques offre plus de flexibilité pour ajouter plus de catégories à l'avenir.

Le serveur SQL utilise une version étendue de SQL appelée t-sql ou transact-sql.

L'esquisse est moins flexible. Il affiche les ressources 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 être recherchés mais pas entre les catégories. XD recherche mieux en recherchant dans tous les composants de tous les actifs.

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

Utilisation de composants principaux d'autres bibliothèques

Avec Sketch, les concepteurs peuvent ajouter rapidement et facilement des symboles principaux à des 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 «cloud XD» (composants, couleurs et styles de caractères), mais en raison de ce flux de travail peu pratique, Adobe XD est beaucoup moins flexible.

➠ +1 à Sketch pour une meilleure expérience utilisateur lorsque vous travaillez avec des composants principaux.

Modification des styles de couleurs

Une fois ajouté à la bibliothèque de ressources, Adobe XD permet designers modifiez les styles de couleur et observez 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 couleur.

Configuration d'un système de conception

Sketch offre un excellent moyen d'organiser les composants lors de la construction systèmes de conception (icônes, boutons, styles de couleurs, styles de texte, etc.). En utilisant une barre oblique «/» lors de la création et de la dénomination de ces éléments, ils sont regroupés dans le panneau des composants et organisés de manière hiérarchique dans le menu d’insertion. Il s’agit d’une excellente méthode pour organiser les composants de manière logique. designers travailler 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.

raisons de la crise de la dette en grèce

De plus, Sketch a une fonction Mettre à l'échelle les couches fonctionnalité ( 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 dans l'inspecteur par des nombres ou des pourcentages. Ceci est légèrement différent du Mettre à l'échelle les couches commande ci-dessus. En ajoutant les lettres suivantes aux pourcentages ou aux nombres: c / m, t, b, r : L'esquisse met à 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 il s'agit du comportement par défaut dans Sketch.

Découvrez le fonctionnement de 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.

Dupliquer et distribuer des éléments

La Répéter la grille 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 lors de l'exploration de XD, mais combien de fois les concepteurs l'utiliseront-ils? Et malheureusement, Répéter la grille ne s'accroche pas aux calques, une lacune importante.

Avec Sketch, par contre, nous pouvons maintenir Option et faites glisser un calque pour le dupliquer (maintenez le Décalage clé ainsi que pour le contraindre). D'après cela, Commande + D répète l'élément autant de fois que vous le souhaitez avec le même espacement exact entre les doublons.

De plus, Sketch accélère les workflows de conception avec Distribution intelligente . 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. En dehors des nombreuses petites choses utiles Distribution intelligente fait, il a une magie 'Rangé' bouton dans l'inspecteur.

Après avoir placé plusieurs objets au hasard sur un plan de travail, nous pouvons cliquer sur le Rangé bouton, 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 (lorsque vous survolez le groupe) ou en entrant des valeurs manuelles pour une précision absolue.

Plusieurs plugins Sketch ont été créés pour aider les concepteurs avec des grilles, des guides et une distribution en plus de Distribution intelligente . En voici trois:

Distribuer les couches • SketchDistributeur • Guides uniformément distribués

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

Outils de conception réactive

Adobe XD et Sketch ont tous deux 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 du cadre de sélection. 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é Disposition intelligente . 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 Disposition intelligente , 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 fonction de «redimensionnement réactif», mais elle est toujours en retard sur 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 plus robustes écosystèmes de plugins . 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.

pourquoi android studio est-il si mauvais

La collection de plug-ins d’Adobe XD est très 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-animé , Adobe XD a augmenté la mise en matière de prototypage. Utilisation de la fonction d’animation automatique «intelligente», designers peut créer de superbes transitions dans les 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 à des déclencheurs.

Sketch propose des lingettes de base entre les écrans pour le prototypage, mais n'offre pas la même fluidité avec les micro-interactions. Il n'est pas certain que Sketch puisse les ajouter. Il semble que l’accent soit davantage mis sur l’incorporation d’autres fonctionnalités intéressantes, telles que 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 micro-interactions très détaillées, telles que ProtoPie . Il est puissant et peut facilement importer des conceptions depuis Sketch, Figma et Adobe XD.

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

se référer aux données. l'élasticité-prix de la demande est relativement élastique :

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

La collaboration d'équipe

Les deux outils offrent une collaboration d'équipe. Sketch a Esquisse pour les équipes où les concepteurs utilisant un espace de travail cloud partagé peuvent partager des idées, rester synchronisés avec Bibliothèques cloud partagées , vérifiez la progression des autres projets d'équipe et laissez 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 en utilisant Esquisse pour les équipes .

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 examen et de transmettre facilement des spécifications aux développeurs. Toutes ces fonctionnalités sont actuellement en bêta .

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

Développeur Handoff

La transmission des conceptions aux développeurs est une étape cruciale, et Adobe XD et Sketch le gèrent également 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 XDet+1 à Sketchpour 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 de conception plus efficacement. Sketch a récemment intégré ces fonctionnalités dans Esquisse pour les équipes . Avec Nuage de croquis , les concepteurs peuvent partager des fichiers de conception et Bibliothèques qui facilitent le travail avec des systèmes de conception dans des équipes distribuées.

Adobe XD dispose également d'un système de gestion des versions de fichiers 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 fichier sont également automatiquement supprimées après 30 jours, à moins qu'elles ne soient 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 des 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 faciliter la gestion des versions des fichiers et les bibliothèques partagées dans le cloud.

Mode sombre

A l'air superbe et fait ressortir les designs

De nombreux designers préfèrent travailler dans des pièces faiblement é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 frappant.

Le mode sombre est non seulement superbe, mais il est connu pour minimiser ' fatigue oculaire numérique . » Regardons les choses en face, les concepteurs regardent les écrans presque toute la journée. La fatigue oculaire numérique est une maladie courante qui affecte des millions de personnes. Causé par tout, de l'utilisation excessive de l'ordinateur à une exposition régulière à une lumière vive, il peut causer des maux de tête, des douleurs au cou, une vision trouble 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 applications globales de macOS Mojave Accent et Surligner préférences de couleur. Les options sélectionnées qui sont mises en surbrillance dans le panneau Calques, dans l'inspecteur et ailleurs dans l'application correspondent aux préférences du système.

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

➠ +1 à Sketch pour le mode sombre.

Le gagnant d'Adobe XD vs 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, même s'il comporte des limitations considérables.

nœud js vs performances java

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 que le déplacement des fichiers de conception de XD vers Sketch n'est pas possible . 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 tels que Abstrait ou Artisanat InVision , mais cela peut être évité avec un peu de nettoyage.

Certains concepteurs aiment Adobe XD pour ses Auto-animé fonctionnalité. C'est une fonctionnalité attrayante qui donne aux prototypes une belle apparence. Cependant, les concepteurs doivent garder à l'esprit que ce n'est que un attribut de fantaisie. Compte tenu des avantages de Sketch par rapport à XD, les compromis n'en valent pas la peine. Beaucoup sophistiqué outils de prototypage 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 en bénéficieront à mesure que davantage de fonctionnalités seront ajoutées aux deux outils de conception. Cela rendra leur travail quotidien beaucoup plus facile, et c’est quelque chose à espérer.

---

Dites-nous ce que vous en pensez! Veuillez laisser vos pensées, commentaires et commentaires ci-dessous.

• • •

Lectures complémentaires sur le blog ApeeScape Design:

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

Comprendre les bases

Adobe XD est-il meilleur que Sketch?

Il y a un débat en cours entre Adobe XD et Sketch pour savoir quel outil de conception est le meilleur. Lorsque vous comparez les fonctionnalités, les choses sont relatives, mais à bien des égards, il est préférable de travailler avec Sketch, surtout si un concepteur travaille sur macOS. Cependant, Sketch ne s’exécute pas sous Windows. Dans ce cas, l’utilisation d’Adobe XD est donc un choix évident.

Adobe XD peut-il ouvrir les fichiers Sketch?

Adobe XD peut ouvrir des fichiers Sketch et les convertir en fichiers XD. Une fois les fichiers Sketch convertis, ils deviennent modifiables dans XD et les concepteurs peuvent les utiliser comme n'importe quel autre fichier Adobe XD. Cependant, seuls les fichiers Sketch créés à l'aide de la version 43 de Sketch ou de versions plus récentes peuvent être ouverts dans XD.

Adobe XD va-t-il tuer Sketch et InVision?

On peut se demander si XD va tuer Sketch et d'autres outils comme InVision ou Figma. Chaque outil de conception a ses forces et ses faiblesses, et certains concepteurs préféreront des outils différents. Un facteur décisif peut être le système d'exploitation sur lequel l'outil s'exécute (macOS vs Windows), ou s'il s'agit d'une application autonome par rapport à un outil Web.

Adobe XD est-il facile à utiliser?

La plupart des concepteurs ont déjà utilisé une application Adobe. Ils connaissent l'interface utilisateur: le panneau d'outils à gauche, le canevas principal au centre et des éléments tels que les calques à droite. La courbe d'apprentissage est légère et se produit principalement autour de l'intégration de systèmes de conception complexes et de la compréhension des remplacements de composants principaux.

Dois-je apprendre Adobe XD ou Sketch?

Si vous concevez sur macOS, il est fortement recommandé d'investir du temps dans l'apprentissage de Sketch vs Adobe XD. Sketch dispose d'une large base de fans dédiés, regorge de fonctionnalités et dispose d'un vaste écosystème de plugins. C'est l'outil de conception de facto sur macOS, et un concepteur devrait le connaître pour la plupart des travaux de conception.

Est-ce que Sketch est difficile à apprendre?

Le croquis n'est pas difficile à apprendre. La plupart des concepteurs ont utilisé une variété d'outils de conception numérique avant Sketch, et l'interface sera très familière. Pour ceux qui débutent dans la conception, les métaphores de Sketch pour le plan de travail, les calques et les outils deviendront faciles à comprendre et à utiliser immédiatement.