Prototypage XD productif - Un didacticiel sur les composants Adobe XD

Le système de composants d'Adobe XD offre aux concepteurs des fonctionnalités puissantes pour prototyper des produits numériques. Cependant, il n'est pas sans bizarreries et nécessite des soins particuliers. L'utilisation de raccourcis intelligents et le respect des meilleures pratiques permettront aux concepteurs de rationaliser leurs workflows de prototypage XD.

Depuis son déploiement public officiel fin 2017, Adobe XD a fait de grands progrès pour devenir un outil de wireframing et de prototypage hautement compétitif pour les concepteurs UX. En particulier, son nouveau système de composants élargit le type d'interactions avec lesquelles les concepteurs peuvent expérimenter. Pourtant, les composants ne sont pas sans bizarreries et inconvénients. Lorsque vous travaillez avec des composants XD, il est utile d'adopter un ensemble de pratiques de flux de travail pour éviter les tâches fastidieuses et exploiter tout le potentiel du système.

Que sont les composants Adobe XD ?

Les composants XD sont des regroupements réutilisables d'éléments, tels que du texte, des formes ou des lignes. Un composant a un « composant principal » qui sert de parent et des « instances » ou des enfants qui sont placés sur la planche graphique. Lors de la modification du composant principal, les modifications se propagent à toutes ses instances.

Remplaçant l'ancien système de « symboles » de XD, qui servait un objectif similaire, les composants offrent un différenciateur clé . Ils peuvent avoir plusieurs états qui répondent à différentes entrées définies dans le mode prototype de XD. Par exemple, un bouton peut avoir un état par défaut mais changer d'apparence lorsqu'il est survolé ou cliqué. Il peut jouer un son lorsqu'on clique dessus ou même changer son apparence en fonction des entrées de la reconnaissance vocale.

Le système de composants est un gain de temps mais nécessite un soin particulier. Une approche réfléchie et un flux de travail soigneusement préparé sont nécessaires pour tirer parti de la puissance du système.

Une connaissance d'Adobe XD est recommandée

Les concepteurs connaissant assez bien Adobe XD tireront le meilleur parti des conseils et suggestions suivants. Pour prendre une longueur d'avance, téléchargez le kit de conception Adobe XD à partir de la page d'accueil Material Design de Google. Le kit fournira un ensemble de composants Adobe XD à expérimenter et à déconstruire.

Astuce #1 - Tenez compte de tous les états avant de créer un composant

Lors de la création d'un composant avec des états pour la première fois, les concepteurs doivent comprendre comment les modifications potentielles apportées à un composant peuvent affecter d'autres instances. Pour illustrer, considérons un menu déroulant avec plusieurs états :

• L'état par défaut : le menu est réduit
• Un état de survol : la couleur du contour peut changer lorsque le curseur est dessus
• Un état développé, cliqué : les options du menu déroulant sont affichées

Lors de la modification de l' état par défaut d'une instance enfant d'une liste déroulante, ces modifications ne se propageront pas aux états survolé ou cliqué . Des modifications doivent être apportées à l'état par défaut dans le composant principal pour mettre à jour les états de survol ou de clic de toutes les instances.

Bien qu'il puisse être tentant de se lancer et de commencer à itérer sur Main Components , des problèmes inattendus surviennent parfois en raison des différences de comportement entre les composants parent et enfant.

Une bonne pratique consiste à considérer et à anticiper tout ce qui est nécessaire dans l'état par défaut du composant principal avant d'ajouter d'autres états ou d'instancier le composant, allant même jusqu'à disposer les différents états côte à côte.

Les concepteurs doivent également garder à l'esprit qu'ils peuvent ajouter et modifier des éléments dans des états autres que ceux par défaut du composant principal ou des instances enfant sans affecter l'état par défaut, mais l'inverse n'est pas vrai.

Une recommandation pour Adobe : donnez aux états des composants une fonction de verrouillage afin que les concepteurs puissent conserver intacts les états autres que ceux par défaut et empêcher la propagation des modifications apportées à l'état par défaut du composant principal.

Astuce n ° 2 - Nommer les composants lors de la création

La création d'un composant (cliquez avec le bouton droit sur un élément, puis sélectionnez "Créer un composant" dans le menu, ou appuyez sur Cmd-K sur Mac/Ctrl-K sur PC) ajoute le composant au panneau Actifs dans la barre latérale gauche. XD donnera au composant un nom par défaut de "Composant XX" (où "XX" est un nombre). Il n'est pas très descriptif, il serait donc préférable de lui donner un nom unique et consultable.

Pourquoi le faire? Au fur et à mesure que la liste des composants se remplit, elle deviendra difficile à manier si les composants commencent tous par le même nom par défaut et un numéro sans signification. Bien que l'option "vue en mosaïque" soit utile, elle n'a pas d'étiquettes de texte, ce qui rend l'identification visuelle lente et difficile. La « vue en liste » avec de petites vignettes rend également difficile l'identification des différences entre les composants aux noms indéchiffrables. Les composants peuvent et seront perdus. Les rendre consultables en les nommant vous fera gagner du temps plus tard.

Une recommandation pour Adobe : lors de la création d'un composant, sélectionnez-le automatiquement et concentrez l'utilisateur sur le panneau Assets->Components pour le renommer ou faire apparaître une fenêtre de nommage. Il serait également utile de permettre de basculer cette fonctionnalité dans les Préférences.

Astuce n ° 3 - Gardez les composants principaux organisés

Lors de la création d'un composant, il est facile de placer accidentellement le composant principal sur un plan de travail. Bien que XD fournisse des outils pour trouver les composants principaux (soit en recherchant dans le panneau Actifs, soit en cliquant avec le bouton droit de la souris et en sélectionnant "Modifier le composant principal" à partir d'une instance enfant), il est trop facile d'apporter des modifications involontaires au composant principal tout en pensant qu'il s'agit d'une instance. Cela peut entraîner de nombreux changements indésirables sur plusieurs plans de travail.

Même s'il n'y a qu'une poignée d'instances de composants sur un plan de travail, les choses peuvent rapidement devenir incontrôlables une fois qu'un plan de travail est cloné. Une modification involontaire du composant principal peut allonger le temps de nettoyage qui aurait pu être évité.

Il est préférable de prendre l'habitude d'éloigner les composants principaux des plans de travail de conception dès la création . Une façon idéale de le faire serait de placer les composants principaux sur la table de montage dans le fichier XD ou sur des plans de travail clairement étiquetés et dédiés. Cela rendra les choses plus efficaces plus tard.

Une recommandation pour Adobe : Envisagez une invite lorsque vous apportez des modifications au composant principal afin que les concepteurs soient avertis que les modifications pourraient se propager aux instances enfants.

Astuce #4 – Restez organisé avec le panneau Calques

Il est facile d'essayer des idées sur le plan de travail et d'entrer dans le flux de regroupement/dissociation des composants et de modification des propriétés des états des composants. La tentation peut être forte de minimiser la barre latérale gauche pour avoir plus d'espace de travail. Cependant, il y a de fortes chances que les états et les transitions des composants ne se comportent pas comme prévu dans la vague d'itérations. Cela peut se produire parce que l'organisation et le regroupement des sous-éléments (tels que les formes, les vecteurs ou le texte) se sont éloignés de ce qu'ils devaient être pour que les transitions fonctionnent correctement.

La vue Layer offre une transparence à 100% dans la hiérarchie et la dénomination des éléments, et son organisation hermétique est vitale. L'utilisation de la puissante transition Auto-Animate de XD entre les états nécessite que les éléments aient le même nom et la même position dans la hiérarchie des calques d'un composant. Sinon, la transition sera par défaut un fondu au lieu d'une animation automatique attrayante.

Parfois, il peut être souhaitable de supprimer une propriété de l'interpolation lors de l'animation automatique des transitions. Pour ce faire, les concepteurs peuvent renommer un élément dans un état de composant ou un plan de travail différent pour rompre le lien basé sur le nom.

Dans les deux cas, la vue Couches peut être utilisée pour dépanner lorsque des problèmes inattendus surviennent . Cela devrait être la première étape lors du débogage des problèmes de prototypage, qu'il s'agisse d'une transition entre les états des composants ou entre les plans de travail.

Astuce #5 – Utilisez Alpha Fading pour interpoler les couleurs

Auto-Animate est un excellent ajout à XD, mais comporte des limitations et des idiosyncrasies. L'une de ces bizarreries devient évidente lors du changement de couleur d'un élément entre deux états de composants ou plans de travail à l'aide de l'animation automatique. Au lieu d'une interpolation douce entre les deux couleurs, elle change brusquement lors du test.

La solution de contournement actuelle est légèrement gênante et a des ramifications sur la façon dont les états du composant principal doivent être organisés. Cela implique d'ajouter deux objets avec des couleurs différentes au lieu d'un, puis de fondre les alphas sur les deux objets dans les deux états pour obtenir une transition en douceur. La transition de fondu par défaut peut fonctionner, mais si vous interpolez des formes et des tailles avec l'animation automatique, un fondu peut ne pas suffire.

Astuce #6 – Tirez parti des composants dans une grille de répétition

La grille de répétition est une autre excellente fonctionnalité de gain de temps dans XD qui facilite l'organisation et la maintenance de tableaux d'éléments similaires. Comme les composants, les grilles de répétition ont une relation hiérarchique où le premier élément dans le coin supérieur gauche de la grille est le « parent » qui définit les propriétés des éléments « enfants ». (Il existe des exceptions à cela : les bitmaps peuvent être uniques pour un élément enfant, tout comme les chaînes de texte, mais pas les propriétés de texte.)

Cependant, lorsque vous utilisez des composants dans des grilles de répétition, les choses changent.

Lorsque vous travaillez normalement avec des grilles de répétition, les modifications apportées au parent se propagent immédiatement à ses enfants. Cependant, les modifications du composant principal ne se propagent aux enfants dans une grille de répétition que s'il n'y a pas de substitution de propriété locale . En d'autres termes, la modification de la propriété d'un composant dans la grille le « verrouille » contre les modifications se propageant à partir du composant principal.

Pour propager les modifications à partir d'un parent qui est également un composant dans une grille de répétition, redimensionnez la grille jusqu'au parent uniquement. Cela supprime ses enfants. Ensuite, faites glisser les poignées vers les dimensions souhaitées pour mettre à jour les enfants.

Une fois que les concepteurs peuvent contourner les particularités des composants et des grilles de répétition, les combiner peut être puissant.

Astuce #7 - Supposons que les transitions d'état des composants basées sur le temps n'existent pas (pour l'instant)

Lorsque vous appliquez des transitions entre des plans de travail à l'aide de délais basés sur le temps (non basés sur l'entrée), il est naturel de supposer que la même chose est disponible entre les états des composants. Malheureusement, ce n'est pas le cas. Tous les changements d'état basés sur les composants doivent être basés sur les entrées de l'utilisateur ou les interactions en mode prototype, et non sur le temps.

Une recommandation pour Adobe : Ajoutez une option de transition basée sur le temps aux composants afin que leurs états puissent s'animer indépendamment de l'entrée de l'utilisateur.

Astuce #8 – Soyez minutieux lors du clonage des hiérarchies des composants principaux

Cette dernière astuce est plus un cas limite que les concepteurs XD ne rencontrent pas souvent, mais dont ils doivent être conscients .

Supposons un scénario où le composant principal a besoin d'une variation qui conserve toujours la qualité « un-à-plusieurs » des enfants héritant des propriétés, mais n'affecte aucun composant enfant existant. Pour créer une nouvelle hiérarchie de composants parents, un composant instancié doit être dissocié et reconstruit à partir de zéro. Le dégroupement des composants entraînera également la perte de tous les états et propriétés de transition configurés en mode Prototype. Voici une solution :

• Clonez une instance du composant pour chaque état du composant.
• Définissez l'état de chaque instance sur un état différent.
• Parcourez et dissociez chaque instance de composant.
• Commencez à apporter les modifications et modifications souhaitées à chaque instance de composant.
• Recréez le nouveau composant principal.
• Passez en mode prototype et recréez les interactions et les types de transition qui ont été mis en place auparavant.

Une recommandation pour Adobe : lorsque vous cliquez avec le bouton droit sur le composant principal dans le panneau Actifs, fournissez une option de menu "dupliquer".

Prototypage avec les composants Adobe XD : les points à retenir pour réussir

Adobe XD a apporté des améliorations significatives en termes de fonctionnalité et d'utilité au cours des dernières années. Il est devenu une alternative valable et compétitive à Sketch et à d'autres outils de prototypage établis. En fonction de l'évolution de l'outil depuis ses débuts, de nombreuses autres améliorations sont probablement en cours.

En particulier, le système de composants Adobe XD a un excellent potentiel pour améliorer et développer les types d'interactions que les concepteurs peuvent créer.

Voici quelques points clés à retenir :

• Comprenez comment les modifications se propagent entre les composants principaux et les instances enfants.
• Soyez conscient de la façon dont les composants interagissent avec les autres fonctionnalités d'Adobe XD, telles que l'animation automatique et la grille de répétition.
• Efforcez-vous d'adopter des pratiques de flux de travail cohérentes pour gagner du temps, telles que nommer les composants et conserver une zone de montage du composant principal distincte dans le fichier XD.

Être conscient des particularités de l'utilisation des composants Adobe XD, tout en maintenant un flux de travail discipliné, optimisera la productivité de la conception. Cela évitera un nettoyage et une maintenance inutiles et donnera aux concepteurs XD un avantage d'efficacité lors du prototypage de produits numériques.

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 :

• Adobe XD contre Sketch – Confrontation 2020
• Concevoir avec précision – Une revue Adobe XD
• Exploration de la conception multimodale - Un didacticiel Adobe XD
• Mythes UX - Prototypage, tests utilisateur et livrables UX
• Perfectionnez votre processus de conception UX - Un guide pour la conception de prototypes