Janvier 2020 – La nouvelle version d’Adobe XD : Mise en page d’après le contenu, nouveaux API de plug-ins, et bien plus encore !

Par Dani Beaumont

Nouvelle année, nouvelle décennie et nouvelle version d’Adobe XD !

A Adobe MAX 2019, nous avons révélé une mise à jour majeure d’Adobe XD, avec plusieurs nouvelles fonctionnalités dont la Cocréation, l’Historique du document, les états de composant, le mode Partager, et bien plus encore. Pour lancer cette nouvelle année, nos nouvelles mises à jour concernent la mise en page d’après le contenu, les API de plug-ins XD optimisées, et bien plus encore.

Nous accueillons avec toujours autant de plaisir vos demandes d’ajout de fonctions via le User Voice et sommes ravis d’échanger avec vous à propos de l’avenir de XD sur Twitter, Facebook et sur nos forums.

Examinons à présent de plus près les nouveautés de la version de janvier !

Coup d’accélérateur pour le design grâce à la mise en page d’après le contenu

Au fil des remaniements apportés à leurs projets de design, les designers passent bien trop de temps sur des ajustements manuels mineurs. Qu’il s’agisse de redimensionner des boutons d’action au gré des modifications de libellé de texte, d’ajuster des menus déroulants lors de l’ajout ou du retrait de certaines commandes, ou encore d’adapter les bannières de notification comme celles renvoyant à la charte de confidentialité d’un site web, les designers connaissent bien ce scénario. Ces dizaines d’ajustements manuels sont fastidieuses et représentent plusieurs heures que les designers aimeraient consacrer à d’autres tâches.

C’est la raison pour laquelle nous sommes ravis d’introduire une nouvelle méthode accélérant la mise en page en fonction du contenu travaillé dans Adobe XD. Des commandes intelligentes facilitent la création des éléments d’interface et vous épargnent ces tâches manuelles de rectification qui freinent votre travail. Plus précisément, cette fonctionnalité identifie les relations entre les calques et différents objets de votre zone de travail et ajuste/redimensionne automatiquement ces calques au fur et à mesure des changements apportés à vos travaux. La mise en page s’ajuste désormais automatiquement en fonction du contenu et vous permet de contrôler les valeurs des marges d’un groupe de calques et de les conserver si des modifications y sont apportées. À partir du moment où les éléments de design à l’intérieur du groupe de calques changent, XD préservera les valeurs des marges et rectifiera l’arrière-plan. Pour ne pas interrompre le flux créatif, toutes les commandes de l’inspecteur de propriétés sont aussi accessibles directement sur la zone de travail.

La mise en page d’après le contenu s’adapte à différents types d’arrière-plans (formes, images, tracés, masques, groupes de calques, etc.) et est exploitable avec des modifications de tout type : changement de texte, ajout d’un objet ou encore déplacement ou redimensionnement d’un objet.

En plus des groupes de calques, la mise en page d’après le contenu est utilisable avec des composants et états de composants, dans le cas où vous travaillez avec une bibliothèque de composants ou un système de design. Si vous créez ou ajoutez une nouvelle instance de composant, les mêmes commandes peuvent être utilisées pour modifier rapidement sa mise en page. Si vous modifiez la mise en page du composant principal, les modifications sont automatiquement répercutées sur chaque instance avec la même facilité.

Comme chacune des fonctionnalités de XD, la mise en page d’après le contenu a été soigneusement étudiée — avec des designers et en analysant les enjeux qui se posent à notre propre équipe de design — pour offrir souplesse, intuitivité et évolutivité. La mise en page d’après le contenu est à la disposition de tous les utilisateurs de XD : il suffit de télécharger la dernière version d’Adobe XD ou d’effectuer la dernière mise à jour pour y avoir accès. Des fichiers de démonstration et tutoriels gratuits sont accessibles sur Let’s XD.

Le glisser-déposer dans les API de plug-ins XD

En août 2019, nous avons introduit les panneaux Plug-ins, qui jouent un rôle important dans XD en vous permettant de lancer et d’utiliser vos plug-ins préférés directement depuis la zone de travail. Ce panneau vous donne accès à plusieurs centaines de modules externes qui étoffent les fonctionnalités de XD et le connectent à d’autres applications.

Les designers utilisent communément les plug-ins XD pour importer dans leurs designs des contenus en provenance d’autres sources, bibliothèques d’icônes ou banques d’images. Ce type de plug-in vous aide à enrichir vos designs en un clin d’œil, sans avoir à rechercher et à télécharger les contenus sur Internet.

En marge de cette nouvelle version de XD, nous avons mis à jour les API de plug-ins XD pour qu’il soit possible de les glisser-déposer directement sur la zone de travail depuis un plug-in. Si vous souhaitez créer un plug-in XD ou mettre à jour un module externe existant, reportez-vous à ces exemples de code pour doter votre plug-in d’une fonctionnalité de type glisser-déposer.

Ajouter le nombre d’étoiles pour créer des points d’ancrage

L’étoile est associée à certains des aspects les plus importants de l’expérience utilisateur, qu’il s’agisse de noter un restaurant dans une application, de signaler l’importance d’un e-mail ou d’un document, d’enregistrer une destination sur la carte géographique d’une application, etc. Dans la plupart des outils, il faut souvent employer d’étranges et fastidieux stratagèmes pour insérer des étoiles dans vos designs d’interfaces utilisateur.

Aujourd’hui, avec la dernière version en date d’Adobe XD, vous pouvez ajuster le « nombre d’étoiles » grâce à l’outil Polygone de XD. Le nombre d’étoiles permet d’agir sur les points vectoriels situés au milieu de chacun des côtés du polygone, en les rapprochant ou en les éloignant du centre de la forme, sur une échelle de 0 % à 100 %. Une fois le polygone sélectionné, vous pouvez ajuster le nombre d’étoiles grâce à l’inspecteur de propriétés, ou en survolant le polygone et en procédant manuellement aux ajustements au moyen de la poignée de sélection, à droite sur la zone de travail.

Le résumé de l’ensemble des nouveautés d’Adobe XD est disponible ici. Pour pouvoir y accéder, téléchargez la dernière version ou mettez à jour XD via l’application Creative Cloud.