Comment utiliser le redimensionnement réactif et les contraintes dans Adobe XD

Dans ce didacticiel, nous allons explorer quelques nouvelles fonctionnalités d'Adobe XD, à savoir «le redimensionnement réactif et les contraintes». Ces fonctionnalités, ajoutées en septembre 2018, permettent une réelle mise à l'échelle des conceptions au sein d'Adobe XD, ce qui nous donne des capacités de conception Web réellement réactives.. 

Pour illustrer ces nouvelles fonctionnalités, je vais utiliser le kit Bones iOS filaire disponible sur Envato Elements:

Bones IOS Wireframe Kit

Voir la vidéo

Redimensionnement avant la mise à jour XD

Avant qu'Adobe XD n'introduise ses nouvelles fonctionnalités de redimensionnement, redimensionner un dessin signifiait repositionner manuellement tous les éléments requis. Par exemple, vous agrandissez votre planche d’art, puis vous repositionnez, réalignez et redimensionnez les éléments de la barre supérieure et tous les autres objets en conséquence. Pas idéal.

Resize Resize Now

Le redimensionnement réactif prend tout ce travail manuel et corrige les problèmes pour vous automatiquement. Ouvrez un document dans Adobe XD et vous remarquerez une bascule Responsive Resize dans le volet des propriétés:

Maintenant, lorsque je redimensionne la même planche graphique, vous verrez que les objets alignés au centre restent au centre, les objets alignés à droite collent à droite et les objets alignés à gauche restent à gauche. De même, lorsque j'étire la planche d'art verticalement, le positionnement des éléments de l'interface utilisateur est parfaitement conservé..

Interface utilisateur originale et redimensionnée dans Adobe XD

Adapter l'alignement

L'alignement et l'espacement des objets peuvent être adaptés à vos besoins. Par exemple, si vous regardez les quatre éléments au bas de notre écran de démonstration, vous verrez que lorsque redimensionné, les entrées de courrier électronique et de mot de passe sont trop éloignées les unes des autres (comme nous le savons, la proximité est un facteur important. dans la conception des relations visuelles).

En regroupant d’abord les entrées, nous pouvons informer Adobe XD que nous souhaitons qu’elles soient visuellement connectées, afin qu’elles soient rapprochées lors du redimensionnement (notez la ligne rose autour du groupe):

Contraintes

Les contraintes manuelles vont encore plus loin en nous permettant d'être encore plus précis sur la façon dont Adobe XD traite le redimensionnement réactif.

Sous le Redimensionner réactif bascule il y a un commutateur pour rendre le processus Manuel, au lieu de Automatique. Les commandes qui nous sont données nous permettent de spécifier, pour chaque objet, les bords de la planche d’art sur lesquels nous voulons qu’il reste, et si nous voulons que sa hauteur ou sa largeur soit fixe..

Par exemple, voici une interface où les objets sont automatiquement redimensionnés en réponse. C'est pas mal du tout, mais ça pourrait être mieux:

Redimensionnement automatique

Avec un ou deux des éléments manuellement contraints, nous pouvons nous assurer que le bouton Suivre reste sur le bord supérieur, que les onglets font de même et que le contenu de la publication reste aligné sur la gauche:

Contraintes manuelles: bien mieux!

Conclusion

Téléchargez la dernière mise à jour d'Adobe XD et jouez avec les nouveaux paramètres de redimensionnement réactif. Je vous garantis que vous aimerez ce que vous trouverez! Avec cette mise à jour, Adobe a rendu ce processus fastidieux extrêmement intuitif et rapide, et combiné à des fonctionnalités telles que Repeat Grid, le design réactif d'Adobe XD est particulièrement puissant pour les interfaces complexes..

En savoir plus sur Adobe XD