Tutoriel vidéo : créer des GIF animés

Cette vidéo montre comment animer et exporter des GIF à partir de vos propres designs, directement depuis Figma, avec le plugin TinyImage.

Tutoriel vidéo : ajouter des effets de transition aux exports de GIF animés dans Figma

Cette vidéo montre comment ajouter des effets de transition en fondu, en glissement ou en balayage aux exports de GIF animés dans Figma avec le plugin TinyImage.

Ouvrez l’onglet GIF et sélectionnez Create a GIF/MP4 pour animer et exporter des fichiers GIF ou MP4 à partir des calques Figma sélectionnés.

Exporter une animation Figma Motion

Ouvrez l’onglet GIF et sélectionnez Figma Motion Export pour exporter des animations créées avec Figma Motion. TinyImage liste les frames Motion de la sélection ou de la page actuelle, avec une miniature statique à côté de chaque case à cocher. Choisissez-en un ou plusieurs, puis définissez leurs réglages communs : format de sortie, fréquence d’images, taille, boucle, compression GIF, palette de couleurs ou qualité vidéo.

TinyImage utilise le moteur de rendu Motion natif de Figma pour les sorties GIF, MP4 et WebM. Il peut aussi convertir le rendu GIF natif en APNG ou en WebP animé sans ajouter de passe de compression avec perte.

Sélectionnez Export pour générer les animations cochées. Une seule animation cochée se télécharge directement, tandis que plusieurs animations se téléchargent ensemble dans un seul fichier ZIP.

Découvrez comment vérifier et exporter des animations Figma Motion

Modifier un GIF ou un MP4 existant

Ouvrez l’onglet GIF et sélectionnez GIF Editor. Sélectionnez un calque Figma avec un remplissage GIF animé pour activer Use selected Figma GIF layer, ou choisissez Choose from computer pour charger un GIF ou un MP4 depuis votre appareil. Vous pouvez modifier les images et télécharger le résultat en GIF, APNG, WebP animé, MP4 ou WebM.

Les exports d’images de GIF Editor privilégient la fidélité : les formats APNG et WebP animé utilisent un encodage sans perte, et les GIF non modifiés, qu’ils soient téléchargés ou insérés dans Figma, réutilisent les données du GIF d’origine sans nouvelle compression.

Recadrer un GIF existant

Après avoir chargé un GIF, sélectionnez Crop. Tracez ou redimensionnez la zone de recadrage dans l’aperçu, ou saisissez des valeurs X, Y, largeur et hauteur exactes. Vous pouvez déplacer la zone sélectionnée avec les touches fléchées pour des ajustements plus fins.

Sélectionnez Apply crop pour recadrer toutes les images de l’animation. Vérifiez l’aperçu mis à jour avant d’exporter le GIF modifié.

Bien démarrer avec la création de GIF dans Figma

Utilisez les pages ci-dessous pour configurer chaque étape de votre workflow de création de GIF :

Sélectionner et actualiser les images du GIF

Sélectionnez les calques Figma à utiliser comme images et actualisez la série d’images à tout moment

Ordonner les images du GIF

Triez les images selon un ordre personnalisé, l’ordre des calques, les lignes, les colonnes ou le nom des calques

Configurer le timing et la lecture du GIF

Réglez les délais entre les images, le nombre de boucles et les interactions de lecture de l’aperçu

Ajouter des transitions entre les images

Appliquez et ajustez des transitions en fondu, en glissement et en balayage entre les images

Définir les options d’export GIF

Configurez les dimensions, l’ajustement, la qualité, la gestion de la palette de couleurs et le tramage

Exporter et télécharger des fichiers GIF

Générez le GIF final et téléchargez-le une fois le traitement terminé

Modifier un GIF ou un MP4 existant

Redimensionnez, transformez, recadrez, raccourcissez, modifiez le timing et exportez un GIF ou un MP4 existant

Exporter Figma Motion

Vérifiez et exportez une animation Figma Motion native dans cinq formats