Comment exporter un prototype Figma en vidéo
Publié le
En bref : Figma ne sait pas exporter un prototype cliquable en vidéo. Son nouvel export Motion sort du MP4, du WebM ou du GIF, mais seulement pour les animations faites dans Motion, pas pour les interactions d’un prototype.[1][2] Pour un prototype, tu le lances avec Present et tu l’enregistres : avec l’outil de ton Mac ou de Windows, ou avec une extension Chrome qui retire le curseur et l’interface de Figma.
La démo client est à 14 h. Tu veux une petite vidéo du parcours : le tap, le swipe, le joli Smart Animate sur le panier. Tu ouvres le panneau Export et… rien sur la vidéo. Tu n’as pas raté un bouton. Il n’existe pas pour les prototypes.
Figma peut-il exporter un prototype en MP4 ?
Pas un prototype. En juin 2026, Figma a lancé Figma Motion, en bêta ouverte, qui ajoute une timeline et des images clés au canevas.[2] Les animations Motion s’exportent :[1]
- Sélectionne le frame de premier niveau qui contient l’animation. Il porte l’icône Motion.
- Dans la section Export du panneau de droite, passe sur l’onglet Animated.
- Choisis le format : MP4, WebM, GIF ou SVG. La qualité vaut pour le MP4 et le WebM ; la boucle, pour le GIF seulement.
Parfait pour l’animation d’un logo ou un écran animé. Mais ça exporte l’animation posée sur le canevas. Ton prototype, avec ses écrans, ses taps et ses transitions, ne fait pas partie de cet export.[1] Franchement, si ton idée tient en un écran animé, Motion est le bon outil. Si c’est un parcours, lis la suite.
Alors comment transformer un prototype en vidéo ?
Tu le joues et tu l’enregistres. Ouvre le prototype en mode présentation avec Present, ou ⌘ Option Entrée sur Mac et Ctrl Alt Entrée sur Windows.[3] Puis prends l’outil d’enregistrement que tu as déjà :
- Mac : appuie sur Maj Commande 5, choisis « Enregistrer la partie sélectionnée », et arrête avec Commande Contrôle Échap. La vidéo est enregistrée sur ton bureau.[4]
- Windows : appuie sur Windows Maj R pour ouvrir la capture vidéo de l’outil Capture d’écran, sélectionne une zone, puis Démarrer. Le clip arrive dans ton dossier Captures d’écran.[5]
Deux réglages rendent l’enregistrement plus propre. En présentation, ouvre le menu d’options et active Hide UI pour cacher la barre d’outils et le pied de page de Figma.[3] Et appuie sur R pour relancer le parcours depuis le premier écran avant d’enregistrer.[3]
Ce qu’un enregistrement d’écran ne règle pas
- Ton curseur est dans la vidéo. Chaque hésitation, chaque petit cercle pendant que tu cherches le bouton suivant.
- Le recadrage se fait à la main. Tu traces un rectangle autour du prototype en espérant tomber pile sur les bords du frame.
- Des indices bleus peuvent apparaître. Si « Show hints on click » est actif, un clic hors d’une zone cliquable entoure les zones cliquables en bleu.[3]
- Tu obtiens un .mov ou un .mp4. Pas de GIF pour un README ou un shot Dribbble : il faut un autre outil après.
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 : enregistrer le prototype lui-même
On a créé Proto to Video pour ça. C’est une extension Chrome : ouvre ton prototype avec Present, appuie sur Alt Maj R (Option Maj R sur Mac), clique dans ton parcours, appuie encore. Tu obtiens un MP4, un GIF ou un WebM recadré aux bords du prototype, sans curseur ni interface Figma. Les taps peuvent s’afficher en petits cercles pour qu’on voie où tu as cliqué, et tu peux tout poser dans un cadre iPhone, Android, iPad ou MacBook. C’est gratuit pour commencer.
FAQ
Figma peut-il exporter un prototype en vidéo ?
Non. Figma Motion, en bêta ouverte depuis juin 2026, exporte les animations Motion en MP4, WebM, GIF ou SVG depuis l’onglet Animated de la section Export. Les interactions d’un prototype ne font pas partie de cet export : il faut enregistrer le prototype en mode présentation (aide de Figma).
Comment enregistrer un prototype Figma sans le curseur ?
Les outils d’enregistrement de Mac et de Windows filment le pointeur. Un enregistreur fait pour les prototypes Figma, comme l’extension Chrome Proto to Video, enregistre seulement le prototype, sans curseur ni interface Figma.
Comment cacher la barre d’outils de Figma pendant une présentation ?
En mode présentation, ouvre le menu d’options et active Hide UI. Figma cache la barre d’outils et le pied de page, et ajoute &hide-ui=1 au lien du prototype (aide de Figma, Play your prototypes).
Sources
- Figma Learn, aide de Figma. Export animations from Figma. (en anglais) https://help.figma.com/hc/en-us/articles/41307983648407
- Blog de Figma (24 juin 2026). Introducing Figma Motion: Your Canvas Now Has a Timeline (en anglais). https://www.figma.com/blog/introducing-figma-motion/
- Figma Learn, aide de Figma. Play your prototypes. (en anglais) https://help.figma.com/hc/en-us/articles/360040318013
- Assistance Apple. Procédure d’enregistrement de l’écran du Mac. https://support.apple.com/fr-fr/102618
- Support Microsoft. Utiliser l’outil Capture d’écran pour effectuer des captures d’écran. https://support.microsoft.com/fr-fr/windows/use-snipping-tool-to-capture-screenshots-00246869-1843-655f-f220-97299b865f6b
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