Vous avez une question à poser ou une idée à partager ? Venez participer à la communauté Adobe XD. Nous serions ravis de vous compter parmi nous et de découvrir vos créations !
Dernière mise à jour le
- 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
Découvrez comment importer et utiliser Lottie pour créer des animations élaborées dans Adobe XD.
Lottie est un format d’animation léger qui peut être exporté depuis Adobe After Effects au format JSON. Les fichiers Lottie sont plus petits que d’autres formats tels que les GIF et les PNG animés. Les développeurs peuvent réutiliser les fichiers Lottie dans leur code.
XD vous permet d’importer des fichiers Lottie et de contrôler la lecture de Lottie. Après avoir réglé la lecture Lottie et relié votre prototype, vous pouvez le prévisualiser avant de le partager.
Lectures suggérées
Importation de fichiers Lottie
Pour importer un fichier Lottie dans XD, faites-le glisser vers un plan de travail. Vous pouvez également choisir Fichier > Importer.
Une fois importée, la première image du fichier Lottie est affichée sur la zone de travail. Si la première image du fichier Lottie est vide, vous voyez un cadre vide sur la zone de travail. Dans ce cas, utilisez le panneau Calques pour localiser le fichier Lottie.
Lorsque vous sélectionnez le fichier Lottie en mode Design, vous voyez une icône de lecture dans son coin supérieur gauche.
Après avoir importé votre fichier Lottie dans XD, vous pouvez contrôler le moment où il sera lu. Effectuez les étapes suivantes pour définir une option de lecture :
- En mode Design, sélectionnez l’actif Lottie sur la zone de travail.
- Dans la section Animations de l’Inspecteur Propriétés, choisissez un préréglage :
- Lire automatiquement (par défaut)
- Appuyer pour lire
- Pas de lecture
- Lire automatiquement (par défaut)
- Si vous souhaitez que votre actif Lottie soit lu en boucle, cliquez sur le bouton Lecture en boucle .
Options de lecture et interactions associées
Lorsque vous définissez une option de lecture pour votre actif Lottie en mode Design, les interactions associées sont automatiquement définies en mode Prototype.
Si vous choisissez l’option Lire automatiquement, le déclencheur Délai est défini automatiquement avec un délai de 0 seconde.
Si vous choisissez l’option Appuyer pour lire, le déclencheur Appuyer est défini automatiquement avec l’action par défaut Bouton Lecture/Pause.
Si vous choisissez l’option Pas de lecture, aucune interaction n’est définie en mode Prototype.
Personnalisation de la lecture Lottie
Pour personnaliser la lecture Lottie, dans la section Animations de l’Inspecteur Propriétés, sélectionnez Modifier la lecture.
Lorsque vous sélectionnez Modifier la lecture, vous passez automatiquement en mode Prototype.
En mode Prototype, optez pour l’une des personnalisations suivantes :
Choisissez l’un des déclencheurs suivants : Délai (définissez Délai sur plus de 0 seconde), Touches et manette de jeu ou Voix.
Modifiez l’action de lecture Lottie du déclencheur Appuyer de Bouton Lecture/Pause sur Lecture ou Pause.
Utilisation de la lecture Lottie avec d’autres interactions
Une fois que vous avez défini une option de lecture pour votre fichier Lottie, vous avez la possibilité de le relier à d’autres interactions :
- Définir une interaction Fin de lecture pour que Lottie déclenche une action après la lecture
- Lire plusieurs animations Lottie automatiquement en même temps (20 maximum)
- Lire des animations Lottie avec une vidéo en même temps
Pour en savoir plus sur le prototypage dans XD, consultez la section Création de prototypes interactifs.
Exemples de prototypage
Maintenant que vous avez appris à définir une option de lecture pour votre fichier Lottie et à le relier à d’autres interactions, testons ensemble quelques exemples.
Entraînez-vous au prototypage avec les animations Lottie en utilisant des exemples de fichiers :
Apprenez à animer un écran de chargement avec Lottie.
Ex 1-artboard 1
- En mode Design, importez le fichier plant-loading.json et placez-le sur le plan de travail. Définissez l’option Lire automatiquement.
- En mode Prototype, reliez le fichier Lottie à Ex 1-artboard 2 et définissez-le avec un déclencheur Fin de lecture et le type d’action Transition.
Une fois que vous avez fini de relier les interactions, prévisualisez le prototype et vérifiez les interactions.
Apprenez à animer des éléments de menu lorsqu’ils sont sélectionnés.
Ex 2-artboard 1
- En mode Design, importez les fichiers plant 1 (Spearmint) et plant 2 (Sansevieria) et placez-les dans leurs conteneurs respectifs. Définissez l’option Pas de lecture.
- En mode Prototype :
- Reliez plant 1 et son conteneur à Ex 2-artboard 2.
- Reliez plant 2 et son conteneur à Ex 2-artboard 3.
Définissez-les avec un déclencheur Appuyer et le type d’action Transition.
Ex 2-artboard 2
En mode Design, créez une copie du fichier plant 1 et placez-la sur le plan de travail. Définissez l’option Lire automatiquement.
Ex 2-artboard 3
En mode Design, créez une copie du fichier plant 2 et placez-la sur le plan de travail. Définissez l’option Lire automatiquement.
Une fois que vous avez fini de relier les interactions, prévisualisez le prototype et vérifiez les interactions.
Découvrez d’autres exemples avec des vidéos, des animations Lottie et des états de composants.
Prévisualisation de votre prototype et partage
Après avoir relié le prototype, utilisez l’une des options suivantes pour le prévisualiser :
Lorsque votre design est prêt à être partagé avec les intervenants, définissez les autorisations d’accès appropriées, puis publiez le lien vers le prototype ou les spécifications techniques et partagez-le.
En savoir plus
Regardez cette vidéo de 2 minutes pour découvrir quelques conseils de pro concernant l’utilisation de Lottie dans XD.
- Vous ne pouvez importer que des fichiers Lottie ne dépassant pas 15 Mo dans XD. Il n’y a aucune limite quant au nombre de fichiers Lottie pouvant figurer dans un même document XD.
- Les fichiers Lottie ne sont pas lus automatiquement si une vidéo a l’option de lecture automatique activée.
- Les fichiers Lottie s’arrêtent si d’autres déclencheurs de prototypage sont lancés.
- Si une animation Lottie utilise une police de bureau, celle-ci n’apparaît pas dans la lecture web.
- Il n’est pas possible de remplacer un fichier Lottie dans une grille de répétition.
- Vous ne pouvez pas importer des animations Lottie faisant référence à une ressource externe telle qu’une image.
- Vous ne pouvez pas importer un fichier JSON qui n’est pas un Lottie JSON.
Ressources associées
Vous avez une question ou une suggestion ?
Accéder à votre compte