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 !
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.
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 :
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.
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.
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 :
Pour en savoir plus sur le prototypage dans XD, consultez la section Création de prototypes interactifs.
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.
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.
Définissez-les avec un déclencheur Appuyer et le type d’action Transition.
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.
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.
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.
Regardez cette vidéo de 2 minutes pour découvrir quelques conseils de pro concernant l’utilisation de Lottie dans XD.
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 !
Accéder à votre compte