Versions d’août 2019, d’octobre 2019 et de novembre 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 24

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

Collaboration en temps réel avec la cocréation (Beta)

La cocréation (Beta) vous permet de collaborer en temps réel avec d’autres designers et d’accélérer ainsi votre flux de travaux et d’éliminer le travail en double ou en conflit. Vous pouvez voir les avatars d’autres utilisateurs qui modifient le même document et les modifications sont diffusées à tous en temps réel.

Avec la cocréation, vos équipes de conception peuvent travailler plus rapidement et conserver une source fiable unique pour tout un projet de conception.

Les fonctionnalités Beta sont de nouvelles fonctionnalités disponibles pour les utilisateurs de XD afin que ceux-ci puissent les tester et donner leur avis pendant que nous travaillons à les rendre opérationnelles. Les fonctionnalités Beta peuvent présenter des problèmes de qualité et de performances.

1

Pour plus d’informations, consultez la section cocréation de conceptions.

Ajout d’éléments interactifs avec états des composants

Vous pouvez utiliser les états des composants pour concevoir des variantes pour différentes interactions utilisateur. Par exemple, vous pouvez concevoir un composant de bouton, puis créer différents états du composant lorsque vous survolez un bouton ou appuyez dessus. 

Plus besoin de créer ni de relier plusieurs plans de travail pour présenter des interactions complexes !  

Quand vous avez un composant avec des états, vous pouvez maintenant utiliser le déclencheur Survoler en mode Prototype pour spécifier un effet de survol lorsque vous placez un curseur sur un élément de conception particulier.

Vous pouvez maintenant ajouter des niveaux supérieurs d’interactivité à votre prototype !

Components-Hero

Gestion des révisions de conception avec l’historique des documents

Vous pouvez maintenant utiliser l’historique des documents pour parcourir l’historique des sauvegardes effectuées pendant que vous travailliez sur un document en ligne. Parfois, vous avez également la possibilité de revenir à une version précédente et de rétablir les dernières modifications apportées à votre document XD. 

Pour restaurer une version précédente, ouvrez une version du document à partir de l’historique du document, puis copiez et collez le contenu dans votre version actuelle. 

Avec la puissance de la cocréation, cela vous permet de travailler en collaboration avec vos concepteurs et de voir l’évolution de vos documents dans le temps.

history_xd

Pour plus d’informations, consultez la section Gestion des révisions de conception.

Création de prototypes réalistes utilisant plusieurs interactions

Désormais, en mode Prototype, vous pouvez spécifier plusieurs interactions de prototypage pour un seul et même élément de conception ou objet.

Faites glisser plusieurs liens à partir d’un même élément afin d’ajouter des interactions pour les différents déclencheurs, par exemple Appuyer ou Faire glisser, sans dupliquer les objets ou les plans de travail.

Plus aucunes interactions éparses ! 

Multiple-trigger

Pour plus d’informations, consultez la section Création de prototypes interactifs | Vue d’ensemble.

Titre: Diverses Interactions

Temps de visionnage: 4 minutes


Accès aux plug-ins à partir du gestionnaire de plug-ins remanié

Le panneau Plug-ins remanié permet aux utilisateurs de parcourir, découvrir et installer des plug-ins pour XD.  Vous pouvez parcourir différentes catégories et collections de plug-ins, rechercher des plug-ins ou des termes spécifiques et afficher des profils enrichis pour chaque plug-in avec, notamment des captures d’écran, des descriptions, une prise en charge linguistique, etc.

Gestionnaire de plug-ins
Gestionnaire de plug-ins remanié

Pour plus d’informations, voir Plug-ins pour Adobe XD.

Titre : Gestionnaire de plug-ins reconçu

Temps de visionnage: 2 minutes


Partage et collaboration avec l’expérience de partage repensée

Le nouveau mode Partage regroupe en un emplacement centralisé plusieurs fonctionnalités de partage différentes et vous permet de partager vos conceptions et de collaborer aisément avec des collègues designers. Combiné aux paramètres prédéfinis intégrés tels que Examen de la conception et Développement, il vous donne un contrôle total sur la façon dont vous gérez ou mettez à jour les liens partagés.

Poursuivez votre lecture pour en savoir plus sur les avantages du nouveau mode de partage.

  • Gestion de plusieurs liens publiés : Affichez tous les liens publiés à partir du sélecteur d’URL. Poursuivez et modifiez les liens ou même mettez à jour facilement vos liens de conception existants !
  • Paramètres prédéfinis à choisir lors de la publication : Accédez à des paramètres prédéfinis pratiques basés sur des scénarios, tels que Examen de la conception, Développement, Présentation, Tests utilisateur et Personnalisation dans le menu Affichage des paramètres. Vous n’avez plus besoin de sélectionner plusieurs options ou cases à cocher pour créer vos liens de conception ! XD fait tout en une fois !
  • Conservation de la même URL pour plusieurs paramètres prédéfinis et itérations  : Créez une URL unique et effectuez une itération ou changez votre Paramètres prédéfinis plusieurs fois !
  • Identification facile des plans de travail : Les plans de travail à publier sont mis en évidence dans la zone de travail afin que vous puissez facilement les repérer. Plus de liens ou d’écrans manquants dans vos liens publiés !
Mode Partage
Mode Partage reconçu

Pour en savoir plus, reportez-vous à la section Partage de designs et de prototypes.

Titre: Mode Partage

Temps de visionnage : 3 minutes


Ressources partagées avec une intégration améliorée des bibliothèques Creative Cloud

Vous pouvez maintenant accéder et parcourir Bibliothèques Creative Cloud, ajouter des actifs tels que des composants, des graphiques, des couleurs, des dégradés et des styles de caractère de XD à Bibliothèques Creative Cloud et les consommer directement depuis XD - et les utiliser directement dans des projets XD.

Vous pouvez également ajouter XD actifs à Bibliothèques CC et les utiliser dans d’autres applications Creative cloud.

Connectez des équipes créatives de votre entreprise avec des actifs partagées, telles que les couleurs de la marque, les graphiques, les logos et plus encore !

Bibliothèques Creative Cloud
Bibliothèques Creative Cloud dans XD

Pour en savoir plus, reportez-vous à la section Bibliothèques Creative Cloud dans XD.

Conversion des bibliothèques Sketch en ressources liées

Lorsque vous travaillez sur votre système de conception, vous pouvez à présent importer et réutiliser l’une de vos anciennes ressources Sketch.

Non seulement vos symboles et éléments Sketch sont convertis en composants XD, mais vous pouvez également les utiliser en tant que liens liés actifs.

1

Pour plus d’informations, voir Bibliothèques Creative Cloud.

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 compositions en modifiant la façon dont les couleurs des objets se mélangent à celles des objets sous-jacents et regardez vos compositions prendre vie !

Modes de fusion

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

Lorsqu’un quadrillage est activé :

  • 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).
Redimensionnement de décalage
Redimensionnement de décalage

Sélection au travers de calques qui se chevauchent

Mode Design

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. Une fois le calque souhaité atteint, vous pouvez utiliser le clavier pour le déplacer ou cliquer avec le bouton droit de la souris pour afficher le menu contextuel correspondant.

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. 

Sélection de calques qui se chevauchent
Sélectionner au travers de calques qui se chevauchent

Spécifications techniques

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 à la zone de travail. 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.