Creative Connection

Adobe XD : Mise à jour d’août 2019

Plateforme dynamique permettant aux équipes de design de créer des expériences de qualité, Adobe XD évolue en permanence afin d’offrir un workflow de création très complet. Dans la version d’août, le nouveau panneau Plug-ins permet d’utiliser les plug-ins autrement, renforçant ainsi l’intégration entre XD et Photoshop. Par ailleurs, les Spécifications techniques contiennent désormais des fragments de code CSS générés automatiquement, que les développeurs peuvent copier-coller dans leur code. Nous avons également travaillé sur les limites des composants, pour vous aider à créer des expériences plus rapidement et facilement.

Panneau Plug-ins : accès aux fonctionnalités des plug-ins depuis la zone de travail

Les plug-ins jouent un rôle important dans XD : ils étoffent ses fonctionnalités et le connectent à d’autres applications, tout en accélérant et en optimisant globalement votre workflow. Le Gestionnaire de plug-ins de XD donne à présent accès à près de 200 plug-ins que le panneau Plug-ins permet d’exploiter au maximum. Ce nouveau panneau, qui s’inscrit totalement dans l’expérience XD, vous permet de lancer et d’utiliser vos plug-ins préférés directement depuis la zone de travail.

Nous avons travaillé en étroite collaboration avec la communauté des développeurs de plug-ins XD, afin d’actualiser le panneau Plug-ins et sommes fiers de proposer plusieurs plug-ins XD inédits, optimisés pour ce panneau. Pour en savoir plus et voir certains de ces plug-ins à l’œuvre, nous vous invitons à lire dans son intégralité, Put the Power of Plugins at Your Fingertips

Si vous êtes développeur, vous bénéficiez avec ce panneau d’une précieuse vitrine pour présenter votre plug-in et de nouvelles fonctionnalités aux designers, directement le long de la zone de travail. Pour en savoir plus sur la création de plug-ins, rendez-vous sur notre site web pour les développeurs. Vous pouvez également vous référer au guide de création de plug-ins XD pour les débutants sur notre blog à destination des développeurs.

Ouverture et retouche d’images dans Photoshop directement depuis XD

Adobe XD est la seule plateforme de design d’expérience à s’intégrer en mode natif avec les autres applications Creative Cloud. Utilisée avec Adobe Photoshop, elle facilite la création, la retouche et l’importation d’images dans les prototypes XD. Grâce à l’intégration plus étroite avec Photoshop, vous pouvez exploiter pleinement les fonctions de retouche d’image de l’application, directement depuis XD.

Comme le montre la vidéo ci-dessus, vous pouvez désormais faire un clic droit sur une image de votre projet XD et choisir la commande de menu Modifier dans Photoshop. Le calque de l’image concernée s’affiche alors dans un nouveau document Photoshop (l’application s’ouvrant automatiquement, le cas échéant). Vous pouvez modifier l’image à loisir dans Photoshop, l’enregistrer pour l’aplatir, puis réimporter la version retouchée dans XD en temps réel. Si vous changez d’avis, vous pouvez bien sûr annuler les modifications dans Photoshop et choisir Enregistrer pour rétablir la version initiale de l’image.

Copier-coller de fragments de code CSS dans les Spécifications techniques

L’un des avantages du workflow Adobe XD est de pouvoir créer et prototyper des expériences utilisateur immersives et interactives, puis de les partager avec les développeurs pour passer de l’état de maquette à l’état de produit bien réel. Dans cette version de XD, le workflow a été optimisé : des fragments de code CSS sont générés automatiquement afin que les développeurs puissent les copier-coller dans leur code et produire des expériences conçues dans XD le plus simplement du monde.

À présent, quand vous visualisez un artefact dans les Spécifications techniques, un panneau CSS apparaît dans l’angle inférieur droit, et vous pouvez copier-coller les fragments de code CSS qu’il propose pour les éléments sélectionnés sur un plan de travail. N’oubliez pas que le code CSS est dynamique ; si vous modifiez le format de couleur de votre design, par exemple, le code CSS est automatiquement mis à jour en conséquence. Ainsi, une fois vos choix de design bien arrêtés, il vous suffit de cliquer et de faire glisser le pointeur sur le code du panneau CSS pour le copier dans le Presse-papiers sous sa forme définitive. Les fragments de code CSS automatiques servent à appliquer des propriétés, comme les couleurs, les ombres et les dégradés.

Ajustement des limites des composants

Grâce aux composants, Adobe XD fait gagner du temps aux designers qui créent des expériences. Introduits dans la version de mai 2019, ces éléments de design peuvent être réutilisés dans tous vos projets, vous dispensant de créer encore et toujours les mêmes objets. Dans la toute dernière version de l’application, nous avons modifié le comportement des composants pour faciliter la tâche des designers, qu’ils travaillent en solo ou en équipe.

Comme le montre la vidéo ci-dessus, le cadre de sélection du composant de type bouton est bien plus grand que son contenu afin de pouvoir englober l’effet d’ombre. Vous pouvez désormais faire un clic droit sur un composant et choisir « Ajuster les limites au contenu » pour redéfinir ses limites. Vous pouvez agir sur une seule instance d’un composant, mais aussi sur le composant principal si vous voulez que la modification s’applique à toutes les instances au sein d’un prototype. Pour les nouveaux composants disponibles dans la dernière version de XD, les limites d’une instance sont automatiquement redéfinies lorsqu’un designer ajoute ou supprime du contenu.

La fin des pixels fractionnels

Vous redoutez bien évidemment les distorsions ou flous produits par les pixels fractionnels, mais ils sont inévitables si vous redimensionnez des groupes d’objets ou appliquez des masques d’image. Cette version d’Adobe XD met fin au problème. Vous pouvez désormais redimensionner des composants, des grilles de répétition, des masques d’image et des groupes d’objets en étant sûr de tomber sur un pixel entier. Aucune intervention manuelle n’est nécessaire.

Avec ce correctif, les éléments booléens risquent d’être fractionnels, mais pas l’élément global. Quand des formes sont converties en tracés ou que des éléments sont créés avec l’outil Plume, les valeurs fractionnelles sont conservées (pour garder l’idée de départ).

Pour tout contenu créé avant cette version d’août, les valeurs fractionnelles seront maintenues de sorte que vos projets existants demeurent intacts, mais nous espérons que cette optimisation et les autres mises à jour de cette version simplifieront considérablement la manipulation des éléments dans XD. Pour accéder à la liste complète des nouvelles fonctionnalités et des mises à jour de la toute dernière version d’Adobe XD, consultez notre page Nouveautés.

 

Communauté axée sur l’expérience utilisateur

Poursuivons la conversation ! Aidez-nous à façonner l’avenir d’Adobe XD en faisant part de vos attentes ou en signalant des bugs. Suivez-nous (@AdobeXD) pour rester au fait de l’actualité ou contactez l’équipe sur Twitter via #AdobeXD. Retrouvez-nous également sur Facebook, où nous partageons des vidéos et informations sur les mises à jour, et répondons à vos questions lors de sessions en direct.

#MadeWithAdobeXD

Si vous partagez vos prototypes sur Behance, pensez à les identifier avec le hashtag #MadeWithAdobeXD et à sélectionner Adobe XD sous « Outils utilisés ». Vous aurez peut-être la chance de figurer dans la newsletter d’Adobe XD.

Mises à jour, UX/UI Design, web design

Join the discussion