Création de designs en perspective avec des transformations 3D

La fonctionnalité de transformations 3D vous permet de simuler la profondeur et la perspective de l’objet dans vos conceptions avec un minimum d’effort. En combinant les fonctionnalités permettant de faire pivoter tout objet le long de son axe horizontal et vertical, et en appliquant la profondeur sur l’axe Z, vous pouvez imiter des effets visuels tels que des animations 3D, des maquettes en perspective, des interactions de retournement de carte et bien d’autres. 

Assurez-vous de bien connaître les workflows Design et Prototype de XD.

Simuler la profondeur et la perspective d’un objet

Vous pouvez appliquer des transformations 3D à des compositions complexes telles que des groupes de défilement, des grilles de répétition, des piles et des remplissages. Les transformations 3D étant activées, vous pouvez contrôler l’orientation des objets le long des axes X et Y et appliquer la profondeur sur l’axe Z.

Pour simuler un effet 3D, vous devez d’abord activer les transformations 3D dans l’Inspecteur de propriétés, puis utilisez l’icône de l’objet pour modifier l’orientation, et enfin appliquez la profondeur aux objets de conception.

Activer les transformations 3D

Pour activer les transformations 3D, sélectionnez l’objet requis et cliquez sur l’icône Transformations 3D  dans l’inspecteur de propriétés.

Les nouveaux contrôles d’objet apparaissent dans la section Transformation et l’icône d’objet  est disponible au centre de l’objet actuellement sélectionné. Déplacez l’icône  à gauche, à droite, en haut et en bas. 
Vous pouvez modifier les valeurs des axes dans l’inspecteur Propriétés ou faire pivoter l’icône d’objet  pour faire pivoter les objets le long de l’axe.

Faire pivoter des objets le long de l’axe X ou Y

Après avoir activé l’icône Transformations 3D dans l’inspecteur Propriétés, procédez comme suit pour ajuster l’orientation des objets sur les axes X et Y :

1. Sélectionnez l’objet à faire pivoter. 
2. Entrez les valeurs d’orientation dans l’inspecteur Propriétés ou cliquez et faites glisser l’icône de l’objet  qui s’affiche au centre de l’objet.
3. Au fur et à mesure que vous ajustez les valeurs, observez que les objets commencent à pivoter sur l’axe requis. 

Appliquer la profondeur sur l’axe Z

Maintenant que vous avez appris à activer les Transformations 3D et à faire pivoter les objets sur l’axe X et l’axe Y, allons plus loin et découvrez comment utiliser la troisième dimension : l’axe Z. 

Lorsque vous concevez une pile de cartes en perspective ou créez des interactions de retournement de cartes, vous pouvez déplacer des objets sur l’axe Z pour créer une impression de profondeur pour les calques. Regardez cette illustration animée pour savoir comment appliquer la profondeur le long de l’axe Z.

À savoir

• L’icône de Transformation 3D n’affiche ou masque que les commandes et l’objet. Cela ne vous aide pas à créer un environnement 3D ni à désactiver les transformations déjà appliquées dans votre conception.
  

• Lorsque vous redimensionnez des objets ayant une rotation X ou Y, la valeur de profondeur Z est également modifiée automatiquement, ce qui entraîne la réorganisation du contenu. Par exemple, lors de la conception d’un groupe de cartes, en perspective, chaque carte pivote selon le même angle, mais avec une profondeur différente. Si vous sélectionnez plusieurs fois ces cartes et choisissez de les redimensionner, elles seront redimensionnées selon les besoins. Cependant, la valeur Z change pour chaque carte et entraîne la réorganisation du contenu.

• Lorsque vous modifiez la valeur de profondeur Z pour un objet, XD ne prend pas en charge les méthodes d’ordre des calques telles que Premier plan, Arrière-plan et la réorganisation à partir du panneau Calques.

Vidéo : Comment utiliser les transformations 3D dans XD ?

« Avec les transformations 3D dans Adobe XD, vous pouvez simuler la profondeur et la perspective d’un objet en quelques clics sur la zone de travail de conception » - Dani Beaumont, chef de produit principal, Adobe XD.

Regardez cette vidéo pour en savoir plus sur les Transformations 3D dans XD.

Durée de visionnage : 3 minutes.

Conseils et astuces

Maintenant que vous savez travailler avec les transformations 3D dans XD, voici quelques astuces et conseils pratiques :

• Vous pouvez rapidement rétablir l’état 2D de l’objet à tout moment. Cliquez avec le bouton droit de la souris sur l’objet sélectionné et réinitialisez les transformations 3D. Vous pouvez également utiliser ⌥ ⌘ T sous macOS et Alt + Ctrl + T sous Windows pour réinitialiser les transformations 3D.
  
• Vous pouvez choisir d’afficher ou de masquer les commandes des transformations 3D. Utilisez ⌘ T sous macOS et Ctrl + T sous Windows pour afficher ou masquer les transformations 3D.

Et après ?

Vous avez commencé à apprendre comment activer et utiliser les transformations 3D dans vos conceptions. Allons plus loin et découvrez comment les animer et à les partager avec des designers ou des collaborateurs pour recueillir des commentaires.

Vous avez une question ou une suggestion ?