Versions d’août, de septembre et d’octobre 2018, ainsi que de janvier et février 2019 d’Adobe XD
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.


Nouvelles fonctionnalités d’Adobe XD 19

Systèmes de conception dans XD

Systèmes de conception dans XD
Systèmes de conception dans XD

Lors de la conception de produits numériques à grande échelle, il est de plus en plus difficile et essentiel de rester cohérent. Sous la pression croissante de la vélocité du contenu, les entreprises recherchent des moyens de réagir plus rapidement lors de la conception et de la création d’expériences client - en maintenant la cohérence et en augmentant l’efficacité au sein d’un écosystème de plus en plus complexe de plates-formes et de terminaux.

Un système de conception réunit des équipes de produits multidisciplinaires (concepteurs, développeurs et parties prenantes) autour d’un langage visuel commun en fournissant des modèles de conception cohérents et robustes pouvant être réutilisés dans différentes combinaisons. Il réduit la dette de conception, accélère le processus de conception et établit des ponts entre les équipes travaillant de concert pour donner vie aux produits. Pour plus d’informations sur les systèmes de conception dans XD, consultez la section Systèmes de conception.

Pour en savoir plus sur les systèmes de conception dans XD, regardez cette vidéo.

Temps de visionnage : 1 minute.


Repères de plan de travail

Les repères de plan de travail personnalisés vous permettent d’aligner des éléments et des objets sans effort entre les plans de travail sans avoir à compter sur des règles. Vous pouvez créer des repères, ajuster leur position, les copier-coller sur plusieurs plans de travail ou les supprimer. Vous pouvez également verrouiller ou masquer la visibilité des repères. Pour plus d’informations sur la création de repères de plan de travail personnalisés, consultez la section Utilisation des plans de travail et des grilles.

Pour en savoir plus sur les repères de plan de travail, regardez cette vidéo.

Temps de visionnage : 1 minute.


Déclencheurs de clavier et de manette de jeu

Adobe XD vous permet désormais d’utiliser des raccourcis clavier et des déclencheurs de manette de jeu pour simuler des applications de bureau natives et des prototypes pour une expérience de jeu ou une conception plus riche. Lorsque vous reliez un prototype, vous pouvez sélectionner l’option Touches/Manette dans les options de Déclencheur et attribuer une touche de votre choix. Vous pouvez utiliser ces déclencheurs avec les déclencheurs Appuyer, Faire glisser, Heure et Voix afin de créer des prototypes pour différents cas d’utilisation tels que des applications de bureau, des jeux et des présentations. Pour plus d’informations sur l’utilisation de déclencheurs de clavier et de manette de jeu, consultez la section Prototype utilisant des déclencheurs de clavier et de manette de jeu.

Pour en savoir plus sur les déclencheurs de clavier et de manette de jeu, regardez cette vidéo.

Temps de visionnage : 1 minute.


Composants avec remplacements

 La dernière version d’Adobe XD vient de faire un bond en avant lorsqu’il s’agit de créer une expérience client complexe avec l’introduction de composants dans l’application. Les composants remplacent ce qui était autrefois des symboles et rendent la tâche de construire des éléments de conception répétés infiniment plus rationalisée et puissante. Désormais, il est rapide et facile de créer plusieurs variantes d’un composant (anciennement appelé symbole), de modifier ses propriétés et de remplacer toutes les propriétés courantes en même temps. Pour plus d’informations sur l’utilisation des remplacements dans les composants, consultez la section Remplacements de composants.

Pour en savoir plus sur les composants dans XD, regardez cette vidéo.

Temps de visionnage : 1 minute.


Actifs liés

En raison des surfaces de conception en constante augmentation, les concepteurs ont besoin d’un moyen simple de créer et de maintenir des conceptions cohérentes à grande échelle. 

Avec XD 19.0, vous pouvez facilement partager et consommer non seulement des composants (précédemment appelés symboles) mais également des couleurs et styles de caractère. Cela est extrêmement pratique si vous partagez une feuille d’autocollants avec votre équipe ou réutilisez des éléments de conception dans des projets.

Les actifs liés complètent le flux de travaux des composants liés. Lorsque vous modifiez un actif lié dans le document source, tous les documents consommateurs avec ces actifs liés reçoivent des notifications de mise à jour. De là, vous pouvez choisir de prévisualiser et accepter les mises à jour. Pour plus d’informations, consultez la section Utilisation des actifs liés.

Pour en savoir plus sur les actifs liés, regardez cette vidéo.

Temps de visionnage : 1 minute.


Outil Polygone

Avec la dernière version d’Adobe XD, vous avez encore plus de moyens d’exprimer votre vision avec le nouvel outil Polygone comportant jusqu’à 100 faces. Vous pouvez également modifier les formes de ces polygones pour obtenir la forme souhaitée. Vous pouvez maintenant être plus expressif lors de la création d’éléments d’interface utilisateur courants tels que des boutons, des pointeurs, des évaluations et d’autres icônes et graphiques de base. Pour plus d’informations sur la création de repères de plan de travail personnalisés, consultez la section Outils de dessin et de texte dans Adobe XD.


Majuscules, minuscules, première lettre des mots et barré

La dernière version d’Adobe XD comporte une plus grande expression créative en ce qui concerne les transformations de texte. Vous pouvez modifier les styles de texte en majuscules, minuscules, utiliser le texte barré et la casse de titres non seulement dans l’application de conception XD, mais également dans les aperçus web et mobiles. Cela serait utile pour aligner les styles de différentes zones de texte, telles que les titres de section, les messages d’erreur ou les étiquettes. Vous n’avez plus besoin de recourir à des artifices visuels pour réaliser ces transformations de texte. Pour plus d’informations sur les transformations de texte, consultez la section Outils de texte.


Redimensionnement réactif de composants

Avec la dernière version d’Adobe XD, vous pouvez combiner le meilleur des composants (anciennement « symboles ») et un redimensionnement réactif pour travailler avec des groupes d’objets sur la zone de travail. Le redimensionnement réactif vous permet de redimensionner des groupes d’objets tout en conservant leur placement et leur évolutivité. Tout ce que vous avez à faire est de redimensionner le groupe sur la zone de travail de conception et XD conserve l’espacement relatif en place. Les composants sont également redimensionnables et équipés des puissantes fonctionnalités de redimensionnement réactif. Pour plus d’informations sur l’utilisation du redimensionnement réactif dans les composants, consultez la section Redimensionnement des composants.


Demande d’accès à des prototypes privés et des spécifications techniques

Adobe XD facilite le partage de vos conceptions à l’aide de prototypes partageables et de liens de spécifications techniques. Vous pouvez désormais demander l’accès à un prototype ou à une spécification technique partagés de manière privée, et le propriétaire de la conception peut approuver ou refuser l’accès. Pour plus d’informations, consultez la section Demande d’accès aux liens privés.


Notifications de prototype vocal

Lorsqu’un prototype ne répond pas à une commande vocale, vous pouvez résoudre cette interaction à partir de l’application de prévisualisation de bureau - avec un aperçu visuel de ce que Adobe XD entend. Pour plus d’informations, consultez la section Résolution des problèmes d’interactions vocales.


Nouvelles fonctionnalités d’Adobe XD 18

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

Sélecteur de langue

XD fournit un robuste sélecteur de langue intégré dans l’application permettant de modifier la langue utilisée par XD. Avec cette nouvelle fonctionnalité, vous pouvez contrôler la langue dans laquelle vous souhaitez utiliser XD et ne pas être contraint à la sélection de langue du système d’exploitation. Les nouvelles préférences de langue seront préservées dans toutes les mises à jour XD.

Remarque :

Les options de changement de langue sont désactivées pour les utilisateurs de Creative Cloud abonnement Équipe en Chine.

Sélecteur de langue
Sélecteur de langue

Amélioration de l’interface utilisateur au niveau du panneau de commentaires

Pour garantir la cohérence avec les autres produits Creative Cloud, Adobe XD offre une lisibilité améliorée des commentaires et des réponses dans l’interface du panneau de commentaires. Cette fonctionnalité améliore la lisibilité de multiples commentaires grâce à un captcha invisible (automatisé) pour les commentaires des invités, une nouvelle mise en retrait dans le volet Commentaires, un horodatage adjacent au nom du réviseur, etc.

Pour plus d’informations, consultez la section Utilisation des prototypes dans XD.

Amélioration du système de commentaires
Amélioration du système de commentaires

Nouvelles fonctionnalités d’Adobe XD 17

Résolution des problèmes de polices manquantes

Activation depuis Adobe Fonts
Activation depuis Adobe Fonts

La dernière version d’Adobe XD apporte une simplification du chargement des polices manquantes à partir de la Bibliothèque Adobe Fonts, ainsi que de la gestion des polices ne provenant pas d’Adobe : ces actions se font désormais directement depuis l’application. 

Pour vous garantir une utilisation simple et efficace des polices Adobe, XD active automatiquement les polices manquantes disponibles dans la Bibliothèque Adobe Fonts sur votre ordinateur sans votre intervention.

Lorsque vous êtes en ligne et que vous ouvrez un document contenant des polices manquantes disponibles dans Adobe Fonts (auquel vous avez accès via votre abonnement Creative Cloud), XD les active automatiquement sur votre ordinateur.

Les polices activées à partir d’Adobe Fonts sont marquées d’une icône d’activation bleue. Dès qu’elles sont prêtes à être utilisées, elles sont disponibles dans votre document sans que vous ayez à faire quoi que ce soit.

Auto-activation des polices Adobe
Auto-activation des polices Adobe

A. Polices manquantes B. Activation de polices 

Découvrez cette vidéo sur l’utilisation des polices manquantes.


Pour en savoir plus, reportez-vous à la section Gestion des actifs et des composants

Prise en charge des gestes de glissement dans les navigateurs web

Vous pouvez maintenant expérimenter de manière optimale le comportement de vos prototypes si vous avez conçu ceux-ci pour des effets de glissement lors de la visualisation ou du partage sur le web. Dans les versions précédentes, les gestes de glissement étaient pris en charge sur les applications de bureau mais étaient désactivés par défaut sur le web. Avec cette mise à jour, vous pouvez aussi déplacer vos prototypes en les faisant glisser dans les navigateurs web.

Déplacement par glissement dans un navigateur
Déplacement par glissement dans un navigateur

Pour plus d’informations, reportez-vous à la section Création de prototypes à l’aide de l’animation automatique.

Copier/coller un contenu vectoriel vers Illustrator

Copier/coller un contenu vectoriel vers Illustrator
Copier/coller un contenu vectoriel vers Illustrator

Vous pouvez maintenant copier le contenu vectoriel XD vers votre presse-papiers, puis le coller en tant que calques modifiables dans Adobe Illustrator. Dans les versions précédentes, Illustrator ne prenait en charge que le copier/coller d’images aplaties à partir de XD. La fonctionnalité a été mise à niveau pour évoluer vers un transfert vectoriel basé sur le format SVG.

Cette fonctionnalité est compatible avec Illustrator version 23.0.2 ou ultérieure.

Découvrez cette vidéo sur la façon de copier/coller du contenu vectoriel dans Illustrator.


Pour en savoir plus, reportez-vous à la section Utilisation d’actifs externes.

Masquer les contrôles de navigation dans les prototypes web

Vous pouvez désormais définir la visibilité des contrôles de pagination et de navigation de vos prototypes web afin de créer un environnement plus contrôlé pour les utilisateurs devant tester vos prototypes.

Afficher et masquer les contrôles de navigation
Afficher et masquer les contrôles de navigation

Vous pouvez activer ou désactiver l’option Afficher les contrôles de navigation sous Partager. Si les contrôles sont :

  • activés (réglage par défaut) : l’application web du prototype affiche les mêmes boutons Accueil, Retour et Suivant ;
  • désactivés : les contrôles de navigation de l’application web du prototype ainsi que les numéros des plans de travail ne sont pas visibles. Vous pouvez utiliser les zones réactives définies pour interagir avec des prototypes et accéder à l’écran d’accueil en cliquant sur le bouton Accueil. Lorsque vous ouvrez le lien d’un prototype sur un appareil mobile, vous pouvez afficher l’écran d’intégration, les chevrons gauche/droit sont masqués et le balayage est désactivé.

Si les flux de prototypes comportent des liens, vous pouvez également choisir d’afficher les contrôles de navigation lors de la publication de vos prototypes. 

Remarque :

Si vous souhaitez profiter de cette nouvelle fonctionnalité pour vos liens existants, republiez votre prototype en désactivant l’option Afficher les contrôles de navigation.

Contrôles de navigation désactivés
Contrôles de navigation désactivés

Découvrez cette vidéo sur le masquage des commandes de navigation dans les prototypes web.


Pour plus d’informations, consultez la section Partage de prototypes, spécifications techniques et documents en ligne.

Améliorations du marquage pour l’exportation

Sélectionner pour exportation
Sélectionner pour exportation

Vous pouvez sélectionner n’importe quel objet de la zone de travail et le marquer pour l’exportation en cliquant sur la nouvelle case à cocher Marquer pour exportation dans l’inspecteur propriétés ou en cliquant sur le bouton droit et en le sélectionnant dans le menu.

À partir de cette version, toutes les images bitmap importées dans XD sont automatiquement marquées pour l’exportation. Lorsque vous importez ou ouvrez un document Illustrator ou Photoshop comportant des images, XD sélectionne automatiquement toutes les images bitmap pour exportation. 

Vous pouvez sélectionner Fichier > Exporter > Lot pour exporter tous les calques marqués pour l’exportation, ou sélectionner Partager > Partager pour développement et inclure des actifs dans les spécifications de conception. 

Remarque :

L’option Sélectionner pour l’exportation par lots s’appelle désormais Sélectionner pour exportation.

Découvrez cette vidéo sur le marquage d’actifs pour l’exportation.


Améliorations apportées à l’outil de sélection

Sélection d’objets dans plusieurs groupes
Sélection d’objets dans plusieurs groupes

XD a amélioré l’outil de sélection et ainsi considérablement augmenté l’efficacité de la sélection des contenus se trouvant dans des groupes différents. Vous pouvez sélectionner des objets dans plusieurs groupes différents de votre zone de travail à l’aide des commandes Cmd/Ctrl + Maj + Clic, et ce quels que soient les groupes dont ils font partie. Une fois le contenu sélectionné, vous pouvez facilement modifier ses attributs communs dans l’Inspecteur propriétés. Vous pouvez le dupliquer en maintenant la touche Alt enfoncée tout en le déplaçant, ou en utilisant Cmd/Ctrl + D.

Découvrez cette vidéo sur la sélection d’objets dans plusieurs groupes.


Pour en savoir plus, reportez-vous à la section Regroupement, verrouillage, duplication, copie et retournement d’objets.

Intégration au serveur JIRA

L’intégration d’Adobe XD à Jira facilite la collaboration entre les designers et les développeurs en leur fournissant un accès direct aux prototypes XD partagés et aux spécifications de conception depuis un problème répertorié dans Jira.

La nouvelle prise en charge de Jira Software Server et de Jira Software Data Center offre ces avantages aux entreprises qui recherchent une solution personnalisée et ont des exigences particulières en matière de gestion des données. Pour en savoir plus sur la manière dont les administrateurs Jira peuvent activer l’intégration, reportez-vous à la section Intégration de Jira pour XD.

Nouvelles fonctionnalités d’Adobe XD 16

Enregistrement des interactions vocales avec narration audio

Adobe XD offre désormais la possibilité d’ajouter une narration à l’aide de votre microphone lorsque vous enregistrez une interaction d’aperçu du bureau. Lorsque vous cliquez, une narration vocale est également incluse dans l’enregistrement. Ceci est particulièrement utile pour guider un client dans l’application à distance sans être physiquement présent avec le client ou la partie prenante.

Cette fonctionnalité était accessible aux utilisateurs de Windows via un contrôle au niveau du système d’exploitation dans Gamecenter, et elle désormais est également disponible pour les utilisateurs de Mac. 

Consultez cette vidéo sur l’ajout d’une narration à un prototype lors de l’enregistrement.


Enregistrement d’interactions
Enregistrement d’interactions

Pour plus d’informations sur la manière d’enregistrer des interactions vocales et de les ajouter à votre narration, voir Ajouter une narration vocale à un prototype.

Raccourci clavier pipette pour changer les couleurs

Adobe XD propose un raccourci pour la pipette qui facilite la modification des couleurs des objets. Sélectionnez l’objet ou le groupe d’objets dont vous souhaitez modifier la couleur et appuyez sur la touche i du clavier pour charger le curseur pipette et sélectionner la couleur de votre choix sur la zone de travail pour modifier la couleur d’un objet. Le sélecteur de couleurs vous permet de sélectionner uniquement des couleurs absolues ; vous ne pouvez pas utiliser cet outil pour sélectionner des dégradés linéaires ou radiaux.

Consultez cette vidéo sur l’utilisation de l’outil Pipette.


Raccourci de l’outil pipette
Raccourci de l’outil pipette

Pour plus d’informations sur l’utilisation du raccourci de l’outil pipette, voir Raccourcis clavier dans XD.

Composants utilitaires de navigation dans les spécifications de prototype et de conception

Lors de l’accès à des prototypes ou des spécifications techniques XD publiés sur le web, l’accès aux contrôles utilitaires de navigation est unifié. Cela garantit une expérience unifiée lorsque vous interagissez avec d’autres applications web Adobe.

Pour plus d’informations, reportez-vous à la section Utilisation des prototypes dans XD.

Navigation utilitaire
Navigation utilitaire

Améliorations de l’interface utilisateur en matière de basculement entre partage public et privé

Pour améliorer la visibilité et l’utilisation de la fonction Partager et ses flux de travail, XD propose les options suivantes pour partager un prototype.

  • Toute personne disposant du lien peut consulter le document
  • Seules les personnes invitées peuvent consulter le document
Amélioration de l’interface utilisateur
Amélioration de l’interface utilisateur

Pour plus d’informations, voir Partage de designs et de prototypes intégrés.

Nouvelles fonctionnalités d’Adobe XD 15

La version de janvier 2019 d’Adobe XD inclut les nouvelles fonctionnalités suivantes :

Les améliorations incluent la possibilité d’afficher tous les commentaires sur plusieurs plans de travail.

Prise en charge de l’animation automatique dans les navigateurs

La fonctionnalité d’animation automatique dans Adobe XD vous permet de créer des prototypes avec des transitions animées immersives entièrement fonctionnelles et interactives sur les appareils, et de les afficher dans la fenêtre d’aperçu ainsi que dans votre navigateur web.

Désormais, vous pouvez afficher les animations dans les prototypes et les valeurs de propriété des animations dans les spécifications techniques à l’aide d’un navigateur web compatible, ce qui devrait faciliter la présentation de vos créations aux parties prenantes et autres partenaires.

Pour plus d’informations, reportez-vous aux sections Création de prototypes avec l’animation automatique et Propriétés prises en charge et non prises en charge pour l’animation automatique dans les transitions de plans de travail XD.

Vous pouvez également regarder cette vidéo pour voir comment se présentent les fondus avec l’animation automatique dans un navigateur web.


Prise en charge de l’animation automatique dans les navigateurs
Prise en charge de l’animation automatique dans les navigateurs

Langues des fonctionnalités vocales et prise en charge d’accents

La commande vocale prend désormais en charge toutes les langues Adobe XD pour les commandes et la lecture vocale. Que vous créez des designs pour des utilisateurs parlant anglais, français, allemand, coréen ou japonais, vous pouvez prototyper des expériences vocales dans leur langue maternelle. À l’avenir, une prise en charge multilingue sera également disponible.

La dernière version de XD prend également en charge les accents régionaux pour les commandes vocales. Dès lors, que vous vous trouviez aux États-Unis, au Royaume-Uni, au Canada ou en Australie, vous serez en mesure de prototyper correctement une expérience vocale localisée efficace. Pour en savoir plus, reportez-vous à la section Conception et prototypage avec commande vocale dans Adobe XD.

Vous pouvez également regarder cette vidéo pour en savoir plus sur les langues et les accents pris en charge pour les fonctionnalités vocales.


Affichage de tous les commentaires sur plusieurs plans de travail

La fonction d’affichage de tous les commentaires d’Adobe XD facilite beaucoup la gestion des commentaires des parties prenantes dans les prototypes et les spécifications techniques. Vous pouvez maintenant afficher tous les commentaires dans une seule liste, puis cliquer sur un commentaire en particulier pour accéder directement au plan de travail concerné et répondre, résoudre ou supprimer les commentaires. 

Pour plus d’informations, reportez-vous à la section Afficher tous les commentaires

Vous pouvez également regarder cette vidéo pour en savoir plus sur l’affichage de tous les commentaires sur plusieurs plans de travail.


all-screen-comments-view

Nouvelles fonctionnalités d’Adobe XD 14

Collaboration améliorée avec des documents en ligne natifs

Cloud-Doc

Adobe XD introduit les documents en ligne, un nouveau type de document créé nativement dans le cloud qui vous offre une méthode rapide et pratique pour gérer, partager et garder vos documents à jour sur différents appareils. 

Vous pouvez enregistrer vos designs XD en tant que documents en ligne pour vous assurer qu’ils restent à jour et accessibles, même lorsque vous êtes hors ligne. Vous pouvez ensuite les partager avec d’autres utilisateurs de Creative Cloud et les inviter à collaborer dessus. Une fois à nouveau en ligne, votre travail est automatiquement enregistré dans le cloud.

Les documents en ligne prennent également en charge les actifs utilisés dans plusieurs documents et vous permettent de lier des composants à partir d’un document en ligne.

Pour en savoir plus sur l’utilisation des documents en ligne, consultez cette vidéo.


L’introduction des documents en ligne a également une incidence sur la façon dont vous sauvegardez les documents sur l’application XD pour mobile et dont vous y accédez. Pour plus d’informations, consultez les sections Utilisation de documents en ligne sur un appareil mobileDocuments en ligne dans XD et Gestion de documents en ligne.

Pour en savoir plus sur l’utilisation de documents en ligne sur un appareil mobile, consultez cette vidéo.


Designs plus rapides et précis avec la possibilité de retourner des objets

XD introduit la possibilité de retourner des objets verticalement ou horizontalement. La symétrie fonctionne sur tous les éléments de base, à l’exception des plans de travail, de la grille de répétition et des composants, et tient compte de la rotation actuelle de l’objet lorsqu’elle est appliquée.

Pour en savoir plus, reportez-vous à la section Symétrie d’objets.

Symétrie d’objets
Symétrie d’objets

Gains de productivité grâce à la recherche dans le panneau Calques

Vous pouvez utiliser la fonctionnalité de recherche et de filtre dans le panneau Calques pour effectuer des recherches par nom de calque ou filtrer les calques par texte, formes et catégorie d’images. L’expérience de recherche est optimisée pour afficher uniquement les calques et les plans de travail contenant le mot-clé, sans la structure de calques (par exemple, des groupes développés). Cela peut être utile lorsque vous travaillez sur des calques auto-animés entre des plans de travail.

Pour en savoir plus, reportez-vous à la section Utilisation de calques.

Recherche dans le panneau Calques
Recherche dans le panneau Calques

Aperçu d’un composant lié sur la zone de travail

Survolez l’icône de mise à jour des composants liés dans le panneau Actifs pour prévisualiser les mises à jour des composants liés sur la zone de travail avant de les valider.

Pour plus d’informations, reportez-vous à la section Prévisualisation des mises à jour de composants liés.

Prévisualisation des mises à jour de composants liés
Prévisualisation des mises à jour de composants liés

Modifications de l’interface utilisateur relatives aux processus de partage

14_0-release-share
Ancienne nomenclature Nouvelle nomenclature Workflows
S/O Partager le document Partage de documents en ligne pour révision.
Publier le prototype Partager pour révision Publication et partage de prototypes pour révision.
Publier la spécification technique Partager pour développement Publication et partage de spécifications techniques avec les développeurs pour révision.
Gérer les liens publiés Gérer les liens Gestion des liens depuis assets.adobe.com.
Enregistrement vidéo Enregistrement vidéo Enregistrement d’une vidéo des interactions entre les plans de travail lorsque vous utilisez l’animation automatique. En cas de prototype interactif, toutes les interactions sont enregistrées sous forme de fichier .mp4.

Fidélité visuelle améliorée avec les calques conservés d’Adobe Illustrator

Grâce au copier-coller amélioré depuis Adobe Illustrator vers XD, la fidélité visuelle des calques, leur structure et leurs effets sont conservés tels qu’ils ont été conçus dans Adobe Illustrator. Ce processus est maintenant aussi performant que l’importation depuis Illustrator.

Intégration améliorée avec Photoshop, Illustrator et After Effects

Utilisez la nouvelle option Fichier > Importer pour ajouter du contenu Photoshop ou Illustrator dans un document XD existant lors de la conversion de contenu Illustrator ou Photoshop. Lorsque vous convertissez des objets intelligents, ils restent entièrement modifiables (au lieu d’être aplatis) et les calques de réglage Photoshop sont désormais conservés.

Pour en savoir plus, reportez-vous à la section Utilisation de fichiers externes.

Affichage de prototypes sur appareils mobiles

Nous avons apporté plusieurs améliorations à la visualisation des prototypes dans un navigateur web mobile, notamment le mode plein écran par défaut, le pincement pour révéler les flèches de navigation, le bouton d’accueil, les informations sur le prototype et le signalement de problèmes. Pour en savoir plus, reportez-vous à la section Aperçu sur appareil mobile.

Pour en savoir plus sur l’expérience améliorée sur mobile, consultez cette vidéo.


Amélioration de l’exportation SVG

Lors de l’exportation d’éléments .svg depuis XD ou depuis des spécifications techniques, vous avez désormais la possibilité d’exporter avec un style Attributs de présentation, améliorant les styles et la compatibilité avec les scénarios de développement courants, tels que l’utilisation de SVG exportés depuis XD dans Android Studio.

Pour en savoir plus, reportez-vous à la section Utilisation d’actifs externes.

Prise en charge améliorée de Wacom et de la saisie tactile

Adobe XD prend désormais en charge la rotation à deux doigts des objets sélectionnés sur les appareils Windows à écran tactile, les pavés tactiles Mac, et les tablettes, le pavé tactile et l’anneau tactile Wacom.

Commentaires web améliorés sur la concordance de l’interface utilisateur

Lors de l’ouverture d’un prototype web ou d’une spécification technique, vous pouvez voir un marqueur gris avec le nombre de commentaires au-dessus de l’icône de commentaire dans le rail droit. Le nombre représente le nombre total de commentaires non résolus sur un plan de travail. Le décompte est automatiquement mis à jour lorsque vous ajoutez un nouveau commentaire ou marquez un commentaire existant comme étant résolu.

Commentaires web sur la concordance de l’interface utilisateur
Commentaires web sur la concordance de l’interface utilisateur

Nouvelles fonctionnalités d’Adobe XD 13

Conception et création de prototypes avec commandes vocales et lecture vocale

Commandes vocales et lecture vocale
Commandes vocales et lecture vocale

Adobe XD propose une solution simple permettant d’utiliser des commandes vocales pour déclencher une interaction entre des plans de travail. À l’instar d’un clic ou d’un appui, vous pouvez utiliser votre voix pour déclencher une interaction de prototype et entraîner une action de lecture vocale. Avec la lecture vocale, les designers ont accès à un puissant moteur de synthèse vocale qui leur permet de concevoir pour de nouvelles plates-formes telles que les assistants vocaux et les haut-parleurs intelligents. Pour en savoir plus, reportez-vous à la section Conception et prototypage avec commande vocale.

Pour en savoir plus sur l’utilisation des commandes vocales et la lecture vocale, regardez cette vidéo.


Création et lecture avec animation automatique et gestes de glissement

Auto-aminamte--1(source)
L’animation automatique en action

L’animation automatique permet de créer facilement des prototypes avec des transitions animées percutantes. Il vous suffit de dupliquer un plan de travail, de modifier les propriétés de l’objet, telles que la taille, la position et la rotation, et d’appliquer une action d’animation automatique pour créer une transition animée entre les plans de travail. Pour utiliser l’animation automatique, assurez-vous que les objets que vous souhaitez animer portent le même nom de calque dans chaque plan de travail. Pour plus d’informations, reportez-vous à la section Création de prototypes à l’aide de l’animation automatique.

Les gestes de glissement dans XD donnent une autre dimension à la fonctionnalité d’animation automatique, en vous permettant de simuler l’expérience de glissement offerte par les appareils tactiles. Pour plus d’informations, reportez-vous à la section Geste de glissement en action.

Pour en savoir plus sur l’animation automatique, consultez cette vidéo.


Partage d’actifs entre documents au moyen de composants liés

Linked-Symbol-Concept

Dans les entreprises, les équipes de designers s’agrandissent et les surfaces de design ne cessent d’augmenter. Cette réalité contraint les designers à collaborer à la création de designs cohérents et évolutifs. Grâce aux composants liés, les designers partagent des composants d’un document à un autre et s’assurent qu’ils sont toujours actualisés.

Les composants liés permettent de créer et de gérer une seule version fiable des kits d’interface utilisateur, des autocollants ou des guides de style, puis de les utiliser dans d’autres documents Adobe XD. Quand vous modifiez un composant lié dans le document source, Adobe XD envoie une notification de mise à jour aux documents comprenant des instances de ce composant. À partir de là, vous pouvez prévisualiser les modifications et choisir de les accepter ou de les refuser. Pour plus d’informations, reportez-vous à la section Utiliser des composants liés.

Pour en savoir plus sur les composants liés, consultez cette vidéo.


Conception d’outils innovants à l’aide de plug-ins

Plugins-updated

Adobe XD lance sa première vague de plug-ins pour vous aider à automatiser des tâches, intégrer d’autres outils, exploiter des données dans vos designs et bien plus encore. Cela passe également par des partenariats d’intégration avec certaines des meilleures applications de collaboration et de productivité du marché, dont Slack, JIRA et Microsoft Teams.

Pour plus d’informations sur la prise en main des plug-ins, reportez-vous à la section Plug-ins pour XD.

Transfert fluide d’actifs avec Illustrator et After Effects

Importation à partir d’Illustrator
Importation à partir d’Illustrator

À compter de la version 13.0 d’Adobe XD, vous pouvez transférer des designs de mise en page et des actifs à partir d’Illustrator en ouvrant des fichiers ai à partir d’Adobe XD. Le nouveau workflow rapide et fluide vous permet de transférer en toute transparence des actifs avec mappage natif des calques, des plans de travail, des illustrations et des vecteurs avec une parfaite fidélité visuelle. Il permet aussi de simplifier les environnements de collaboration à différentes phases du processus UX. Pour en savoir plus, reportez-vous à la section Ouverture de fichiers Illustrator dans XD.

Avantages de la fonctionnalité :

  • Utilisation fluide des actifs Adobe Illustrator dans les prototypes : transférez des icônes, logos et autres vecteurs actifs dans XD et utilisez des kits d’interface utilisateur ou des bibliothèques complètes créés dans Illustrator en conservant les calques, le caractère modifiable et l’aspect visuel des actifs.
  • Création de designs interactifs en collaboration : ouvrez des fichiers Illustrator dans XD et utilisez les puissantes fonctionnalités de prototypage et de collaboration de XD.

Pour en savoir plus sur l’intégration d’Illustrator, consultez cette vidéo.


Animation avec After Effects
Animation avec After Effects

Avec la version 13.0 d’Adobe XD, vous pouvez facilement exporter des designs XD (des calques sélectionnés ou des plans de travail complets) vers After Effects pour créer des animations d’interface utilisateur et des micro-interactions personnalisées. Vous pouvez exporter, de manière transparente, des calques, des plans de travail, des illustrations et des vecteurs avec une parfaite fidélité visuelle et utiliser le puissant écosystème de plug-ins d’After Effect pour simplifier votre collaboration avec les développeurs. Pour plus d’informations, reportez-vous à la section Exportation d’actifs vers After Effects.

Avantages de la fonctionnalité :

  • Meilleur contrôle des animations : les designers peuvent utiliser After Effects pour créer des animations et des micro-interactions personnalisées, ajuster les transitions ou utiliser des actifs dans leurs designs.
  • Transfert fluide d’actifs : grâce à cette intégration, bénéficiez d’un transfert d’actifs rapide et du mappage natif de calques, de vecteurs et d’illustrations. Améliorez les rendements de la conception jusqu’à la création d’animations personnalisées.
  • Plug-ins efficaces : enrichissez vos animations et optimisez votre collaboration avec les développeurs en puisant dans l’écosystème des plug-ins After Effects destinés au processus de conception UX.

Aperçu en direct sur iOS avec Win10

Mobile-Preview

À compter de la version 13.0 d’Adobe XD, les designers dotés du système d’exploitation Windows peuvent utiliser une connexion USB pour prévisualiser leurs designs sur iOS. Pour en savoir plus, reportez-vous à la section Aperçu sur appareil mobile.

Nouvelles fonctionnalités d’Adobe XD 12

 La version de septembre 2018 d’Adobe XD inclut les nouvelles fonctionnalités suivantes :

Les améliorations incluent :

Lisez ce qui suit pour en savoir plus.

Redimensionnement réactif et contraintes

Lors de la conception pour un environnement multi-périphériques, il est important de prendre en compte la grande variété de tailles d’écran disponibles sur les résolutions mobile, tablette et bureau. Étant donné que tous les designers n’utilisent pas des appareils similaires, nous devons prendre en compte l’affichage du contenu sur plusieurs tailles d’écran. 

Pour résoudre ce problème, Adobe XD a développé une fonctionnalité appelée redimensionnement réactif. Celle-ci permet de redimensionner des objets tout en maintenant leurs relations spatiales aux différentes tailles, pour s’adapter au mieux à plusieurs tailles d’écran. Pour plus d’informations sur le redimensionnement réactif et les contraintes, consultez la section Redimensionnement réactif.

Pour en savoir plus sur le redimensionnement réactif, consultez cette vidéo.


Redimensionnement réactif
Redimensionnement réactif – sortie
Configuration de contraintes sur un groupe d’objets
Configuration de contraintes sur un groupe d’objets

Transitions temporisées

Les transitions temporisées appliquent une combinaison de retard et durée en tant que nouveau type de déclencheur temporel pour procéder à une transition entre des plans de travail et créer des boucles ou des flux d’intégration rapides.

Avec l’ajout de l’option Heure, vous pouvez désormais effectuer une transition entre des plans de travail en fonction d’un délai spécifique. Cela est particulièrement utile pour prototyper les flux d’intégration ou de décision. 

Lorsque vous créez une transition entre deux plans de travail en mode Prototype, vous pouvez désormais sélectionner Heure au lieu d’Appuyer, puis définir la durée du délai et la transition souhaitées. XD enregistre ensuite les attributs à partir de ce même écran et les propose par défaut pour d’autres écrans. Pour plus d’informations sur les transitions temporisées, consultez la section Utilisation des transitions temporisées.

Pour en savoir plus sur les transitions temporisées, consultez cette vidéo.


Définir des transitions temporisées
Définir des transitions temporisées

A. Définir le déclencheur sur Heure B. Définir le retard en secondes C. Définir l’action sur Transition D. Définir la durée en secondes 

Vérification orthographique intégrée

Adobe XD introduit une fonction de vérification orthographique intégrée qui assure une vérification orthographique en temps réel directement sur une zone de travail. Cette fonction repose sur la langue au niveau du système d’exploitation pour suggérer des corrections. Vous avez également la possibilité d’ajouter de nouveaux mots au dictionnaire.

Traditionnellement, les utilisateurs devaient copier ou coller leur contenu dans une application distincte pour vérifier l’orthographe et les fautes de frappe. 

À partir de cette version, vous pouvez exécuter la vérification orthographique du texte sélectionné, en affichant et corrigeant les erreurs d’orthographe éventuelles.

Remarque :

Avant de lancer la vérification orthographique, assurez-vous d’avoir activé la fonction de vérification orthographique dans le menu Édition.

Vérification orthographique
Vérification orthographique

Pour plus d’informations sur la vérification orthographique, voir Utiliser la vérification orthographique.

Amélioration de l’affichage plein écran des prototypes web

Adobe XD améliore le comportement du mode Plein écran afin d’offrir une expérience utilisateur poussée lors de la visualisation de designs dans le navigateur.

Les plans de travail personnalisés et web sont désormais affichés dans la partie supérieure du navigateur sans problème de remplissage noir. Cependant, les plans de travail mobiles continuent d’être centrés sur l’écran en mode Plein écran.

Ces améliorations apportent une expérience plus réaliste lors de la visualisation d’un plan de travail dont la taille est adaptée à un navigateur web.

Pour en savoir plus sur les améliorations pour l’affichage plein écran d’un prototype web, consultez cette vidéo.


Full-screen-(Before)
Comportement précédent
Mise à l’échelle améliorée du mode Plein écran pour les prototypes web
Comportement amélioré

Cela reproduit le comportement réel du navigateur, car la couleur d’arrière-plan des navigateurs est toujours le blanc. Aucune couleur d’arrière-plan noire n’est ajoutée par défaut.

Améliorations des affichages standard et plein écran :

  • Si la largeur du plan de travail est supérieure à l’espace horizontal disponible, la taille du prototype s’adapte pour correspondre à la largeur sans qu’un défilement horizontal soit nécessaire.
  • Si vous avez défini la hauteur de la fenêtre d’affichage (dans l’inspecteur des propriétés), le prototype s’adapte d’abord à la hauteur puis définit proportionnellement la largeur pour maintenir les proportions. Vous pouvez également faire défiler le prototype verticalement pour voir le contenu situé sous la hauteur de la fenêtre d’affichage.
  • Si le prototype créé est un plan de travail web ou personnalisé, le lien publié dans le navigateur web en mode Plein écran affiche le contenu depuis le haut de la fenêtre du navigateur. Les designs pour appareils mobiles et tablettes sont toujours alignés au centre de l’écran.
  • La couleur d’arrière-plan en mode Plein écran est désormais le blanc au lieu du noir. Cela reproduit le comportement réel du navigateur, car les navigateurs n’ajoutent pas une couleur d’arrière-plan noire par défaut.

Améliorations de l’affichage du plan de travail mobile :

  • Le contenu s’adapte à la hauteur et ajuste sa largeur pour conserver les proportions.
  • Si vous affichez le lien publié en mode Plein écran dans un navigateur web, le contenu s’affiche au milieu de la fenêtre du navigateur. 

Nouvelles fonctionnalités d’Adobe XD 11

Extraction d’actifs pour des spécifications techniques

À partir de la version XD 11.0, vous pouvez inclure des calques marqués pour l’exportation par lots en tant qu’actifs dans les spécifications techniques, et les développeurs peuvent télécharger tous ces calques marqués à partir du lien des spécifications techniques.

Les développeurs peuvent donc télécharger tous les éléments vectoriels aux formats SVG, PNG, PDF et les éléments bitmap aux formats PNG et PDF.

Exportation d’actifs
Exportation par lot
Exportation par lot

Pour en savoir plus, reportez-vous à la section Extraction d’actifs pour des spécifications techniques.

Réorganisation d’éléments dans le panneau Actifs

Avec cette version d’Adobe XD, vous pouvez organiser et réorganiser vos actifs en faisant glisser un ou plusieurs d’entre eux sur le panneau Actifs

Réorganisation d’actifs
Réorganisation d’actifs

Pour plus d’informations, consultez la section Réorganisation d’éléments dans le panneau Actifs.

Utilisation d’invitations privées sur le web

Adobe XD vous permet de partager des invitations sécurisées (liens publics et privés) pour des prototypes et des spécifications techniques depuis l’interface web. Lorsqu’un designer publie une invitation nommée sécurisée, il peut utiliser l’option Inviter pour inviter des réviseurs internes et externes supplémentaires.

Envoi d’invitations privées aux utilisateurs à partir du navigateur
Envoi d’invitations privées aux utilisateurs à partir du navigateur

Remarque :

Seul le designer propriétaire du document peut voir l’option Inviter, et les collaborateurs invités ne peuvent pas inviter d’autres personnes, sauf si le designer leur permet de le faire.

Pour plus d’informations, consultez la section Utilisation d’invitations privées sur le web.

Prise en charge de la fonctionnalité @mention pour les commentaires

Vous pouvez également utiliser @mention pour afficher les noms des utilisateurs invités à accéder à un design privé via une invitation. S’il s’agit de prototypes et de spécifications techniques publics, seuls les utilisateurs qui ont ajouté au moins un commentaire apparaissent dans la liste des réviseurs. Le réviseur dont le nom fait l’objet d’une @mention reçoit un e-mail ou une notification depuis l’application pour postes de travail Creative Cloud. Lorsque vous cliquez sur la notification, vous accédez au plan de travail référencé.

@mention
@mention

Pour en savoir plus, reportez-vous à la section Workflow du réviseur.

Prise en charge des spécifications techniques pour les types de contour

À compter de la version XD 11.0, les utilisateurs peuvent sélectionner n’importe quel objet dans les spécifications techniques partagées et cliquer sur ses bordures pour afficher les contours utilisés dans l’écran. 

Types de contour
A. Types de contour 

Pour plus d’informations, consultez la section Inspection des spécifications techniques.

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