How to record a Figma prototype on Mac

Published

A MacBook showing a phone prototype with a small red recording dot in the menu bar

In short: Open the prototype with Present, turn on Hide UI, press R to restart, then press Shift-Command-5 and choose Record Selected Portion around the prototype.[1][2] Stop with Command-Control-Esc: the video is saved to your desktop.[1] Your pointer will be in the recording, so move it as little as you can.

macOS has a screen recorder built in, and it does a decent job with Figma prototypes. The trick is to prepare the prototype before you hit record, because every bit of Figma interface you leave on screen ends up in the video.

Prepare the prototype in Figma

  1. In the Prototype tab of the right sidebar, with nothing selected, pick the device and the background color. That background is what surrounds the device in presentation view, so pick something calm.[3]
  2. Open the prototype with Present, or ⌘ Option Return.[2]
  3. In the options menu, turn on Hide UI to hide the toolbar and footer.[2]
  4. Turn off Show hints on click. Otherwise a click outside a hotspot draws blue boxes on every clickable area, right in your video.[2]
  5. Press R to go back to the first screen of the flow.[2]

Record with Shift-Command-5

  1. Press Shift Command 5. The Screenshot toolbar appears.[1]
  2. Choose Record Selected Portion and drag the box around the prototype. Record Entire Screen also works if you crop later.[1]
  3. Optional: in Options, pick a microphone to talk over the demo, or a timer to get your hand back on the trackpad.[1]
  4. Click Record and click through your flow.
  5. Stop with the Stop button in the menu bar, or Command Control Esc.[1]

By default, the recording is saved to your desktop.[1] It’s a video file you can trim in QuickTime, or convert if you need a GIF of your Figma prototype.

What Shift-Command-5 can’t do for a prototype

Your Figma prototype as a video, without the cursor. Proto to Video records the prototype you open with Present and exports MP4, GIF or WebM, cropped to your frame, with no cursor or Figma interface. Free for Chrome.

Add to Chrome — it's free

Going further: a recorder that only sees the prototype

Proto to Video works in Chrome on your Mac. Open the prototype with Present, press Option Shift R, click through, press it again. The video is cropped to the prototype’s edges with no pointer and no Figma interface, and you choose MP4, GIF or WebM. If you still want viewers to see where you tapped, tap circles do it more cleanly than a cursor. It’s free to start.

FAQ

How do I screen record a Figma prototype on a Mac?

Open the prototype with Present, turn on Hide UI in the options menu, then press Shift-Command-5, choose Record Selected Portion and click Record. Stop with Command-Control-Esc; the recording is saved to your desktop (Apple Support, Figma Learn).

Where do Mac screen recordings go?

By default, recordings made with Shift-Command-5 are saved to your desktop. You can change the location in the Options menu of the Screenshot toolbar (Apple Support).

Can I record a Figma prototype on Mac without the cursor?

The Mac screen recorder includes the pointer. A recorder made for Figma prototypes, such as the Proto to Video Chrome extension, records the prototype without the cursor or Figma interface.

Sources

  1. Apple Support. Take a screen recording on Mac. https://support.apple.com/en-us/102618
  2. Figma Learn. Play your prototypes. https://help.figma.com/hc/en-us/articles/360040318013
  3. Figma Learn. Set prototype device and background settings. https://help.figma.com/hc/en-us/articles/21158597546391

Your Figma prototype as a video, without the cursor

Proto to Video records the prototype you open with Present and exports MP4, GIF or WebM, cropped to your frame, with no cursor or Figma interface. Free for Chrome.

Add to Chrome — it's free

More articles