Comment enregistrer un prototype Figma sur Mac

Publié le

Un MacBook qui affiche un prototype de téléphone, avec un petit point rouge d’enregistrement dans la barre des menus

En bref : Ouvre le prototype avec Present, active Hide UI, appuie sur R pour relancer, puis fais Maj-Commande-5 et choisis « Enregistrer la partie sélectionnée » autour du prototype.[1][2] Arrête avec Commande-Contrôle-Échap : la vidéo est enregistrée sur ton bureau.[1] Ton pointeur sera dans la vidéo, alors bouge-le le moins possible.

macOS a un enregistreur d’écran intégré, et il s’en sort bien avec les prototypes Figma. L’astuce, c’est de préparer le prototype avant d’enregistrer : chaque morceau d’interface Figma laissé à l’écran finit dans la vidéo.

Prépare le prototype dans Figma

  1. Dans l’onglet Prototype du panneau de droite, sans rien sélectionner, choisis l’appareil et la couleur de fond. Ce fond entoure l’appareil en mode présentation : prends quelque chose de calme.[3]
  2. Ouvre le prototype avec Present, ou ⌘ Option Entrée.[2]
  3. Dans le menu d’options, active Hide UI pour cacher la barre d’outils et le pied de page.[2]
  4. Désactive Show hints on click. Sinon, un clic hors d’une zone cliquable entoure en bleu toutes les zones cliquables, en plein dans ta vidéo.[2]
  5. Appuie sur R pour revenir au premier écran du parcours.[2]

Enregistre avec Maj-Commande-5

  1. Appuie sur Maj Commande 5. La barre de l’app Capture d’écran apparaît.[1]
  2. Choisis Enregistrer la partie sélectionnée et trace le cadre autour du prototype. Enregistrer l’écran complet marche aussi si tu recadres après.[1]
  3. Facultatif : dans Options, choisis un micro pour commenter la démo, ou un minuteur pour avoir le temps de reprendre le trackpad.[1]
  4. Clique sur Enregistrer et déroule ton parcours.
  5. Arrête avec le bouton d’arrêt de la barre des menus, ou Commande Contrôle Échap.[1]

Par défaut, la vidéo est enregistrée sur ton bureau.[1] Tu peux la couper dans QuickTime, ou la convertir si tu veux un GIF de ton prototype Figma.

Ce que Maj-Commande-5 ne fait pas pour un prototype

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

Pour aller plus loin : un enregistreur qui ne voit que le prototype

Proto to Video marche dans Chrome sur ton Mac. Ouvre le prototype avec Present, appuie sur Option Maj R, déroule le parcours, appuie encore. La vidéo est recadrée aux bords du prototype, sans pointeur ni interface Figma, et tu choisis MP4, GIF ou WebM. Si tu veux quand même montrer où tu as tapé, les cercles de tap le font plus proprement qu’un curseur. C’est gratuit pour commencer.

FAQ

Comment filmer un prototype Figma sur Mac ?

Ouvre le prototype avec Present, active Hide UI dans le menu d’options, puis fais Maj-Commande-5, choisis « Enregistrer la partie sélectionnée » et clique sur Enregistrer. Arrête avec Commande-Contrôle-Échap ; la vidéo arrive sur ton bureau (Assistance Apple, aide de Figma).

Où vont les enregistrements d’écran sur Mac ?

Par défaut, les enregistrements faits avec Maj-Commande-5 sont enregistrés sur le bureau. Tu peux changer l’emplacement dans le menu Options de la barre Capture d’écran (Assistance Apple).

Peut-on enregistrer un prototype Figma sur Mac sans le curseur ?

L’enregistreur du Mac filme le pointeur. Un enregistreur fait pour les prototypes Figma, comme l’extension Chrome Proto to Video, enregistre le prototype sans curseur ni interface Figma.

Sources

  1. Assistance Apple. Procédure d’enregistrement de l’écran du Mac. https://support.apple.com/fr-fr/102618
  2. Figma Learn, aide de Figma. Play your prototypes. (en anglais) https://help.figma.com/hc/en-us/articles/360040318013
  3. Figma Learn, aide de Figma. Set prototype device and background settings. (en anglais) https://help.figma.com/hc/en-us/articles/21158597546391

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

Autres articles