Version de juin 2018 d’Adobe XD : Incrustations, Éléments fixes, etc.

La version de juin d’Adobe XD est disponible. Elle inclut des nouveautés qui raviront certainement les UX designers. Ainsi, il est enfin possible d’ajouter des éléments fixes, comme des en-têtes et des pieds de page, dans les designs. Ce mois-ci, nous lançons également la prise en charge des incrustations, qui facilitent l’empilement du contenu (par exemple, un clavier contextuel ou un menu déroulant). La nouvelle version se distingue aussi par de nombreux gains de productivité et une fonction de partage privé des prototypes et specs de design avec les collaborateurs et clients.

Poursuivez la lecture pour découvrir les nouveautés à l’œuvre, et soyez au rendez-vous sur Adobe Live du 18 au 20 juin (à partir de 18h durant les 3 jours) : les meilleurs UX designers vous montreront comment utiliser ces nouvelles fonctionnalités.

Les éléments fixes

Faisant partie des fonctionnalités les plus réclamées par les utilisateurs, les éléments fixes permettent d’insérer des objets de design à un emplacement fixe sur un plan de travail. Ils peuvent être disposés au-dessus ou au-dessous d’autres objets de design. De cette façon, les en-têtes, pieds de page, menus et autres éléments suivent lorsque l’utilisateur fait défiler le plan de travail vers le bas. Les éléments fixes s’affichent dans l’aperçu sur ordinateur, mais aussi dans les prototypes et les spécifications de design en direct sur le web. Le destinataire bénéficie ainsi d’une expérience interactive bien plus réaliste.

Cliquez sur la vidéo ci-dessous pour découvrir les éléments fixes à l’œuvre.

Dans cette vidéo, découvrez comment créer dans Adobe XD un prototype d’application pour iPad avec un en-tête, un pied de page et une barre de menus qui restent au même endroit en cas de défilement vertical. Pour ce faire, il suffit de cliquer sur l’élément à fixer, de le placer au premier plan du design et de choisir Position fixe dans le menu. Tous les objets et groupes d’objets peuvent se voir attribuer une position fixe ; les informations et les outils de navigation importants demeurent ainsi aisément accessibles.

La prise en charge des incrustations

Utilisées à bon escient, les incrustations permettent de simuler une interactivité dans le design et d’inciter l’utilisateur à effectuer une action importante. Adobe XD permet désormais d’empiler facilement du contenu sur un autre plan de travail au lieu de le dupliquer sur plusieurs, en simulant des éléments comme des menus déroulants, des claviers contextuels ou des effets de cadre lumineux. À l’instar des éléments fixes, les incrustations fonctionnent aussi bien dans l’aperçu sur ordinateur qu’en direct sur le web dans les prototypes et les spécifications de design. Cliquez sur la vidéo ci-dessous pour découvrir les incrustations à l’œuvre.

Dans cette vidéo, découvrez comment créer facilement un clavier contextuel, qui s’affiche en incrustation sur un autre plan de travail lorsque l’on clique sur l’objet approprié (une barre de recherche dans cet exemple). La prise en charge des incrustations dans Adobe XD présente un avantage majeur : au lieu de devoir dupliquer le contenu incrusté pour chaque plan de travail, il suffit de le lier et de choisir la transition souhaitée.

Le partage privé (version bêta)

Nous avons sécurisé l’accès aux prototypes et specs de design dans Adobe XD. Désormais, vous pouvez créer un lien privé vers ceux-ci et l’envoyer par e-mail aux personnes de votre choix. Cet e-mail peut inclure un message personnalisé. Les destinataires peuvent ensuite consulter et commenter votre design (ils doivent pour cela disposer d’un Adobe ID, qu’ils peuvent obtenir gratuitement en suivant les instructions). Cliquez sur la vidéo ci-dessous pour découvrir le partage privé à l’œuvre.

Les membres de l’équipe peuvent ensuite être supprimés à tout moment de la liste des destinataires du dernier prototype ou des dernières specs de design publiées, et les designs partagés sont encore plus faciles à consulter, à réviser et à suivre grâce à un portail web unifié. Maxx Morgan, directeur adjoint de la création chez Perficient Digital, apprécie tout particulièrement cette nouveauté. « Les situations nécessitant une sécurité renforcée lors du partage de prototypes sont désormais couvertes dans Adobe XD. Avec la nouvelle fonction de partage privé, je peux envoyer une invitation à mes collaborateurs et recevoir leurs commentaires en quelques minutes à peine », se réjouit-il.

Le recadrage et repositionnement des images d’arrière-plan

Dans les versions précédentes d’Adobe XD, lorsqu’on faisait glisser une image depuis le bureau ou qu’on la déposait sur une forme ou un tracé, il était impossible de la recadrer ou de la repositionner. Le problème a été corrigé dans la dernière version. Cliquez sur la vidéo ci-dessous pour savoir comment recadrer et positionner les images d’arrière-plan dans Adobe XD.

Cette nouvelle fonctionnalité fait gagner un temps considérable à de nombreux designers, dont Jamie Nuzbach, directrice de la création chez Ideas Collide. « Le mot d’ordre d’Adobe XD, c’est la simplicité. Le collage depuis le presse-papiers et les modifications dans une forme masquée limitent les allers-retours dans d’autres applications pour obtenir le résultat souhaité », estime-t-elle.

Autres nouveautés : calculs dans les champs de propriétés et prise en charge des images d’arrière-plan Photoshop et Sketch

Dans la dernière version d’Adobe XD, les gains de productivité et les optimisations ne manquent pas :

• Meilleure prise en charge des images d’arrière-plan Photoshop et Sketch : la fonction de modification des images d’arrière-plan (voir plus haut) fonctionne aussi avec les fichiers convertis de Photoshop et Sketch.
• Calculs mathématiques dans les champs de propriétés : Comme dans Adobe InDesign, Muse et Illustrator, des fonctions mathématiques simples permettent désormais de calculer des valeurs lorsque l’on crée du contenu dans Adobe XD.

Ces deux nouveautés peuvent s’avérer particulièrement utiles. Concernant les calculs mathématiques dans les champs de propriétés, il est possible de réduire les objets groupés de 80 %, en divisant rapidement la zone d’un plan de travail pour créer une mosaïque ou en déplaçant un objet sur l’axe X ou Y selon un nombre de pixels précis. « La nouvelle fonction de calcul mathématique fait gagner un temps considérable », affirme Daniel O’Neil, chargé d’expérience chez Sapient Razorfish. « On peut désormais rapidement importer des éléments et tester les relations spatiales lors de la composition de wireframes. »

La communauté UX

Poursuivons le dialogue ! 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.

Faites connaissance avec des UX designers qui utilisent Adobe XD. Découvrez leurs débuts dans le domaine de l’UX design, leur processus de création, quelques-uns de leurs travaux.

#MadeWithAdobeXD

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

Dani Beaumont

Dani Beaumont est Principal Product Manager chez Adobe. Après de nombreuses années passées sur le segment web avec des produits comme Adobe Muse, Business Catalyst et Fireworks, elle a récemment rejoint l’équipe XD. Bon nombre de ses tutoriels sont disponibles sur sa chaîne YouTube (https://www.youtube.com/user/pingdani).