Versions d’août et de septembre 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 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