Le plugin Anima pour Adobe XD vous aide à créer des prototypes haute fidélité pour des sites web, des applications et des landing pages et convertit automatiquement les prototypes XD en code HTML et CSS fonctionnel (en version payante).
installer le plugin
- Veillez à toujours utiliser les dernières versions d’Adobe XD et de l’application Anima afin d’éviter tout problème.
- Dans le menu « Plug-ins » de XD, sélectionnez la fonction Gérer les plug-ins…
- Recherchez l’app Anima avec le moteur de recherche et installez.
créer un projet
- Trouvez Anima dans le panneau des plugins Adobe XD.
- Connectez-vous ou créez un compte Anima.
- Cliquez sur + Nouveau projet et entrez le nom du projet.
- Cliquez sur Créer.
intégrer des GIF et vidéos
Anima prend en charge les liens : Youtube, Vimeo, MP4, GIF et des fichiers Lottie JS.
Vous devez intégrer l’adresse URL de votre GIF ou vidéo et vous pourrez paramétrer les fichiers selon les réglages : Lecture automatique, Boucle, Pas de boutons de commande, Couverture (rectangle de remplissage).
comment intégrer des GIF ou vidéos ?
- Sélectionnez le calque de l’image qui deviendra l’animation vidéo ou GIF. Il convient au préalable de placer une image fixe dans la composition des calques sur XD !
- Dans la section Plug-ins , sélectionnez Vidéo / GIF / Lottie
- Collez l’URL directe de votre fichier.
- Choisissez les paramètres de lecture souhaités.
- Sauvegarder.
Pour le voir le résultat, cliquez sur Aperçu dans le navigateur.
IMPORTANT
YouTube et Vimeo ne permettent pas de masquer les commandes !
Pour plus de contrôle sur vos vidéos / GIF, il est recommandé d’utiliser une URL directe .mp4 ou .gif
intégrer des fichiers locaux
Vous pouvez intégrer des fichiers stockés localement et les enregistrer dans l’application Anima.
- Accédez à l’application en ligne et sélectionnez le projet précédemment créé.
- Cliquez sur Settings (disponible dans les … du visuel du projet).
- Dans la seconde page, choisissez Files et téléversez votre fichier.
- Lorsque il est enregistré par l’interface un bouton vous permet de copier son URL (clic droit).
Une autre méthode (plus sécurisée pour vos données) consiste à enregistrer vos GIF ou vidéos dans votre hébergement OVH.
Dés lors que vous avez créer un sous domaine, vous pouvez ajouter un dossier nommé « videos » dans lequel vous stockerez tous vos fichiers à mettre en ligne.
Utilisez FileZilla pour déposer vos fichiers dans le dossier « videos » du serveur OVH.
comment récupérer l’adresse URL de mon fichier ?
Dans un navigateur, saisissez l’adresse URL de votre sous domaine par exemple demo.mondomaine.fr. L’index apparaît et vous permet de naviguer dans les dossiers créés.
Cliquez sur le fichier de votre choix pour l’afficher dans une nouvelle fenêtre puis copiez son URL !
téléchargez le dossier d’exercice