Versions d’août et d’octobre 2019 d’Adobe XD
xd-mnemonic

Adobe XD est un outil vectoriel permettant le design et le prototypage d’expérience 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 23

La version d’octobre 2019 d’Adobe XD inclut les améliorations suivantes : 

Effets de fusion

À partir de la version XD 23.0, vous pouvez appliquer des effets de fusion non destructifs pour styliser vos images ou vos actifs graphiques. Utilisez les effets de fusion pour transformer vos conceptions en modifiant la façon dont les couleurs des objets se mélangent à celles des objets sous-jacents et regardez vos conceptions prendre vie !

Pour plus d’informations sur l’application des effets de fusion, consultez la section Application d’effets de fusion.

Décalage et redimensionnement de décalage

À partir de la version XD 23.0, vous pouvez combiner ces raccourcis clavier avec les touches de direction pour contrôler avec précision la position et la taille des éléments de l’interface utilisateur par incréments de taille de grille.

  • Maj + Flèches : déplace la sélection par incréments de 10 px.
  • Cmd + Flèches : redimensionne la sélection par incréments de 1 px (l’élément est épinglé dans le coin supérieur gauche).
  • Cmd + Maj + Flèches (Mac) et Alt + Maj + Flèches (Win) : redimensionne la sélection par incréments de 10 px (l’élément est épinglé dans le coin supérieur gauche).

Lorsque la grille carrée est activée :

  • Maj + Flèches : déplace la sélection pour l’aligner sur la grille d’abord, puis la déplace par incréments de taille de grille.
  • Cmd + Maj + Flèches (Mac) et Alt + Maj + Flèches (Win) : redimensionne la sélection pour l’aligner sur la grille, puis la redimensionne par incréments de taille de grille (l’élément est épinglé dans le coin supérieur gauche).

Sélection au travers de calques qui se chevauchent

XD 23.0 étend le comportement du raccourci clavier Cmd + Clic ou Ctrl + Clic afin de descendre dans la hiérarchie selon l’axe Z des objets sur la zone de travail, ainsi que dans les spécifications techniques.

Si plusieurs calques sont empilés les uns sur les autres, Cmd + Clic ou Ctrl + Clic sélectionne l’objet suivant sous le calque sélectionné. Lorsque vous atteignez le dernier calque, utilisez le même raccourci clavier pour revenir au premier calque du dessus.

Pour afficher et inspecter les calques masqués sous un calque partiellement superposé dans les spécifications techniques, survolez et faites un clic droit sur la zone spécifique du plan de travail. La liste des calques et leurs informations contextuelles à ce point de pixel s’affichent. Vous pouvez également utiliser cmd + clic pour effectuer une analyse en profondeur de manière séquentielle et consulter les propriétés des calques.

Pour plus d’informations sur l’accès aux calques qui se chevauchent, consultez la section Redimensionnement et rotation d’objets.

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

Temps de visionnage : 3 minutes 20 secondes


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.

Temps de visionnage : 4 minutes 30 secondes


Fragments de code CSS dans les 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.

Temps de visionnage : 2 minutes 58 secondes


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 le composant principal et cliquez dessus avec le bouton droit pour utiliser l’option Ajuster les limites au contenu. Les limites des composants sont ajustées pour afficher tous les objets découpés dans les composants principaux ainsi que les occurrences.

Si vous créez de nouveaux composants :

  • 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

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.  

Réduction des pixels fractionnels
Réduction des pixels fractionnels

Temps de visionnage : 3 minutes 20 secondes


Basculement entre le mode Grille et le mode Flux

Pour obtenir une vue holistique de votre flux de conception avec les informations de disposition du plan de travail, cliquez sur le nom du prototype ou des spécifications techniques dans l’angle supérieur gauche de votre écran. Du mode Grille par défaut, vous pouvez également choisir de basculer entre les modes Grille et Flux pour afficher ce qui suit :

  • Le mode Grille affiche tous les plans de travail présentés dans un format de grille que vous pouvez inspecter ou naviguer jusqu’à un plan de travail.
  • Le mode Flux établit le plan de travail pour représenter la hiérarchie de conception et de mise en page.
Mode Grille
Mode Grille
Mode Flux
Mode Flux

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

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