Versions de juin et juillet 2019 d’Adobe XD.

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.

xd-mnemonic

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.


Overview

Nouvelles fonctionnalités d’Adobe XD 22

Modifications dans Photoshop

Modifications dans Photoshop

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

Pour en savoir plus sur la modification d’une image XD dans Photoshop, regardez cette vidéo.

Temps de visionnage : 3.20 minutes.


Amélioration du panneau des plug-ins

Panneau des plug-ins

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 en savoir plus sur les améliorations du panneau des plug-ins, regardez cette vidéo.

Temps de visionnage : 4.30 minutes.


Fragments de code CSS dans spécifications techniques

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é.

Fragments de code CSS
Fragments de code CSS

Pour plus d’informations, consultez la section Inspection de spécifications techniques dans XD.

Pour en savoir plus sur les fragments de code CSS dans les spécifications techniques, regardez cette vidéo.

Temps de visionnage : 2.58 minutes.


Améliorations dans les limites des composants

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.
Ajuster les limites au contenu
Ajuster les limites au contenu

Pour en savoir plus sur les améliorations dans les limites des composants, regardez cette vidéo.

Temps de visionnage : 4 minutes.


Réduction des pixels fractionnels

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.  

Pour en savoir plus sur les améliorations des pixels fractionnels, regardez cette vidéo.

Temps de visionnage : 3.20 minutes.


Nouvelles fonctionnalités d’Adobe XD 21

Partage unifié pour les liens de développement

À 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. 

Basculer entre les spécifications techniques et le prototype à partir d’un seul lien
Basculer entre les spécifications techniques et le prototype à partir d’un seul lien

A. Icône Voir les spécifications 

Pour en savoir plus sur les liens de partage unifié pour le développement, regardez cette vidéo.

Temps de visionnage : 2,55 minutes.


Pour plus d’informations, consultez la section Navigation dans les spécifications techniques dans XD.

Affichage en mode grille pour les liens partagés

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. 

Affichage en mode grille pour les liens partagés
Comparaison entre le flux US et la vue Grille pour le lien vers les spécifications techniques

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.
Affichage en mode grille
Affichage en mode grille

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 en savoir plus sur l’affichage en mode grille pour les liens partagés, regardez cette vidéo :

Temps de visionnage : 2,13 minutes.


Pour plus d’informations, reportez-vous aux sections Navigation dans les spécifications techniques dans XD et Utilisation des prototypes dans XD.

Fiche de présence du document

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.

Fiche de présence du document en ligne
Fiche de présence du document

Pour plus d’informations sur les fiches de présence des documents, consultez la section Documents en ligne dans XD.

Commenter les prototypes web mobiles

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.

Commenter les prototypes web mobiles

Pour en savoir plus sur les commentaires concernant les prototypes web mobiles, consultez cette vidéo :

Temps de visionnage : 3 minutes.


Affichage et inspection pour une portion de texte

À 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

Attributs de portions dans un texte long
Attributs de portions dans un texte long

Outil Polygone

Ce produit est distribué sous licence Creative Commons Attribution - Pas d’utilisation commerciale - Partage à l’identique 3.0 non transposé  Les publications Twitter™ et Facebook ne sont pas couvertes par les dispositions Creative Commons.

Mentions légales   |   Politique de confidentialité en ligne