Pour obtenir un récapitulatif des fonctionnalités introduites dans les versions antérieures d’Adobe XD, consultez la section Résumé des fonctionnalités | Versions antérieures.
Adobe XD est un outil vectoriel permettant le design et le prototypage d’interfaces utilisateur pour le web et les applications mobiles. Basculez facilement entre la maquette fonctionnelle (wireframe), le design visuel, le design d’interactions, le prototypage, l’aperçu et le partage, le tout dans un même outil très puissant.
XD est fait pour tous les types de créateurs : designers UX/UI, designers d’interaction, designers d’expérience, designers produit, webdesigners, designers d’applications, designers visuels, entrepreneurs, etc.
XD améliore son intégration avec Adobe Photoshop en vous permettant d’ouvrir et de retoucher des images XD directement dans Photoshop et de les mettre à jour en temps réel. Lorsque vous modifiez et enregistrez les images dans Photoshop, XD enregistre le fichier aplati et place le bitmap dans XD au lieu du fichier modifié.
Pour en savoir plus, consultez la section Utilisation d’actifs externes
La dernière version de XD vous permet de lancer et d’interagir avec les plug-ins XD directement dans l’expérience utilisateur XD, parallèlement au canevas de conception. Comme les panneaux Calques et Actifs, le nouveau panneau Plug-ins offre un accès facile à la visualisation et à la modification des plug-ins depuis XD. Cela vous aide à maintenir le flux de création tout en travaillant sur vos conceptions XD.
Pour plus d’informations, consultez la section Affichage et installation de plug-ins.
Pour faciliter la traduction de conceptions en un site Web fonctionnel, vous pouvez copier les fragments de code CSS à partir des spécifications techniques et les coller dans votre code.
Le code CSS est généré automatiquement lorsque vous sélectionnez Web comme destination de sortie dans la fenêtre Partager pour développement lors de la publication des spécifications techniques. Lorsque vous publiez vos spécifications techniques, XD affiche automatiquement le fragment de code CSS du calque sélectionné.
Pour plus d’informations, consultez la section Inspection de spécifications techniques dans XD.
Les composants prennent en charge une variété de remplacements et se redimensionnent de manière transparente pour différentes tailles d’écran, mais peuvent être difficiles à utiliser lors de l’application d’effets ou de la réorganisation d’objets. Dans les versions précédentes de XD, le contenu était tronqué si vous ajoutiez un objet situé en dehors des limites du composant principal d’origine. Pour résoudre les problèmes liés aux limites des composants, sélectionnez un composant et cliquez dessus avec le bouton droit pour utiliser l’option Ajuster les limites au contenu.
Pour les nouveaux composants :
- Les nouvelles définitions de limites sont automatiquement appliquées,
- Les ombres et les flous sont rendus en dehors du cadre de sélection du composant, et
- La zone des limites correspond à tout le contenu du composant.
Lors de la conception d’écrans HiDPI, des pixels fractionnels entraînent un contenu déformé. À partir de la version XD 22.0, pour éliminer les frottements de conception et les distorsions d’image, XD arrondit les valeurs en pixels lors du redimensionnement de groupes d’objets, de composants et de masques d’image. Cependant, XD conserve les valeurs fractionnaires du contenu créé avant la version XD 22.0.
À partir de XD 21.0, le partage des liens de développement a été enrichi par l’inclusion d’informations interactives sur les prototypes avec les spécifications techniques. Cliquez sur l’icône Voir les spécifications 
dans le lien partagé pour basculer entre une vue des spécifications et une vue du prototype.
Dans les versions précédentes de XD, les designers partageaient deux liens différents pour le prototype et les spécifications techniques. Les développeurs devaient donc basculer entre les deux pour interpréter l’intention du designer, ce qui ne facilitait pas le travail collaboratif.
Les designers peuvent désormais communiquer plus efficacement l’objectif de leurs conceptions et fournir toutes les ressources nécessaires aux développeurs via un seul lien partagé. Les développeurs, quant à eux, pourront comprendre plus facilement les interactions et les comportements souhaités et gagner un temps précieux en évitant de passer constamment d’un lien vers des prototypes et spécifications techniques à l’autre.
A. Icône Voir les spécifications
Pour plus d’informations, consultez la section Navigation dans les spécifications techniques dans XD.
Avec XD 21.0, la vue de flux UX des spécifications techniques a été remplacée par la toute nouvelle vue en mode grille dans Adobe XD, offrant une navigation efficace. Avec la vue Grille pour les prototypes et les spécifications techniques, vos parties prenantes et développeurs peuvent accéder rapidement au plan de travail qui les intéresse.
Dans les versions précédentes de XD, tout utilisateur visionnant des prototypes devait cliquer sur chacun de ses plans de travail jusqu’à trouver celui qu’il cherchait.
Dans la vue Grille, les réviseurs peuvent :
- voir la représentation miniature de tous les écrans,
- compter le nombre de commentaires sur un plan de travail donné,
- rechercher un plan de travail par son nom,
- cliquer sur l’icône d’écran lié pour afficher tous les écrans liés pour un plan de travail donné.
Ces changements bénéficient aussi bien aux développeurs qu’aux parties prenantes :
- Développeur : remplacez le flux UX par une vue unifiée et simplifiée de tous les plans de travail.
- Partie prenante : naviguez dans les prototypes XD avec plusieurs écrans et passez aux parties du prototype qui vous intéressent.
A. Nombre de commentaires sur un plan de travail B. Cliquez sur l’icône d’écran lié pour afficher les écrans liés C. Écrans liés du plan de travail First Cards
Pour plus d’informations, reportez-vous aux sections Navigation dans les spécifications techniques dans XD et Utilisation des prototypes dans XD.
Pour éviter les modifications conflictuelles et la duplication des efforts sur un document en ligne, XD introduit un indicateur visuel qui avertit lorsque d’autres designers collaborent sur le même document en ligne. Les designers peuvent voir un avatar du profil des autres designers travaillant sur le même document en ligne.
Pour plus d’informations sur les fiches de présence des documents, consultez la section Documents en ligne dans XD.
Il arrive souvent que les réviseurs accèdent aux prototypes depuis un appareil mobile et souhaitent ajouter des commentaires et afficher les données saisies par les autres personnes travaillant sur le document.
Avec cette dernière version de XD, vous pouvez maintenant afficher et commenter les prototypes web à partir de votre appareil mobile ou du navigateur web de votre ordinateur de bureau. Les cycles de révision s’en trouvent accélérés et vos parties prenantes peuvent plus facilement fournir leurs commentaires dans les délais.
Pour plus d’informations, consultez la section Utilisation des prototypes dans Adobe XD.
À partir de XD 21.0, si vous avez un élément de texte avec plusieurs styles, vous pouvez survoler les portions d’un élément de texte. Les spécifications techniques mettent ensuite en évidence les portions de cet élément de texte dotées des mêmes styles, et vous pouvez accéder à leurs propriétés individuelles, comme c’était déjà le cas. Auparavant, lorsque vous utilisiez plusieurs styles de texte dans un élément de texte, vous ne pouviez pas à isoler ces styles et identifier les portions utilisant le même style.
Pour plus d’informations, consultez la section Inspection de spécifications techniques dans XD.
Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.