Version d’octobre 2018 d’Adobe XD

Pour obtenir un récapitulatif des fonctionnalités introduites dans les versions antérieures d’Adobe XD, reportez-vous à 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 14

Collaboration améliorée avec des documents en ligne natifs et des symboles liés

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 mettre à jour vos documents. Les documents en ligne sont automatiquement enregistrés afin d’être à jour et accessibles même lorsque vous êtes hors ligne sur divers appareils. Les documents en ligne prennent également en charge les actifs utilisés dans plusieurs documents, ce qui vous permet de lier les symboles dans un fichier local à un autre fichier source sur le système de fichiers local.

Vous pouvez également lier un actif (symboles liés) à partir d’un :

  • document en ligne vers un autre document en ligne ou un fichier local.
  • document local vers un document en ligne.

Pour plus d’informations, reportez-vous aux sections Documents en ligne dans XD et Utilisation de documents en ligne.

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

Utilisez la fonction de symétrie d’objets pour 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 rechercher par nom de calque ou filtrer les calques par texte, forme 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 extrêmement 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

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

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

  • Nouveau menu Partager le document
  • L’option Publier le prototype est désormais appelée Partager pour révision
  • L’option Publier la spécification technique est désormais appelée Partager pour développement
  • L’option Gérer les liens publiés est désormais appelée Gérer les liens
share

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

Lors du copier-coller d’actifs d’Ai dans XD, la fidélité visuelle, la structure et les effets des calques sont conservés tels qu’ils ont été conçus dans Ai. Ce processus est maintenant au même niveau que l’importation Ai.

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 et Photoshop. De plus, les objets intelligents convertis 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 d’actifs externes.

Aperçu de prototypes sur appareil mobile

Nous avons ajouté plusieurs améliorations lors de la visualisation des prototypes dans un navigateur web mobile, notamment le mode plein écran par défaut et le pincement pour révéler les flèches de navigation, le bouton d’accueil, les informations sur le prototype et le signalement d’un problème.

Vue agrandie
Vue agrandie
Vue panoramique
Vue panoramique

Pour en savoir plus, reportez-vous à la section Aperçu sur appareil mobile.

Amélioration de l’exportation SVG

Lors de l’exportation d’éléments .svg depuis XD ou des spécifications techniques, vous avez désormais la possibilité d’exporter avec un style « Attributs de présentation », améliorant 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 la bague tactile Wacom.

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

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

Lors de l’ouverture d’un prototype web ou d’une spécification technique, vous verrez maintenant un marqueur gris avec un chiffre au-dessus de l’icône de commentaire située dans le rail droit. Le nombre représente le nombre total de commentaires non résolus sur un plan de travail. Le fait d’ajouter un nouveau commentaire ou de marquer un commentaire existant comme étant résolu mettra le décompte à jour en conséquence.

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înant 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

Plugin

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.

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