Sélectionner une page

Il y a beaucoup de discussions en cours (et de débats houleux) autour des logiciels que les concepteurs d’interface utilisateur devraient utiliser en 2020. Chez Osmova, l’équipe utilise Adobe XD depuis un certain temps maintenant, nous nous sommes donc plutôt familiarisés avec ses fonctionnalités, à la fois les bonnes et le mauvaises.

Adobe XD vs Figma


Il est incroyablement agile et a totalement transformé notre processus de conception, mais il y a toujours place à l’amélioration. Nous sommes toujours impatients de voir quelles autres options sont disponibles. L’un de ses principaux concurrents, utilisé par de nombreuses grandes agences de webdesign, est Figma. Nous l’avons testé de manière approfondie et voici le top 5 des choses que nous aimons dans chacun. Si vous souhaitez développez vos compétences avec adobe XD, suivez une formation adobe XD dispensée par notre webdesigner diplômé.

Adobe XD:

États des composants – XD et Figma ont tous deux des déclencheurs d’interaction et d’animation incroyablement puissants pour créer des prototypes haute fidélité entièrement fonctionnels. XD semble avoir récemment rattrapé Figma avec des fonctionnalités telles que sa fonctionnalité d’animation intelligente.

Cependant, un domaine dans lequel il est clairement en tête est ses options d’état multi-composants pour les commandes de clic, de survol et même vocales! XD vous permet d’ajouter de manière transparente des états d’interaction complexes pour tout ce dont vous avez besoin, qu’il s’agisse d’un simple état de clic sur un bouton ou d’un composant d’image que vous souhaitez développer en plein écran.

 Tout cela est possible dans un seul composant, il n’est pas nécessaire de créer plusieurs versions d’actifs pour créer cela de manière fonctionnelle. Vous pouvez réaliser des choses similaires dans Figma en utilisant des solutions de contournement et plusieurs doublons, mais c’est loin d’être aussi rapide ou simplifié.

Piles de couches– C’est un nouveau pour XD mais, pour être honnête, Figma a une fonctionnalité similaire depuis décembre 2019. XD a joué au rattrapage ici, mais il a été si bien exécuté qu’il vaut la peine de crier. En un mot, n’importe quel groupe de calques peut être transformé en une pile en un seul clic. XD détecte automatiquement la direction dans laquelle votre groupe se dirige (comme un carrousel horizontal par rapport à une liste verticale), puis vous permet de modifier le remplissage interne et l’espacement entre chaque élément.

 Il vous suffit de cliquer et de faire glisser dans l’espace entre n’importe quel élément pour regarder votre conception se développer et pousser tout contenu sous cet élément avec lui. Vous pouvez même utiliser des touches de modification pour faire correspondre l’espacement entre tous les autres éléments, ce qui est particulièrement utile pour ajuster l’espacement entre les grilles d’image, les éléments de texte et plus encore.

 Il s’agit littéralement de CSS flexbox intégré à votre outil de conception. Les implications en sont énormes. À plus petite échelle, vous pouvez avoir des boutons d’expansion automatique, en fonction de la taille de la copie.

 À plus grande échelle, vous pouvez modifier la taille des composants ou des paragraphes dans une mise en page, sachant que tous les autres éléments ci-dessous conserveront leur espacement relatif le long de la page. Déjà, nous avons eu du mal à revenir à l’ancienne façon de faire, comme coller du texte mis à jour à partir d’un client, puis devoir déplacer tous les autres éléments vers le bas pour l’adapter.

Aperçu– Celui-ci est un appel étroit entre Figma et XD. Figma a la possibilité de partager le canevas en direct à partir de n’importe quelle fenêtre de navigateur où les clients peuvent regarder votre curseur les guider, ce qui est vraiment utile. Même si XD ne dispose pas de cette fonctionnalité, la génération de liens de prévisualisation est assez robuste.

 À notre avis, la fonctionnalité qui fait avancer XD est sa capacité à créer des visites vidéo directement à partir de la fenêtre de prévisualisation où vous testez votre site Web, y compris la possibilité d’enregistrer le son du microphone pour les descriptions. Avec le manque actuel de réunions en face à face, de connexions Internet douteuses et de calendriers remplis à ras bord de Zooms, cela change la donne. 

C’est incroyablement utile et rapide, pouvoir envoyer une vidéo pas à pas à un client plutôt que de le faire via le partage d’écran où la résolution ne montre pas toujours vos conceptions sous leur meilleur jour.

Mises à jour – Étant donné que XD provient d’Adobe, notre équipe utilise déjà ses autres applications dans Creative Cloud. Toutes les applications fonctionnent ensemble de manière transparente et nous savons qu’Adobe prendra en charge XD à l’avenir. 

C’est formidable pour nous et nos clients également, car nous pouvons garantir que nos fichiers fonctionneront dans un avenir prévisible. Il existe un flux régulier de mises à jour logicielles qui assure la sécurité et la pérennité du logiciel, tout en gardant la parité avec ses concurrents.

Animation – L’animation intelligente de XD vous permet d’interpoler entre les charges plus de détails de conception que l’équivalent de Figma, y ​​compris les chemins, l’espacement des caractères, l’espacement des paragraphes, l’interligne, les coins arrondis et plus encore.

 La combinaison de l’animation intelligente avec les états des composants de XD signifie que vous pouvez faire des choses vraiment cool avec des formes de morphing, des éléments de transition et un type extensible. La possibilité d’utiliser une animation intelligente entre les états des composants et les plans de travail permet une telle flexibilité que nous avons à peine ressenti le besoin de lancer After Effects pour prototyper quoi que ce soit.

Figma:

logo Figma

Pagination – Dans Figma, vous pouvez organiser vos fichiers en pages, chaque page a sa propre toile avec son propre ensemble de plans de travail (cadres dans Figma). 

Ceci est incroyablement utile lorsque vous souhaitez garder les fichiers propres et ordonnés lorsque vous testez des choses. Si votre site est suffisamment complexe, vous souhaiterez peut-être avoir plusieurs versions / états d’un modèle d’une page et utiliser une page par modèle. Sinon, vous voudrez peut-être simplement avoir une section pour les mises en page approuvées par rapport aux tests. 

Vous pouvez en faire beaucoup, ce qui vous évite d’avoir à créer plusieurs versions d’un fichier juste pour tester les choses entre différents membres de l’équipe. Vous pouvez également conserver votre développement de conception dans des fichiers de cette manière, ce qui est utile pour les études de cas et les transferts, afin que les membres de l’équipe puissent voir comment la conception a progressé sans avoir à parcourir de nombreux fichiers différents.

Gestion du style– La gestion du style dans Figma est très robuste et flexible. C’est beaucoup plus intuitif que XD et se sent vraiment intégré à l’interface utilisateur. Dans XD, la gestion du style de texte ressemble à une gueule de bois du widget de la bibliothèque Photoshop CC, simplement poussé sur le côté gauche de l’interface utilisateur. 

Vous ne pouvez même pas voir votre fenêtre de calque en même temps que vos styles de texte! Dans Figma, la gestion des styles est placée de manière intuitive à côté des commandes d’édition. Vous pouvez cliquer sur n’importe quel élément et voir instantanément son style associé, vous pouvez le modifier ou le dissocier en un clic. 

Vous pouvez même utiliser des barres obliques pour créer des dossiers (comme «Desktop / Header1» ou «Mobile / Header 1») ​​de styles dans votre liste. Ceci est incroyablement utile pour les projets plus importants lorsque vous avez besoin d’une signalisation claire entre différents styles de type de point d’arrêt ou de listes séparées pour des polices distinctes. Contrairement à XD,

Gestion des composants – C’est là que Figma commence vraiment à briller en tant que produit sérieux au niveau de la conception de produits. Cela rend le regroupement, la catégorisation et l’édition de bibliothèques de composants massives très simples. 

Tout comme les styles de texte, vous pouvez utiliser des barres obliques pour créer des groupes et des sous-groupes de composants afin d’aider à donner un sens à des systèmes de conception vraiment volumineux et complexes. Dans XD, vous obtenez juste une liste géante de tous les composants, ce qui est beaucoup plus difficile à analyser.

Pour être honnête, XD a rattrapé de nombreuses fonctionnalités cette année, telles que la possibilité de composants imbriqués, de bibliothèques partagées et de remplacements, mais Figma a été conçu dans cet esprit et est tout simplement plus agréable à utiliser.

Interface utilisateur – Cela peut être une préférence personnelle, mais l’interface utilisateur de Figma semble plus intuitive. Vos couches sont toujours visibles sur la gauche, même si vous avez un widget de plugin ouvert ou que vous modifiez des styles. La barre de navigation en haut permet un accès rapide aux commandes de base. 

L’utilisation des listes déroulantes et la zone d’édition à droite ont des sections très clairement signalées. nous avons l’impression de passer beaucoup de temps dans XD à cliquer sur de minuscules boutons dans les coins pour accéder à des parties vraiment clés de l’interface utilisateur.

Collaboration – Figma a été conçu à partir de zéro avec la collaboration à l’esprit. Il est si facile de partager un lien avec un membre de l’équipe et de sauter dans un fichier ensemble. 

Inutile de leur demander s’ils ont synchronisé la dernière version d’un fichier ou de leur demander de «sortir» d’un fichier pour que vous puissiez y entrer. Chacun a une seule source de vérité et vous pouvez travailler ensemble dans un fichier sans ralentissements ou problèmes.

 C’était incroyablement cool de regarder le curseur d’un membre de l’équipe faire le tour de l’écran pour la première fois, sinon un peu effrayant! Vous pouvez également partager un lien avec les clients leur permettant de voir l’intégralité du canevas de conception, y compris votre curseur pour les procédures pas à pas. C’est formidable d’avoir la flexibilité de partager des aperçus de prototype pour l’interaction, ou des liens de canevas pour discuter des détails de conception généraux.

Conclusion.

En fin de compte, chaque équipe aura des besoins différents, mais les deux outils couvrent tous les besoins de base d’un concepteur. Si nous devions résumer, nous dirions que Figma est toujours le meilleur outil pour concevoir des applications et des produits SAAS complexes en raison de sa flexibilité et de ses puissants outils de collaboration.

Chez Osmova, nous concevons principalement des sites Web et des prototypes fonctionnels avec des animations lisses, qui sont la partie essentielle de ce processus. Les états intelligents d’animation et de composants de XD facilitent simplement le prototypage.

Dans cet esprit, Adobe XD est toujours le gagnant pour nous, mais c’est un jeu constant de chat et de souris. Dans quelques mois, qui sait quelle application sortira en tête ! Nous garderons les yeux ouverts pour surveiller de nouvelles mises à jour des deux solutions.

Pour tout renseignement sur nos services d’agence digitale à Montpellier. Contactez-nous via le chat de notre site web du lundi au vendredi de 9h00 à 18h00

Demander un devis Solutions Développement I Solutions Design Graphique I Solutions Marketing Digital I Blog