Comment exporter un GIF depuis Figma

Liens de périphérique

• Android
• iPhone
• Mac
• les fenêtres
• Appareil manquant ?

Cherchez-vous un moyen de faire passer votre développeur et votre jeu de conception au niveau supérieur ? Figma est un outil incroyable qui permet aux utilisateurs de créer des prototypes riches remplis d'effets audio, vidéo et d'animation. Cependant, pour tester correctement la sensation et les fonctions du prototype, vous devriez pouvoir l'exporter au format GIF et le voir en action.

Ce guide vous expliquera comment vous pouvez exporter vos prototypes Figma sous forme de GIF à l'aide de votre PC ou de votre appareil mobile.

Comment exporter vers GIF dans Figma sur un PC

Le moyen le plus simple d'exporter des GIF animés depuis Figma est d'utiliser le plugin TinyImage. Avant de pouvoir lancer et utiliser le plugin, vous devez vous connecter à votre compte Figma et passer à la section "Communauté".

Pour télécharger le plug-in :

1. Entrez "TinyImage" dans le champ de recherche.
   
2. Dans la section "Plugins", recherchez l'icône "TinyImage Compressor".
   
3. Cliquez sur le bouton d'installation à côté de l'icône.
   

Lorsque vous avez installé le plug-in, ouvrez le projet de conception que vous souhaitez enregistrer au format GIF. Cliquez n'importe où sur l'écran pour ouvrir le menu déroulant. Choisissez "Plugins" et appuyez sur "TinyImage Compressor" pour le lancer.

Voici comment créer un GIF avec le plugin :

1. En haut de la fenêtre du plugin, appuyez sur le bouton "Créer un GIF".
   
2. Sélectionnez les calques sur votre toile Figma. Ils agiront comme les cadres de votre GIF.
   
3. Au bas de la fenêtre TinyImage, appuyez sur l'option "Utiliser les calques sélectionnés". Vous verrez un diaporama de vos calques au centre de la fenêtre dans l'ordre dans lequel vous les avez sélectionnés.
   
4. Sous l'aperçu, cliquez sur les icônes de calque, puis faites-les glisser vers la gauche ou la droite pour changer leur ordre.
   
5. Appuyez sur le petit bouton "Play" sous le diaporama pour régler la vitesse de lecture.
   
6. À côté des commandes de temporisation, sélectionnez le nombre de fois que le GIF sera bouclé. Le paramètre par défaut est « Infini ». Cliquez sur l'option "Infinite" pour la désactiver et entrez le nombre de boucles souhaité dans la case à côté.
   
7. Ajustez la taille du GIF dans les champs sous les options de délai et de boucle.
   
8. Si vos calques ont des bordures transparentes, appuyez sur le bouton "Fond transparent" en bas de la fenêtre pour les rendre visibles dans le GIF.
   
9. Sélectionnez la qualité d'image du GIF dans le coin inférieur gauche. Il est préférable de définir le taux autour de 80 ou 90 pour conserver toutes les fonctionnalités de vos calques.
   
10. Laissez les commandes « Dithering » réglées sur « No Dithering ».
    
11. Appuyez sur le bouton "Exporter GIF" en haut de la fenêtre TinyImage.
    
12. Les cadres fusionneront et formeront un GIF et il sera automatiquement téléchargé et enregistré dans vos fichiers de téléchargement.

Une note sur la superposition

Le menu déroulant au-dessus des vignettes des calques vous permet également de lire les calques de gauche à droite ou de droite à gauche. Cependant, pour plus de contrôle sur l'apparence finale du GIF, il est préférable de commander les images manuellement.

Remarque sur la lecture

Réglez la vitesse de lecture par défaut en déplaçant le bouton sur la ligne de mesure du temps. Cependant, si vous souhaitez que des images spécifiques aient des vitesses de lecture différentes, vous pouvez le faire en cliquant sur une vignette et en définissant la vitesse dans la case située en dessous.

Comment exporter au format GIF dans Figma sur un appareil mobile

Les prototypes Figma sont souvent accompagnés d'animations avancées telles que des onglets coulissants, des options de balayage et des menus déroulants. Les enregistrer en tant que GIF vous permettra de présenter facilement le design en action. Cependant, l'application mobile permet uniquement aux utilisateurs de prévisualiser leurs prototypes. Bien qu'il n'y ait pas de support d'exportation intégré, vous pouvez contourner le problème en enregistrant l'application à l'écran et en transformant la vidéo en GIF.

Comment exporter au format GIF dans Figma sur un iPhone

Pour enregistrer votre projet au format GIF sur un iPhone, vous devez d'abord enregistrer l'application Figma et créer un GIF avec l'application Raccourcis.

Pour filtrer l'enregistrement de Figma sur un iPhone :

1. Lancez l'application mobile Figma et ouvrez le projet que vous souhaitez transformer en GIF.
2. Entrez dans "Paramètres" et sélectionnez "Centre de contrôle".
3. Choisissez "Personnaliser les commandes" et appuyez sur le bouton vert à côté de "Enregistrement d'écran" pour activer la fonction.
4. Retournez au "Centre de contrôle".
5. Appuyez sur le bouton "Enregistrement d'écran".
6. Cliquez sur le bouton rouge pour terminer l'enregistrement.

L'enregistrement est généralement stocké dans votre application Photos.

Vérifiez si l'outil Raccourcis est préinstallé sur votre iPhone pour transformer votre vidéo en GIF. Vous pouvez également télécharger l'outil depuis l'App Store .

Voici comment transformer la vidéo en fichier GIF sur un iPhone :

1. Ouvrez l'application, allez au bas de l'interface et sélectionnez la carte "Galerie".
   
2. Appuyez sur l'onglet "Raccourcis de démarrage" sous le menu de recherche.
3. Faites défiler vers le bas de l'écran et cliquez sur la section "Créer un GIF".
   
4. Appuyez sur le bouton "Ajouter un raccourci" pour activer le raccourci GIF.
   
5. Une fois le raccourci installé, revenez à « Mes raccourcis ».
   
6. Appuyez sur "Créer un GIF" et choisissez "OK" pour connecter l'application et votre galerie de photos.
   
7. Parcourez vos vidéos et sélectionnez la vidéo que vous transformerez en GIF.
   
8. Utilisez les curseurs pour sélectionner les images qui seront incluses dans le GIF.
   
9. Appuyez sur "Enregistrer" pour enregistrer les modifications. Votre nouveau fichier GIF sera enregistré dans l'application photo de la tablette.
   
10. Cliquez sur "Terminé" pour quitter l'application Raccourcis.
    

Comment exporter au format GIF dans Figma sur un appareil Android

Comme l'application Figma permet aux utilisateurs de prévisualiser les prototypes mais pas de les exporter, vous enregistrerez l'aperçu sur votre appareil Android, transformant la vidéo en GIF plus tard.

Voici comment filtrer l'enregistrement de Figma sur un Android :

1. Lancez l'application et ouvrez un aperçu de votre projet.
2. Effectuez un double balayage depuis le haut de l'écran et sélectionnez "Enregistrement d'écran". S'il n'y est pas, essayez de balayer vers la droite. Parfois, vous devrez appuyer sur l'icône "Modifier" en haut de l'écran pour révéler un menu caché. La fonction "Enregistrement d'écran" peut également être là.
3. Appuyez sur l'aperçu du prototype pour indiquer que vous souhaitez l'enregistrer.
4. Cliquez sur le bouton "Démarrer". Une fois le compte à rebours terminé, l'écran sera enregistré.
5. Balayez vers le bas et appuyez sur la carte "Enregistreur d'écran" pour arrêter l'enregistrement.

La vidéo de l'aperçu Figma sera enregistrée dans votre application photo Android. Vous pouvez le transformer en GIF avec l' application GIPHY .

Pour convertir une vidéo en GIF sur un appareil Android :

1. Installez et lancez l' application GIPHY sur votre appareil.
   
2. Inscrivez-vous et créez un compte GIPHY.
   
3. Appuyez sur le bouton "Créer" en haut à droite de l'interface.
   
4. Activez l'application pour accéder à votre caméra.
   
5. Sélectionnez une vidéo dans votre galerie Android.
   
6. Ajustez la durée de la vidéo. L'application GIPHY permet aux utilisateurs d'insérer des éléments tels que du texte et des autocollants dans leurs fichiers.
   
7. Cliquez sur l'icône "Flèche" en bas de l'application.
   
8. Choisissez "Partager le GIF" et sélectionnez "Enregistrer le GIF".
   

Exporter des GIF sans restrictions

Que vous soyez un développeur expérimenté ou un designer amateur, vous méritez d'avoir un moyen pratique de montrer votre travail aux autres sous forme de GIF. Vous pouvez prévisualiser vos créations sur l'application Figma, mais l'accès à vos créations peut devenir une tâche difficile une fois la connexion Internet interrompue. Jusqu'à ce que Figma propose une solution d'exportation conviviale, vous pouvez compter sur les méthodes que nous avons décrites dans l'article.

Nous espérons que ce guide vous a aidé à mieux comprendre comment obtenir un GIF de haute qualité à partir de vos créations Figma, quel que soit l'appareil que vous utilisez.

Utilisez-vous la version Web ou mobile de Figma ? Quelle est votre façon préférée d'exporter des GIF ? Faites-nous savoir dans la section commentaire ci-dessous.