Guide d'utilisation Annuler

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

  1. Guide de l’utilisateur d’Adobe XD
  2. Introduction
    1. Nouveautés d’Adobe XD
    2. Questions fréquentes
    3. Design, création de prototypes et partage avec Adobe XD
    4. Configuration requise
      1. Configuration matérielle et logicielle requise
      2. Adobe XD, Big Sur et Apple Silicon | macOS 11
    5. Notions de base concernant l’espace de travail
    6. Changement de langue dans l’application Adobe XD
    7. Accès aux kits de conception d’interface utilisateur
    8. Accessibilité dans Adobe XD
    9. Raccourcis clavier
    10. Conseils et astuces
    11. Options d’abonnement à Adobe XD
    12. Modifications apportées à la formule de lancement d’Adobe XD
  3. Conception
    1. Plans de travail, repères et calques
      1. Prise en main des plans de travail
      2. Utilisation des guides et des grilles
      3. Création de plans de travail défilants
      4. Utilisation de calques
      5. Création de groupes de défilement
    2. Formes, objets et chemins
      1. Sélection, redimensionnement et rotation d’objets
      2. Déplacement, alignement, répartition et disposition d’objets
      3. Regroupement, verrouillage, duplication, copie et retournement d’objets
      4. Application d’un contour, d’un fond ou d’une ombre portée à un objet
      5. Création d’éléments répétés
      6. Création de designs en perspective avec des transformations 3D
      7. Modification d’objets à l’aide d’opérations booléennes
    3. Texte et polices
      1. Utilisation d’outils de dessin et de texte
      2. Polices dans Adobe XD
    4. Composants et états
      1. Utilisation de composants
      2. Utilisation de composants imbriqués
      3. Ajout de plusieurs états aux composants
    5. Masquage et effets
      1. Création d’un masque avec des formes
      2. Utilisation des effets de flou
      3. Création et modification de dégradés
      4. Application des effets de fusion
    6. Mise en page
      1. Redimensionnement réactif et contraintes
      2. Définition d’un remplissage fixe pour des composants et des groupes
      3. Création de conceptions dynamiques avec des piles
    7. Vidéos et animations Lottie
      1. Utilisation de vidéos
      2. Création de prototypes avec des vidéos
      3. Utilisation d’animations Lottie
  4. Prototypage
    1. Création de prototypes interactifs
    2. Animation des prototypes
    3. Propriétés d’objet prises en charge pour l’animation automatique
    4. Création de prototypes avec clavier et manette de jeu
    5. Création de prototypes à l’aide de la lecture et des commandes vocales
    6. Création de transitions temporisées
    7. Ajouter des incrustations
    8. Conception de prototypes de voix
    9. Création de liens d’ancrage
    10. Création d’hyperliens
    11. Aperçu de designs et de prototypes
  5. Partage, exportation et révision
    1. Partage des plans de travail sélectionnés
    2. Partage de conceptions et de prototypes
    3. Définition des autorisations d’accès pour les liens
    4. Utilisation de prototypes
    5. Révision de prototypes
    6. Utilisation des spécifications techniques
    7. Partage de spécifications techniques
    8. Inspection de spécifications techniques
    9. Navigation dans les spécifications techniques
    10. Révision des spécifications techniques et commentaires
    11. Exportation d’actifs de conception
    12. Exportation et téléchargement de fichiers à partir de spécifications techniques
    13. Partage de groupe pour les entreprises
  6. Chartes graphiques
    1. Chartes graphiques et bibliothèques Creative Cloud
    2. Utilisation d’actifs de document dans Adobe XD
    3. Utilisation des bibliothèques Creative Cloud dans Adobe XD
    4. Migration d’actifs liés vers les bibliothèques Creative Cloud
    5. Utilisation des jetons de conception 
    6. Utilisation d’actifs provenant de bibliothèques Creative Cloud
  7. Documents en ligne
    1. Documents en ligne dans Adobe XD
    2. Collaboration et cocréation de conceptions
    3. Cocréation de documents partagés
  8. Intégrations et plug-ins
    1. Utilisation d’actifs externes
    2. Utilisation d’actifs de création provenant de Photoshop
    3. Copier-coller d’actifs depuis Photoshop
    4. Importation ou ouverture de conceptions Photoshop
    5. Utilisation des fichiers Illustrator dans Adobe XD
    6. Ouverture et importation de conceptions Illustrator
    7. Copie de vecteurs d’Illustrator vers XD
    8. Plug-ins pour Adobe XD
    9. Création et gestion des plug-ins
    10. Intégration Jira pour XD
    11. Plug-in Slack pour XD
    12. Plug-in Zoom pour XD
    13. Publication de designs depuis XD vers Behance
  9. XD pour iOS et Android
    1. Aperçu sur appareils mobiles
    2. FAQ concernant Adobe XD pour mobile
  10. Résolution des problèmes
    1. Problèmes connus et résolus
      1. Problèmes connus
      2. Problèmes résolus
    2. Installation et mises à jour
      1. XD semble incompatible avec Windows
      2. Code d’erreur 191
      3. Code d’erreur 183
      4. Problèmes d’installation des modules externes XD
      5.  Invitation à désinstaller et réinstaller Adobe XD sur Windows 10
      6. Problèmes liés à la migration des préférences
    3. Lancement et blocage
      1.  XD se bloque au lancement sur Windows 10
      2.  XD se ferme lorsque vous vous déconnectez de Creative Cloud
      3. Problème lié à l’état d’un abonnement sur Windows
      4. Avertissement d’application bloquée lors du lancement de XD sur Windows
      5. Génération du fichier de vidage sur Windows
      6. Collecte et partage de journaux d’incidents
    4. Documents en ligne et bibliothèques Creative Cloud
      1. Problèmes liés aux documents en ligne XD
      2. Problèmes relatifs aux composants liés
      3. Problèmes relatifs aux bibliothèques et aux liens
    5. Prototype, publication et révision
      1. Impossible d’enregistrer les interactions de prototypes sur macOS Catalina
      2. Problèmes liés aux workflows de publication
      3. Les liens publiés n’apparaissent pas dans les navigateurs
      4. Les prototypes ne s’affichent pas correctement dans les navigateurs
      5. Le panneau de commentaires s’affiche soudainement sur les liens partagés
      6. Impossible de publier des bibliothèques
    6. Importation, exportation et utilisation d’autres applications
      1. Importation et exportation dans XD
      2. Fichiers Photoshop dans XD
      3. Fichiers Illustrator dans XD
      4. Exportation dans After Effects à partir de XD
      5. Fichiers Sketch dans XD
      6. ++Applications tierces non visibles lors de l’exportation

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

Vous débutez dans Adobe XD ?

Télécharger la version d’essai gratuite

Découvrez les bases de l’application

Vous utilisez déjà Adobe XD ?

Mettre à jour votre application

Découvrez les nouveautés

C’est à vous !

Obtenir un fichier d’exemple

.xd ; 13 Mo

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.

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.

Informations à prendre en compte

  • 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.

Temps 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.

Logo Adobe

Accéder à votre compte