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.

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 — lighting, reflections, 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.

One honest limit

This is a Studio-plan feature ($39/year, every site and file you capture) — it's not 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 URL-to-video flow covers that on any plan.

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.