Adobe XD : mise à jour de mai 2019

Après l’ajout des documents basés dans le cloud dans XD en fin d’année dernière, nous avions évoqué plusieurs points, sur lesquels nous comptions travailler en 2019, dont la création et la gestion de systèmes de design.

Dans la nouvelle version de XD de mai, nous avons introduit plusieurs nouvelles fonctionnalités permettant de créer des documents basés dans le cloud contenant des couleurs, styles de caractères et composants réutilisables, de les partager facilement avec les autres membres de l’équipe pour qu’ils s’en servent dans leurs propres documents, et de gérer de façon centralisée l’actualisation des éléments de ces systèmes de design afin que chacun tire parti des actifs les plus récents.

L’objectif global de cette nouveauté est de faire en sorte que le passage de la conception d’éléments individuels à la création d’un ensemble complet d’actifs réutilisables se fasse le plus naturellement possible, afin de garantir la cohérence du design tout au long d’un projet en équipe.

Composants

Adobe XD comportait déjà des éléments réutilisables avec les symboles, mais ceux-ci présentaient certaines limites en termes de souplesse et d’adaptabilité. Dans cette version, les symboles sont purement et simplement remplacés par des composants, qui offrent davantage de possibilités. Vous pouvez créer un composant principal pour définir un élément réutilisable, par exemple un bouton, puis personnaliser des instances de cet élément en en modifiant les propriétés. Les modifications apportées à une instance sont propres à l’élément, mais celles apportées au composant principal sont répercutées dans toutes les instances dans lesquelles la propriété concernée n’a pas été personnalisée. À la fois très performant et extrêmement convivial, ce modèle est au cœur du concept des systèmes de design.

Les composants sont conçus pour permettre un redimensionnement réactif : quelle que soit l’instance, quand vous ajustez la taille du composant, XD gère automatiquement le positionnement et la mise à l’échelle de ses éléments constitutifs.

Les composants vont sans doute révolutionner vos méthodes de design dans XD, mais ce n’est qu’un début. Dans quelques mois, nous ajouterons la possibilité de définir plusieurs états de composant, d’animer les transitions d’un état vers un autre et de créer de robustes composants réutilisables avec des interactions. Nous étudierons aussi les possibilités de relier les composants de design à leurs équivalents de production.

Liaison des actifs

Le panneau Actifs permet de gérer les couleurs, styles de caractères et composants utilisés dans le document. Dans le cadre d’un système de design, vous pouvez désormais utiliser ce panneau pour gérer la collection d’éléments réutilisables à mettre à la disposition des autres designers de l’équipe.

Pour permettre à d’autres utilisateurs de tirer parti des couleurs, styles de caractères et composants que vous avez définis, il vous suffit de les inviter à accéder au document via l’option Partager > Inviter à modifier. Ils pourront ensuite lier votre document cloud aux leurs. Les couleurs, styles de caractères et composants seront alors ajoutés à leur document, et ils pourront tirer parti des éléments que vous avez créés et partagés. Chaque fois que vous modifiez le document source, ils seront avertis de la disponibilité de ces modifications et pourront choisir de les accepter dans leurs propres documents ; cela garantit que chacun utilise la dernière version des actifs.

Guides de style

Outre la possibilité offerte aux autres designers d’établir un lien avec votre document afin de pouvoir utiliser ses couleurs, styles de caractères et composants, vous devrez peut-être partager ces éléments avec les développeurs. En agençant les éléments du panneau Actifs sous forme de « feuille d’autocollants » dans votre document XD, vous pouvez publier votre système de design sur le web via l’option Partager > Partager pour développement. Les autres utilisateurs peuvent alors s’en servir comme référence pour les valeurs colorimétriques et attributs de style, et télécharger les actifs.

https://blogsimages.adobe.com/creative/files/2019/05/diagramme-du-syst%C3%A8me-de-design.png

Avec la possibilité de créer des composants robustes, de les associer à des couleurs et styles de caractères et de les partager avec les designers et développeurs, vous pouvez désormais créer et gérer des systèmes de design en toute simplicité dans XD. Nous continuons de développer diverses améliorations qui renforceront la maîtrise des autorisations de partage et la diffusion des modifications apportées aux éléments des systèmes de design.

Autres nouveautés et améliorations

Dans la version publiée ce mois, nous avons le plaisir d’introduire de nouvelles fonctionnalités et améliorations, dont la plupart font écho aux commentaires dont vous nous avez fait part.

Repères du plan de travail

Les repères peuvent désormais être ajoutés sur un plan de travail en les faisant glisser depuis le haut ou la gauche de ce plan : cela facilite l’alignement des éléments et leur positionnement homogène d’un plan de travail à l’autre.

Déclencheurs contrôlés par clavier ou manettes de jeu

Dans le cadre de notre recherche pour étendre le champ des appareils et plateformes pour lesquels vous pouvez créer des prototypes dans XD, nous sommes ravis d’annoncer la prise en charge de déclencheurs contrôlés par clavier ou manettes de jeu. Dans la nouvelle version de XD, vous pouvez désormais attribuer des déclencheurs contrôlés par clavier pour simuler des expériences sur poste de travail, et utiliser les manettes Xbox One et Playstation DualShock connectées comme sources pour simuler des interactions pour les expériences sur console.

Outil Polygone

Le nouvel outil Polygone accélère la création d’une multitude de formes : triangles, losanges, pentagones et autres polygones pouvant posséder jusqu’à 100 côtés. Associé à la fonction d’animation automatique, l’outil Polygone permet facilement de transformer les formes.

Majuscules, minuscules, casse de titre et texte barré

Les options de mise en forme permettent désormais de convertir le texte en majuscules, en minuscules ou en casse de titre, ainsi que de le barrer. Dans une prochaine version, nous ajouterons la prise en charge du texte en exposant et en indice.

Autorisations et partage

Enfin, dans le cadre du partage sécurisé de prototypes et spécifications de design uniquement sur invitation, il est désormais possible pour ceux qui disposent du lien, mais non de l’autorisation de consultation, de vous en demander l’accès. Vous pouvez alors consulter chaque demande et décider ou non d’autoriser l’accès à votre travail.

Des plug-ins supplémentaires pour étendre les performances de XD

L’écosystème de plug-ins de XD est en plein essor : il y en a désormais plus de 150. Pour vous faciliter la tâche, nous avons amélioré le gestionnaire de plug-ins : vous bénéficiez ainsi d’un résumé et de descriptions détaillées et pouvez rechercher des plug-ins à l’aide de mots-clés. Par ailleurs, nous avons annoncé le mois dernier le lancement d’Adobe XD Plugin Accelerator, un programme intensif de 90 jours offrant un financement et des ressources à ceux qui veulent donner vie à des idées de plug-ins répondant aux enjeux à venir du design.

Parmi les nouveaux plug-ins les plus intéressants, citons unDraw, pour ajouter de superbes illustrations dans un projet, Rotato pour la présentation des designs sur les écrans des appareils en 3D photoréaliste, et Maps generator, qui facilite et accélère l’insertion de cartes dans les designs. Pour plus d’informations sur les plug-ins disponibles, cliquez ici.

Communauté axée sur l’expérience utilisateur

Poursuivons la conversation ! Aidez-nous à façonner l’avenir d’Adobe XD en faisant part de vos attentes ou en signalant des bugs. Suivez-nous (@AdobeXD) pour rester au fait de l’actualité ou contactez l’équipe sur Twitter via #AdobeXD. Retrouvez-nous également sur Facebook, où nous partageons des vidéos et informations sur les mises à jour, et répondons à vos questions lors de sessions en direct.

#MadeWithAdobeXD

Si vous partagez vos prototypes sur Behance, pensez à les identifier avec le hashtag #MadeWithAdobeXD et à sélectionner Adobe XD sous « Outils utilisés ». Vous aurez peut-être la chance de figurer dans la newsletter d’Adobe XD.