Creative Connection

Mise-à-jour de mars 2019 d’Adobe XD : contenu vectoriel modifiable dans Illustrator, meilleure gestion des polices, exportation optimisée

Avec la mise-à-jour de mars d’Adobe XD, votre workflow bénéficie de multiples gains de productivité, et notamment d’une utilisation optimisée de XD avec Illustrator. Désormais, pour réaliser des retouches vectorielles précises dans Illustrator, il suffit de copier-coller les éléments concernés dans cette application (puis, une fois les modifications effectuées, de les réintégrer dans XD par copier-coller). De nouvelles optimisations en matière d’exportation devraient également vous faire gagner du temps, avec une nouvelle case à cocher « Marquer pour l’exportation » facile d’accès, et la possibilité de l’appliquer simultanément à plusieurs sélections sur la zone de travail.

Nous avons aussi facilité la manipulation des polices. À présent, lorsque vous importez un design dont les polices manquantes figurent dans la bibliothèque Adobe Fonts, celles-ci sont automatiquement chargées à l’arrière-plan, ce qui vous épargne les recherches fastidieuses. Outre une plus grande maîtrise des éléments de l’interface dans le but d’améliorer encore l’efficacité des tests d’ergonomie sur les prototypes, nous vous proposons également une intégration avec le serveur Jira, la possibilité de visualiser les opérations de glissement dans le navigateur, et une sélection directe optimisée permettant de sélectionner plusieurs éléments dans différents groupes d’objets. Vous gagnez ainsi un temps considérable sur les projets complexes axés sur l’interface utilisateur.

Nouveauté de XD : copier-coller de vecteurs modifiables directement dans Illustrator

Les designers qui font à la fois appel à Adobe XD et à Illustrator bénéficient, ce mois-ci, de nouvelles fonctionnalités destinées à faciliter la gestion de contenus vectoriels complexes, tels qu’une série d’icônes ou de logos. Désormais, il vous est possible de copier des vecteurs dans XD et de les coller dans Illustrator sous forme de contenu vectoriel entièrement modifiable.

Grâce à la simplicité du copier-coller, vous rectifiez en un clin d’œil les moindres détails des éléments de votre design. Comme vous pourrez le constater dans la vidéo ci-dessous, certaines tâches peuvent désormais être effectuées très facilement. Par exemple, pour modifier l’épaisseur de trait d’une icône il vous suffit de copier cette dernière, de la coller dans Illustrator, de la retoucher, puis de la copier-coller à nouveau dans XD. Plus besoin de mettre en place un workflow d’exportation.

Si ce copier-coller est aujourd’hui possible, c’est parce que nous intégrons le format SVG (Scalable Vector Graphics) au presse-papiers. Géré en mode natif par plusieurs navigateurs web récents, le format SVG est aussi indépendant de la résolution ; si vous exportez ce contenu depuis Adobe XD pour votre développeur, vous serez en mesure d’enregistrer les icônes au format SVG.

Optimisation de XD : automatisation du marquage des éléments à exporter

Au niveau du processus de développement, l’équipe Adobe XD a véritablement facilité le transfert de votre projet en production. Vous avez toujours eu la possibilité de marquer individuellement les éléments à exporter dans le panneau Calques. Désormais, XD procèdera automatiquement au marquage pour exportation de tous les éléments importés depuis Photoshop ou Illustrator.

Nous avons également intégré plusieurs méthodes pour marquer les éléments à exporter dans l’application. Outre le panneau Calques, vous pouvez également marquer les objets à exporter via le menu contextuel de la zone de travail, au moyen d’un raccourci clavier, ou directement dans l’inspecteur Propriétés, comme l’explique la vidéo ci-après.

Bien évidemment, si vous souhaitez désélectionner globalement les éléments identifiés pour l’exportation, il vous suffit de choisir « Tout sélectionner » pour sélectionner tous les éléments de la zone de travail, puis cliquer deux fois sur « Marquer pour l’exportation ». Dès que vous êtes prêt à transférer votre design à votre développeur, il vous suffit de sélectionner Fichier > Exporter pour télécharger tous les éléments, et Partager > Partager pour développement pour lui permettre de définir le format de fichier final et la résolution.

Optimisation de XD : chargement automatique des polices manquantes

Il est désormais plus simple de charger des polices depuis la bibliothèque Adobe Fonts et de gérer les autres directement dans XD.

Dans les versions antérieures de XD, la gestion des polices des projets était relativement délicate si vous aviez supprimé ces polices de votre compte Creative Cloud, ou si un autre designer partageait avec vous un document XD dont les polices n’avaient pas été installées sur votre ordinateur.

À présent, si vous ouvrez un document contenant des polices qui ne sont pas installées dans Creative Cloud, XD activera automatiquement Adobe Fonts enarrière-plan sur votre poste de travail, sans que vous ayez à fermer votre document.

Dans la vidéo ci-dessus, vous constaterez que le panneau Actifs de XD comprend à présent une nouvelle section « Polices manquantes ». Elle vous permet de les identifier aisément et, soit de les installer sur votre système, soit de les remplacer par une police déjà chargée.

Optimisation de XD : modifier une sélection d’objets dans des groupes

Si vous créez une interface utilisateur très sophistiquée réunissant de nombreux éléments dans XD, il est indispensable de regrouper ces derniers pour les agencer avec soin. Néanmoins, pour modifier séparément les objets d’un groupe, le processus peut s’avérer laborieux. C’est pourquoi nous avons optimisé la sélection directe pour simplifier la sélection (et la modification) de contenu dans des groupes.

Désormais, si vous souhaitez apporter des modifications bien précises à plusieurs éléments appartenant à des groupes différents, il vous suffit d’activer l’outil de sélection directe (Maj + Ctrl sur PC ou Maj + Cmd sur Mac), puis de cliquer sur les éléments que vous souhaitez modifier. Libre à vous de modifier les attributs communs de la collection sélectionnée dans l’inspecteur Propriétés, de dupliquer du contenu, etc.

Cette optimisation peut paraître un détail, mais à mesure que vos designs se complexifient pour intégrer un nombre croissant d’éléments dans différents groupes, elle vous fera gagner un temps précieux. Vous n’aurez plus à dissocier des objets uniquement pour modifier des éléments bien précis.

Nouveauté de XD : masquage des commandes de navigation pour améliorer les tests d’ergonomie

Nous avons également ajouté la possibilité de désactiver les commandes de navigation web pour les tests d’ergonomie via l’interface de prototypage. Les utilisateurs bénéficient ainsi d’une expérience web plus authentique, ce qui vous permet de tester véritablement leurs capacités à naviguer aisément sur votre interface et à en explorer les diverses facettes.

Comme vous le constaterez dans la vidéo ci-dessous, il est désormais possible de désélectionner « Afficher les commandes de navigation » lorsque vous partagez un prototype pour révision. Cela a pour effet de masquer les commandes Précédent/Suivant ainsi que l’ensemble des plans de travail généralement visibles dans les prototypes web.

Bien qu’il ne s’agisse pas d’une nouvelle fonctionnalité, vous avez aussi la possibilité de désélectionner « Afficher les conseils sur les zones réactives », pour que l’utilisateur n’ait aucun indice sur l’endroit où cliquer. Il sera contraint d’interagir avec l’interface comme s’il s’agissait d’une application réellement en service ; les tests d’ergonomie prendront alors tout leur sens.

Autres nouveautés de XD : l’intégration avec Jira Software Server / Data Center et les opérations de glissement dans le navigateur web

L’intégration d’Adobe XD avec Jira Software facilite la collaboration entre designers et développeurs grâce à un accès immédiat aux prototypes et spécifications de design XD partagés, directement dans votre version Jira. En septembre dernier, nous avons lancé XD pour Jira, qui prend en charge Jira Software Cloud. Aujourd’hui, nous sommes ravis d’étendre cette prise en charge à Jira Software Server et Jira Software Data Center pour en faire également bénéficier les grandes entreprises, en quête d’une solution personnalisée capable de répondre à la spécificité de leurs impératifs en matière de gouvernance des données. De plus amples informations figurent sur la page de notre référencement sur Atlassian Marketplace. Voici comment vos administrateurs Jira peuvent activer cette intégration.

Autre grande amélioration apportée ce mois-ci à la visualisation des prototypes dans votre navigateur web :  la possibilité de passer d’un plan de travail à l’autre par simple glissement.

L’écosystème de plug-ins de XD : innover avec l’IA pour enrichir l’expérience utilisateur

Notre communauté de développeurs ne cesse d’introduire de nouveaux plug-ins. Ce mois-ci, nous proposons deux plug-ins qui utilisent l’IA pour offrir aux designers de nouveaux moyens d’enrichir les expériences. Vempathy pour XD vous permet d’exporter vos prototypes sur un portail en libre-service, et de sélectionner le nombre et le profil des utilisateurs ainsi que les tâches que vous souhaitez leur faire accomplir. En cliquant sur « Envoyer », vous lancez un test utilisateur standard qui enregistre une vidéo du participant interagissant avec votre prototype XD et cerne son ressenti via une analyse vidéo et audio. Les résultats du test sont publiés sur votre portail sous 24 heures. Un second plug-in intègre XD au nouveau service « This person does not exist », pour utiliser des avatars générés par l’IA dans vos designs.

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

Poursuivons le dialogue ! Aidez-nous à façonner l’avenir d’Adobe XD en faisant part de vos attentes ou en signalant des bugs à l’adresse https://adobexd.uservoice.com. 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.

UX/UI Design, web design

Participez à la discussion