Guide d'utilisation Annuler

Animation des prototypes

  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. Trucs et astuces
    11. 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. 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. Aperçu de designs et de prototypes
    11. Création de prototypes avec des vidéos
  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
  6. Systèmes de conception
    1. Systèmes de conception 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
      1. Problèmes liés aux documents en ligne XD
    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

Apprenez à créer des micro-interactions à l’aide de l’animation automatique.

Avec l’animation automatique, vous pouvez créer des transitions immersives pour visualiser le mouvement de contenu entre des plans de travail.

Combinée avec le pouvoir des déclencheurs Faire glisser et Temps, l’animation automatique vous aide à créer une large gamme d’effets, comme un balayage et un glissement YouTube pour mieux rendre une story de prototype.

Interactions de type ondulations sur un site web
Effet d’ondulations sur un site web

Effet glissage/balayage sur un appareil tactile
Effet glissage/balayage sur un appareil tactile

Pour créer un prototype animé, procédez comme suit :

  1. Avant de commencer, utilisez ces règles simples pour comprendre comment les objets sont gérés lors de l’animation :

    • Si un objet n’est pas présent sur le plan de travail cible, il apparaît en fondu.
    • Si un objet n’est pas présent sur le plan de travail source, il disparaît en fondu.
    • Si un objet a une correspondance en termes de nom du calque et de groupe, les attributs sont animés. Pour une liste complète des propriétés et des transitions prises en charge, lisez les Propriétés d’objet.
    • Si vous souhaitez prototyper un effet de défilement horizontal ou vertical, utilisez des groupes de défilement.
  2. Reliez les plans de travail en mode Prototype. 

  3. Cliquez sur le connecteur pour afficher le panneau d’interaction qui figure dans l’Inspecteur Propriétés et définissez les options suivantes :

    • Déclencheur : sélectionnez une option pour déclencher une animation. Par exemple, pour simuler une expérience de saisie de carte, sélectionnez Appuyer. 
    • Action : sélectionnez Animation automatique. Vous pouvez désormais affecter deux actions à un seul déclencheur, notamment Appuyer sur. Pour cela, réglez le premier bouton Action + dans l’Inspecteur Propriétés sur TransitionAnimation automatiqueSuperpositionDéfilement ou Plan de travail précédent, puis réglez le deuxième bouton Action + sur une action non transitoire, telle que Lecture audio ou Lecture vocale. Notez que si vous sélectionnez la lecture audio ou vocale comme première action, vous ne pouvez pas ajouter de deuxième action.
    • Destination : sélectionnez le plan de travail cible vers lequel l’animation doit permettre d’effectuer la transition.
    • Rythme : sélectionnez une option pour simuler des effets de type accélération/décélération. Par exemple, sélectionnez Décélération si vous voulez que vos animations disparaissent de votre prototype au ralenti.
    Le processus d’animation automatique
    Le processus d’animation automatique

    A. Sélectionnez le type de déclencheur. B. Sélectionnez l’action à animer automatiquement. C. Sélectionnez le plan de travail cible. D. Sélectionnez les options de rythme. 

  4. Pour définir davantage d’interaction pour un objet, sélectionnez l’objet avec une interaction déjà définie, puis cliquez sur le bouton + sur le plan de travail ; vous pouvez également cliquer sur + sur l’Inspecteur Propriétés.

     Rappelez-vous que vous pouvez appliquer les déclencheurs de type Appuyer, Faire glisser, Survoler et Temporisé une seule fois et les déclencheurs de type VocalTouches/Manette à plusieurs reprises. 

  5. Sélectionnez l’aperçu de vos animations dans les navigateurs pris en charge

     Rappelez-vous que XD ne prend pas en charge le défilement lors de l’aperçu des plans de travail animés avec l’animation automatique.

Exemples et exemples de fichiers

Voulez-vous connaître les rudiments de l’animation automatique ? Commencez avec ce kit d’interface utilisateur qui inclut des interactions de base, des éléments d’interface utilisateur, des exemples de type glisser et bien plus encore.

Vous pouvez également utiliser d’autres exemples de fichiers de ce type pour tester l’animation automatique.

Vous souhaitez obtenir un effet de balayage YouTube sans vous soucier des durées et des images clés ?

Reliez vos plans de travail et sélectionnez ces options dans l’Inspecteur Propriétés du prototype :

  • Déclencheur : sélectionnez Faire glisser. 
  • Action : sélectionnez Animation automatique.
  • Destination : sélectionnez le plan de travail cible vers lequel l’animation doit permettre d’effectuer la transition.
  • Rythme : sélectionnez une option pour créer des effets de type accélération/décélération. Par exemple, sélectionnez Accélération-Décélération pour que vos animations apparaissent et disparaissent de votre prototype au ralenti.

Téléchargez les exemples de fichiers et testez-les, ou regardez cette vidéo pour plus d’informations.

Temps de visionnage : 1 minute.

Vous voulez savoir comment créer un menu mobile animé avec un effet d’accélération ? 

  1. Téléchargez les exemples de fichiers.
  2. En mode Prototype, reliez le menu hamburger au plan de travail home_expanded et sélectionnez les options suivantes dans l’Inspecteur Propriétés du prototype :
  • Déclencheur : sélectionnez Appuyer. 
  • Action : sélectionnez Animation automatique.
  • Destination : sélectionnez le plan de travail cible vers lequel l’animation doit permettre d’effectuer la transition.
  • Rythme : sélectionnez l’effet Accélération.
  • Durée : définissez une durée de 0,8 secondes.

Vous souhaitez ajouter des animations avancées à vos conceptions ? Regardez cette vidéo pour savoir comment travailler avec After Effects. 

Exportation d’Adobe XD vers After-Effects (Temps de visionnage : 1 minute)

En savoir plus

Visionnez cette vidéo pour en savoir plus sur l’animation automatique dans XD.
Temps de visionnage : 6 minutes

Logo Adobe

Accéder à votre compte