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.
Dernière mise à jour le
8 sept. 2024
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.
Avant de commencer
Assurez-vous de bien connaître les workflows Design et Prototype de XD.
- Vous ne pouvez pas modifier l’espace réservé au remplissage, aux piles et aux grilles de répétition sur les zones de travail pour les groupes transformés en 3D.
- Vous ne pouvez pas faire glisser-déposer pour réorganiser les éléments de la pile sur la zone de travail. Vous pouvez réorganiser les éléments uniquement à partir du panneau Calques.
- Lorsque vous faites pivoter des images en 3D, la dégradation des images se produit pour certaines images.
- Les ombres ont un aspect légèrement différent sur les surfaces en mode Aperçu si les objets de la composition comportent des objets fixes sur les défilements de plans de travail, les groupes défilants ou les transformations 3D imbriquées.
- La taille des objets 3D transformés ne change pas lorsque vous redimensionnez un groupe.
- L’édition vectorielle et le retournement d’objet ne sont pas pris en charge pour les objets transformés en 3D.
- Les transformations 3D ne sont pas encore disponibles dans les workflows d’exportation/importation SVG.
- Les transformations 3D ne peuvent pas être appliquées aux plans de travail, uniquement à leur contenu.
- Les transformations 3D ne sont pas encore prises en charge dans les spécifications des développeurs.
- Lorsque vous convertissez un contenu transformé en 3D en composant principal, il se réinitialise automatiquement en 2D.
- Vous pouvez remplacer les transformations 3D sur les instances de composant, mais les modifications globales ne sont pas possibles à partir du composant principal.
- Vous ne pouvez pas appliquer de transformations 3D dans les composants.
- Lorsque vous appliquez des transformations 3D aux états de survol ou de frappe, les transformations sont appliquées à tous les états de cet objet.
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 :
- Sélectionnez l’objet à faire pivoter.
- 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.
- 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
Positionne l’objet sélectionné le long de l’axe X horizontal.
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.
- Sélectionnez l’objet nécessaire.
- Survolez le point central de l’icône d’objet .
- 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 sur l'objet sélectionné, puis Réinitialiser les transformations 3D. Ou vous pouvez utiliser ⌥⌘T sur macOS et Alt + Ctrl + T sur 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 ?
Concevoir des prototypes UX avec Adobe XD
Créez des maquettes interactives pour sites web et applications mobiles.
