Versions d’août, de septembre et d’octobre 2018 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 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 symboles à 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 symboles, 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 symbole lié dans la zone de dessin

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

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

Prévisualisation des mises à jour de symboles liés
Prévisualisation des mises à jour de symboles 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 symboles 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 uniformes et évolutifs. Grâce aux symboles liés, les designers partagent des symboles d’un document à un autre et s’assurent qu’ils sont toujours actualisés.

Les symboles 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 symbole lié dans le document source, Adobe XD envoie une notification de mise à jour aux documents comprenant des instances de ce symbole. À 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 Utilisation de symboles liés.

Pour en savoir plus sur les symboles 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 dessin. 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