Guide d'utilisation Annuler

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

Vous recherchez des informations pour simuler des effets 3D lors de la création d’expériences immersives et interactives dans Adobe XD ? Vous êtes au bon endroit !

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. 

Utilisation des transformations 3D
Interaction de retournement créée à l’aide de transformations 3D

Avant de commencer

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.

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.

Activer les transformations 3D

déplacer l’objet

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. 

Faire pivoter l’objet autour de l’axe X

Faire pivoter l’objet autour de l’axe X

Positionne l’objet sélectionné le long de l’axe X horizontal.

Faire pivoter l’objet autour de l’axe Y

Faire pivoter l’objet autour de l’axe Y

Positionne l’objet sélectionné le long de l’axe vertical.

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.

Déplacer l’objet le long de l’axe Z

  1. Sélectionnez l’objet nécessaire.
  2. Survolez le point central de l’icône d’objet .
  3. L’icône d’ancre apparaît et vous pouvez déplacer l’objet sélectionné de haut en bas.

À 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 ?

Questions à la communauté

Si vous avez une question à poser ou une idée à partager, rejoignez la communauté Adobe XD. Nous serions ravis de vous compter parmi nous et de découvrir vos créations.

Recevez de l’aide plus rapidement et plus facilement

Nouvel utilisateur ?