Turn a Figma prototype into a 3D mockup video

Why designers need this before the site ships

A finished Figma file is often the only artifact you have when it matters most: pitching a proposal, closing a client, adding a project to your portfolio while development is still underway. Figma can export a static frame or a clickable prototype link, but neither reads as "finished product" the way a device sitting in a lit 3D scene, scrolling smoothly, does. Screen-recording your own prototype clicks is the usual workaround, and it looks exactly like what it is.

Figma to video: what Figma can and can't export

Figma exports frames as PNG, JPG, SVG or PDF, and shares prototypes as a link. There is no built-in way to export a design as a video file. The usual workarounds are screen-recording the prototype, or a plugin that animates frames inside Figma. Both give you a flat recording of the canvas.

Mockvid takes a different route: it pulls the frame itself through the Figma API and stages it in a 3D device, where it scrolls like a live website under a camera move. The output is a regular MP4 (or any other Mockvid format), ready for a deck, a proposal or a feed.

How it works

1. Paste the Figma link. Drop a figma.com/file, /design or /proto URL into the same URL bar you'd use for a live site.
2. Connect your file. The first time, you'll be asked for a Figma personal access token (read-only file access is enough; create one under Figma → Settings → Security). It's stored only in your browser and used server-side just to fetch your frames; Mockvid never keeps it.
3. Pick your frames. A picker lists every frame in the file. Choose one for the desktop screen and, optionally, a second one for the phone screen.
4. Render. The frame is staged in the same real-time 3D device scene as a captured website, with the same lighting, reflections and camera motion, and exported like any other Mockvid mockup.

What this is for

• Client proposals. Send a moving mockup instead of a static Figma link. It reads as a decision, not a draft.
• Portfolio pieces that never shipped. Concept work, pitch decks, work-in-progress projects still under NDA before launch.
• Pre-launch marketing. Tease a redesign on social before the new site is live.

Two limits

It renders frames, not prototype interactions. A tall frame scrolls from top to bottom inside the device, but clicks, overlays and Smart Animate transitions from your prototype are not played. For those, a screen recording of the prototype is still the right tool.

And it is a Studio-plan feature ($39/year, every site and file you capture). It isn't part of the free tier or the One Site plan, since it runs through the Figma API rather than a browser capture. If you only need mockups of live, shipped sites, the regular website mockup video flow covers that on any plan, free in 720p.

Studios juggling both live-site deliveries and pre-launch pitches: see how pricing works across a whole book of work on the agencies page. Solo designers: the web designers page covers the per-project math.

Frequently asked

Can Figma export a prototype as a video?

Not natively. Figma exports frames as PNG, JPG, SVG or PDF and shares prototypes as links. To get a video file you need a screen recording, a plugin, or a tool like Mockvid that renders the frame into a video.

Do I need a live website to use Mockvid?

No. With Studio, a Figma frame goes through the same 3D scene, camera motions and exports as a captured website. Without Studio, Mockvid works from the URL of a live or staging site.

Is my Figma token stored by Mockvid?

No. The personal access token stays in your browser and is only sent to fetch the frames you pick. A read-only token is enough.

Can I put one frame on the laptop and another on the phone?

Yes. Pick a desktop frame for the laptop and, optionally, a mobile frame for the phone, so the responsive design shows on both devices.