How to export a Figma prototype to video
Published
In short: Figma can’t export a clickable prototype to video. Its new Motion export saves MP4, WebM or GIF, but only for animations built in Motion, not for prototype interactions.[1][2] For a prototype, you play it with Present and record that, with your Mac or Windows screen recorder or with a Chrome extension that crops out the cursor and Figma’s interface.
The client demo is at 2 pm. You want a short video of the flow: tap, swipe, the nice Smart Animate on the cart. You open the Export panel and… nothing about video. You’re not missing a button. It doesn’t exist for prototypes.
Can Figma export a prototype to MP4?
Not a prototype. In June 2026 Figma launched Figma Motion, in open beta, which adds a timeline and keyframes to the canvas.[2] Motion animations can be exported:[1]
- Select the top-level frame that holds the animation. It’s marked with the Motion icon.
- In the Export section of the right sidebar, switch to the Animated tab.
- Pick a format: MP4, WebM, GIF or SVG. Quality applies to MP4 and WebM; Loop applies to GIF only.
That’s great for a logo animation or a single animated screen. But it exports the animation on the canvas. Your prototype, with its screens, taps and transitions, isn’t part of that export.[1] Honestly, if your idea is one animated screen, Motion is the right tool. If it’s a flow, keep reading.
How do you turn a prototype into a video, then?
You play it and record it. Open the prototype in presentation view with Present, or ⌘ Option Return on Mac and Ctrl Alt Enter on Windows.[3] Then use the screen recorder you already have:
- Mac: press Shift Command 5, choose Record Selected Portion, and stop with Command Control Esc. The recording is saved to your desktop as a .mov file.[4]
- Windows: press Windows Shift R to open Snipping Tool’s video capture, select an area, then Start. The clip lands in your Screenshots folder.[5]
Two settings make the recording cleaner. In presentation view, open the options menu and turn on Hide UI to hide Figma’s toolbar and footer.[3] And press R to restart the flow from the first screen before you hit record.[3]
What a screen recording doesn’t fix
- Your cursor is in the video. Every hesitation, every little circle while you look for the next button.
- The crop is by hand. You drag a rectangle around the prototype and hope it lines up with the frame edges.
- Blue hints can flash. If “Show hints on click” is on, clicking outside a hotspot draws blue boxes on clickable areas.[3]
- You get a .mov or an .mp4 only. No GIF for a README or a Dribbble shot, so you need another tool after.
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 freeGoing further: record the prototype itself
We built Proto to Video for exactly this. It’s a Chrome extension: open your prototype with Present, press Alt Shift R (Option Shift R on Mac), click through your flow, press it again. You get an MP4, GIF or WebM cropped to the prototype’s edges, with no cursor and no Figma interface. Taps can show as small circles so viewers still see where you clicked, and you can drop the whole thing in an iPhone, Android, iPad or MacBook frame. It’s free to start.
FAQ
Can Figma export a prototype as a video?
No. Figma Motion, in open beta since June 2026, exports Motion animations to MP4, WebM, GIF or SVG from the Export section’s Animated tab. Prototype interactions are not part of that export, so you need to record the prototype in presentation view (Figma Learn).
How do I record a Figma prototype without the cursor?
Built-in screen recorders on Mac and Windows record your pointer. A recorder made for Figma prototypes, such as the Proto to Video Chrome extension, records the prototype only and leaves the cursor and Figma interface out.
How do I hide the Figma toolbar while presenting a prototype?
In presentation view, open the options menu and turn on Hide UI. Figma hides the toolbar and footer and adds &hide-ui=1 to the prototype link (Figma Learn, Play your prototypes).
Sources
- Figma Learn. Export animations from Figma. https://help.figma.com/hc/en-us/articles/41307983648407
- Figma Blog (June 24, 2026). Introducing Figma Motion: Your Canvas Now Has a Timeline. https://www.figma.com/blog/introducing-figma-motion/
- Figma Learn. Play your prototypes. https://help.figma.com/hc/en-us/articles/360040318013
- Apple Support. Take a screen recording on Mac. https://support.apple.com/en-us/102618
- Microsoft Support. Use Snipping Tool to capture screenshots. https://support.microsoft.com/en-us/windows/use-snipping-tool-to-capture-screenshots-00246869-1843-655f-f220-97299b865f6b
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