Comment exporter un prototype Figma en GIF
Publié le
En bref : Figma ne sait pas exporter un prototype en GIF animé. Son export classique donne du PNG, JPG, SVG ou PDF, et un GIF animé posé dans un design s’exporte en image fixe.[1][3] Figma Motion peut sortir un GIF, mais seulement d’une animation faite dans Motion.[2] Pour un parcours de prototype, tu l’enregistres pendant qu’il se joue, puis tu sauves l’enregistrement en GIF.
Le GIF reste le moyen le plus simple de montrer une interaction dans un README, une page Notion, un ticket Jira ou un fil Slack. Il se lance tout seul, tourne en boucle, personne n’a à cliquer sur lecture. Du coup, c’est frustrant que la seule chose que Figma n’exporte pas, ce soit un GIF de ton prototype.
Qu’est-ce que Figma peut exporter en GIF ?
| Ce que tu sélectionnes | Ce que Figma exporte |
|---|---|
| Un frame ou un calque (design fixe) | PNG, JPG, SVG ou PDF.[3] Pas de GIF. |
| Un GIF animé posé dans le design | Une image fixe. Les GIF animés ne bougent qu’en mode présentation.[1] |
| Un frame animé avec Figma Motion | MP4, WebM, GIF ou SVG, depuis l’onglet Animated de la section Export. Le GIF a une option de boucle.[2] |
| Un prototype (écrans, taps, transitions) | Rien. Il se joue, c’est tout.[4] |
Motion est donc le seul chemin intégré vers un GIF qui bouge, et il marche sur les animations Motion, pas sur les interactions de ton prototype.[2] Si ton Smart Animate vit dans le prototype, il ne sortira pas.
Comment obtenir un GIF d’un parcours de prototype
- Ouvre le prototype avec Present.[4]
- Dans le menu d’options, active Hide UI pour que la barre d’outils et le pied de page restent hors champ.[4]
- Appuie sur R pour relancer le parcours depuis le début.[4]
- Enregistre l’écran pendant que tu cliques. Notre guide pour exporter un prototype Figma en vidéo détaille les outils de Mac et de Windows.
- Convertis la vidéo en GIF et coupe-la pour que la boucle commence et finisse sur le même écran.
Pourquoi un GIF tiré d’un enregistrement d’écran rend mal
- Le poids. Un enregistrement plein écran converti en GIF pèse lourd. Garde-le étroit et court.
- Le curseur. Il bouge sur chaque image, ce qui alourdit aussi le fichier.
- La boucle. Si la dernière image n’est pas le premier écran, le GIF saute en recommençant.
- Deux outils. Un enregistreur, un convertisseur, puis un recadrage. Et tout recommencer à chaque nouvelle version du design.
Ton prototype Figma en vidéo, sans curseur. Proto to Video enregistre le prototype que tu ouvres avec Present et l’exporte en MP4, GIF ou WebM, recadré sur ta frame, sans curseur ni interface Figma. Gratuit pour Chrome.
Ajouter à Chrome — c’est gratuitPour aller plus loin : du prototype au GIF en une étape
Proto to Video enregistre le prototype que tu ouvres avec Present et l’exporte directement en GIF, MP4 ou WebM. Sans curseur, sans interface Figma, recadré sur le frame. Le GIF peut monter à 800 px de large avec l’offre Pro (480 px en gratuit), largement assez pour un README ou un ticket. Et comme c’est une extension Chrome, une nouvelle version tient en un raccourci : Alt Maj R.
FAQ
Peut-on exporter un GIF depuis Figma ?
Seulement depuis Figma Motion : un frame de premier niveau animé dans Motion s’exporte en GIF depuis l’onglet Animated de la section Export. Les designs fixes s’exportent en PNG, JPG, SVG ou PDF, et un GIF animé posé dans un design s’exporte en image fixe (aide de Figma).
Pourquoi mon GIF est fixe quand je l’exporte de Figma ?
Figma ne peut exporter les GIF animés qu’en images fixes. Ils bougent en mode présentation, mais restent fixes dans l’éditeur et dans les exports (aide de Figma, Use animated GIFs in prototypes).
Comment transformer un Smart Animate en GIF ?
Le Smart Animate est une transition de prototype : Figma ne l’exporte pas. Lance le prototype avec Present, enregistre-le et sauve l’enregistrement en GIF, ou utilise un enregistreur qui exporte directement en GIF.
Sources
- Figma Learn, aide de Figma. Use animated GIFs in prototypes. (en anglais) https://help.figma.com/hc/en-us/articles/360041486873
- Figma Learn, aide de Figma. Export animations from Figma. (en anglais) https://help.figma.com/hc/en-us/articles/41307983648407
- Figma Learn, aide de Figma. Export formats and settings for static designs. (en anglais) https://help.figma.com/hc/en-us/articles/13402894554519
- Figma Learn, aide de Figma. Play your prototypes. (en anglais) https://help.figma.com/hc/en-us/articles/360040318013
Ton prototype Figma en vidéo, sans curseur
Proto to Video enregistre le prototype que tu ouvres avec Present et l’exporte en MP4, GIF ou WebM, recadré sur ta frame, sans curseur ni interface Figma. Gratuit pour Chrome.
Ajouter à Chrome — c’est gratuit