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
18 sept. 2024
- Guide de l’utilisateur d’Adobe XD
- Introduction
- Nouveautés d’Adobe XD
- Questions fréquentes
- Design, création de prototypes et partage avec Adobe XD
- Gestion des couleurs
- Configuration requise
- Notions de base concernant l’espace de travail
- Changement de langue dans l’application Adobe XD
- Accès aux kits de conception d’interface utilisateur
- Accessibilité dans Adobe XD
- Raccourcis clavier
- Conseils et astuces
- Conception
- Plans de travail, repères et calques
- Formes, objets et chemins
- Sélection, redimensionnement et rotation d’objets
- Déplacement, alignement, répartition et disposition d’objets
- Regroupement, verrouillage, duplication, copie et retournement d’objets
- Application d’un contour, d’un fond ou d’une ombre portée à un objet
- Création d’éléments répétés
- Création de designs en perspective avec des transformations 3D
- Modification d’objets à l’aide d’opérations booléennes
- Texte et polices
- Composants et états
- Masquage et effets
- Mise en page
- Vidéos et animations Lottie
- Prototypage
- Création de prototypes interactifs
- Animation des prototypes
- Propriétés d’objet prises en charge pour l’animation automatique
- Création de prototypes avec clavier et manette de jeu
- Création de prototypes à l’aide de la lecture et des commandes vocales
- Création de transitions temporisées
- Ajouter des incrustations
- Conception de prototypes de voix
- Création de liens d’ancrage
- Création d’hyperliens
- Aperçu de designs et de prototypes
- Partage, exportation et révision
- Partage des plans de travail sélectionnés
- Partage de conceptions et de prototypes
- Définition des autorisations d’accès pour les liens
- Utilisation de prototypes
- Révision de prototypes
- Utilisation des spécifications techniques
- Partage de spécifications techniques
- Inspection de spécifications techniques
- Navigation dans les spécifications techniques
- Révision des spécifications techniques et commentaires
- Exportation de ressources de design
- Exportation et téléchargement de fichiers à partir de spécifications techniques
- Partage de groupe pour les entreprises
- Sauvegarde et transfert de ressources XD
- Chartes graphiques
- Chartes graphiques et bibliothèques Creative Cloud
- Utilisation de ressources de document dans Adobe XD
- Utilisation des bibliothèques Creative Cloud dans Adobe XD
- Migration de ressources liées vers les bibliothèques Creative Cloud
- Utilisation des jetons de conception
- Utilisation de ressources provenant de bibliothèques Creative Cloud
- Documents en ligne
- Intégrations et plug-ins
- Utilisation de ressources externes
- Utilisation de ressources de design provenant de Photoshop
- Copier-coller de ressources depuis Photoshop
- Importation ou ouverture de conceptions Photoshop
- Utilisation des fichiers Illustrator dans Adobe XD
- Ouverture et importation de conceptions Illustrator
- Copie de vecteurs d’Illustrator vers XD
- Plug-ins pour Adobe XD
- Création et gestion des plug-ins
- Intégration Jira pour XD
- Plug-in Slack pour XD
- Plug-in Zoom pour XD
- Publication de designs depuis XD vers Behance
- XD pour iOS et Android
- Résolution des problèmes
- Problèmes connus et résolus
- Installation et mises à jour
- Lancement et blocage
- XD se bloque au lancement sur Windows 10
- XD se ferme lorsque vous vous déconnectez de Creative Cloud
- Problème lié à l’état d’un abonnement sur Windows
- Avertissement d’application bloquée lors du lancement de XD sur Windows
- Génération du fichier de vidage sur Windows
- Collecte et partage de journaux d’incidents
- Documents en ligne et bibliothèques Creative Cloud
- Prototype, publication et révision
- Impossible d’enregistrer les interactions de prototypes sur macOS Catalina
- Problèmes liés aux workflows de publication
- Les liens publiés n’apparaissent pas dans les navigateurs
- Les prototypes ne s’affichent pas correctement dans les navigateurs
- Le panneau de commentaires s’affiche soudainement sur les liens partagés
- Impossible de publier des bibliothèques
- Importation, exportation et utilisation d’autres applications
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 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 ?
