Exporter des animations Figma Motion

Vérifiez et exportez vos animations Figma Motion en fichiers GIF, APNG, WebP animé, MP4 ou WebM avec TinyImage.

Utilisez Figma Motion Export dans l’onglet GIF de TinyImage lorsque votre animation est déjà créée avec Figma Motion. Ce workflow utilise le moteur de rendu d’animation natif de Figma au lieu de reconstruire l’animation à partir d’images fixes séparées.

Tutoriel vidéo : exporter en masse des calques Figma Motion en GIF et en vidéo MP4

Cette vidéo montre comment exporter en masse des animations Figma Motion en GIF compressés ou en vidéos MP4 avec TinyImage.

Sélectionner l’animation Motion ​

Dans un fichier Figma Design, sélectionnez :

  • soit le frame de premier niveau qui contient l’animation Motion ;
  • soit n’importe quel calque animé à l’intérieur de ce frame de premier niveau.

Ouvrez TinyImage, sélectionnez GIF, puis Figma Motion Export. TinyImage remonte des sélections imbriquées jusqu’aux frames Motion de premier niveau qui les contiennent et coche chaque animation détectée dans la liste d’export.

Trouver les animations Motion de la page ​

Si la sélection actuelle ne contient aucune animation Motion, TinyImage analyse automatiquement la page actuelle et liste toutes les animations Motion trouvées dans les frames de premier niveau. Utilisez les cases à cocher pour choisir une ou plusieurs animations à exporter. Toutes les animations sont cochées par défaut, et la case au-dessus de la liste sélectionne ou désélectionne tous les frames.

TinyImage met cette liste en cache tant que le plugin reste sur la même page. Sélectionnez Rescan this page après avoir ajouté une animation Motion ou modifié les frames qui contiennent des calques animés. Pour trouver une animation sur une autre page, passez d’abord sur cette page Figma ; TinyImage n’analyse pas toutes les pages du fichier.

Vérifier les frames sélectionnés ​

TinyImage affiche une miniature statique à côté de chaque frame Motion de la liste d’export. L’icône de frame vous amène à cette animation sur le canevas Figma, sans modifier les animations cochées pour l’export.

Ces miniatures vous aident à vérifier la liste d’export sans générer d’animation, sans ouvrir l’onglet Video Export de Figma et sans télécharger de fichier d’aperçu.

Configurer l’export ​

Choisissez un format de sortie dans le menu à côté du bouton d’export :

  • Animated GIF
  • Animated PNG (APNG)
  • Animated WebP
  • MP4 Video
  • WebM Video

Définissez la fréquence d’images et la taille de sortie. Les mêmes réglages s’appliquent à toutes les animations cochées. La valeur Size est une échelle : les frames peuvent donc conserver des dimensions en pixels différentes dans un même export en masse. Les formats GIF, APNG et WebP animé proposent aussi de choisir entre une lecture en boucle continue et une lecture unique. Les formats MP4 et WebM proposent à la place des préréglages de qualité Low, Medium et High.

Pour les exports GIF, choisissez la compression adaptée à vos besoins :

  • No compression laisse le GIF de Figma inchangé, sauf si vous réduisez le nombre de couleurs.
  • Lossless compression optimise les images du GIF et la structure du fichier sans compression des pixels avec perte.
  • Balanced compression applique une légère compression avec perte (niveau 40) pour un gain modéré, avec un faible risque d’artefacts visibles.
  • Strong compression applique une compression avec perte plus agressive (niveau 80), qui peut réduire davantage le poids mais introduire des artefacts visibles.
  • Maximum compression applique la compression avec perte la plus agressive (niveau 140) pour obtenir le fichier probablement le plus léger, avec le risque le plus élevé d’effets de bandes et d’artefacts.

Choisissez 256 colors pour conserver la limite de couleurs d’origine de Figma, ou réduisez-la à 128 colors, 64 colors ou 32 colors. La réduction de la palette est indépendante du préréglage de compression : une palette plus réduite peut donc modifier les couleurs ou ajouter des effets de bandes même lorsque Lossless compression est sélectionné.

Activez Size Target et saisissez un poids maximal en Ko lorsque le GIF exporté doit respecter une limite d’import stricte. TinyImage teste automatiquement différents niveaux de perte et des palettes de 256, 128, 64 et 32 couleurs, puis conserve le résultat testé le moins agressif qui respecte la limite. Lorsqu’un objectif est actif, le champ de poids cible remplace les commandes manuelles de compression et de nombre de couleurs.

Si aucun des réglages testés n’atteint l’objectif, TinyImage prépare le plus petit résultat valide qu’il a trouvé et indique son poids avant le téléchargement. Réduire la taille d’export Motion, la fréquence d’images ou la durée de l’animation permet de l’alléger encore.

Les réglages par défaut exportent le GIF natif de Figma sans modification. Lorsqu’une compression supplémentaire est activée, TinyImage n’utilise le résultat optimisé que s’il est plus léger que le fichier d’origine de Figma. Si l’optimisation échoue ou augmente le poids du fichier, TinyImage exporte le GIF d’origine à la place, sans risque.

Figma limite les exports Motion de l’offre Starter à 1920 × 1080 et 30 FPS. TinyImage tente d’abord l’export demandé, afin que le résultat des offres payantes ne soit pas réduit. Si Figma refuse une demande au-delà de cette limite, TinyImage relance automatiquement l’export à partir d’une copie temporaire adaptée à 1920 × 1080, en limitant cette nouvelle tentative à 30 FPS. La copie temporaire est supprimée après le rendu, et le frame d’origine n’est pas modifié. Une notification bleue indique les dimensions et la fréquence d’images exportées.

Figma génère directement les fichiers GIF, MP4 et WebM. Pour les formats APNG et WebP animé, TinyImage part du rendu GIF natif de Figma et le convertit sans nouvelle passe de compression avec perte. Ces formats convertis conservent l’apparence, le timing, la transparence et la palette de couleurs du rendu GIF natif.

Exporter les animations ​

Sélectionnez Export GIF, Export APNG, Export WebP, Export MP4 ou Export WebM. Figma peut ouvrir ou mettre à jour son onglet Video Export pendant le rendu de chaque animation.

Lorsqu’une seule animation est cochée, TinyImage télécharge directement ce fichier. Lorsque plusieurs animations sont cochées, TinyImage les génère dans l’ordre de la liste et télécharge une seule archive Figma Motion animations.zip. Chaque fichier porte le nom de son frame Figma, et TinyImage ajoute un numéro lorsque des frames cochés produiraient sinon des noms de fichier en double.

Figma Motion et son API d’export pour les plugins sont actuellement en version bêta. Si Figma refuse un rendu qui respecte déjà les limites de l’offre Starter, ouvrez le frame dans Figma Motion, vérifiez qu’il contient toujours des calques animés, puis relancez l’export.

Enregistrer les fichiers téléchargés depuis Figma. Si vous utilisez l’application de bureau Figma, une fenêtre vous invite à télécharger votre fichier. En revanche, si vous utilisez Figma dans un navigateur web, votre fichier est téléchargé automatiquement sur votre ordinateur par défaut (en général dans le dossier Téléchargements de votre ordinateur).