How to Record a Figma Prototype Walkthrough

To record a Figma prototype, open it in presentation view, set the device and flows in the Prototype tab, hide Figma’s interface, and record that window with a screen recorder while you talk. Figma itself has no video export, so the quality of the walkthrough comes from how you prepare the prototype and how slowly you click.

This guide is for the video you send a client before or instead of a review call: “here’s the new checkout flow, and why it works this way”. Not a polished promo, a clear explanation.

Prepare the prototype before you hit record

Most messy prototype videos are messy because of the prototype settings, not the recording. Five minutes here saves you three takes.

Set the device and background

Prototype settings live in the right sidebar. Click an empty part of the canvas so nothing is selected, then open the Prototype tab. There you’ll find:

• Device: the type, orientation and model used in presentation view. A phone model wraps mobile designs in a realistic frame, which helps a client picture the real thing.
• Background: the color behind the prototype in presentation view. Pick something neutral that doesn’t compete with the design.
• Flows: the starting points of the journeys on the current page.

For desktop designs, a device frame usually gets in the way. Choose DeviceCustom Size (Fit) or DevicePresentation (Full) instead, so the design fills the window.

Give every journey its own flow

A flow starting point tells Figma where a journey begins, and you can have several. In presentation view, the flows appear in a sidebar on the left with their descriptions.

Name them the way the client thinks: “Sign up”, “Checkout”, “Change a booking”. Then each recording starts from a clean point, and pressing R takes you back to the start of the current flow if you need to begin again.

Check hover and delay interactions

Interactions that depend on timing are the ones that look broken on video. Play each flow once before recording and check these three triggers:

Trigger	What it does in Figma	What to do on video
While hovering	Shows a state only while the pointer stays on the hotspot, returns when it leaves	Move onto the element, hold still, say what changed
Mouse enter	Fires once when the pointer first enters the hotspot	Enter once, deliberately, and don’t drift back out
After delay	Moves on by itself after a set time on the frame, in milliseconds	Lengthen the delay for the recording or switch it to a click

The After delay screens are the usual trap: they move on while you’re still explaining them.

Set up presentation view

Open the prototype with Present in the toolbar, or press ⌘⌥Return. Then clean it up:

Record the window, not the screen

Record only the browser or Figma window that shows the prototype. Whole-screen recordings pick up your Dock, your other tabs and the notification you forgot about.

On macOS you can do this with the Screenshot toolbar: press ⌘⇧5, choose the tool that records a portion of the screen, and draw the frame around the prototype. Our guide to recording one window or part of your screen covers the options, including multiple monitors. If you’re new to recording on a Mac, start with how to screen record on Mac.

Before you start, run the 60-second pre-recording checklist: notifications off, unrelated tabs closed, test content in the design instead of a real customer’s data.

Click slower than feels natural

You know where every hotspot is. Your client doesn’t. On video, your normal pace looks frantic.

• Pause on each screen for a second or two before you click. Say what the screen is for.
• Move the pointer to the target first, then click. The viewer sees where you’re going before it happens.
• Hover on purpose. For hover states, move onto the element, hold still, and say what changes.
• Wait for transitions. Animated transitions and overlays need a moment. Clicking during an animation can skip it or land on the wrong hotspot.
• Don’t scroll fast. If a frame scrolls, scroll in small steps and stop where you want the client to look.

If the client might watch on a phone, highlighted clicks and a little zoom on small controls help. We cover when that helps and when it gets dizzying in auto zoom for screen recordings.

Narrate the decisions, not the clicks

“Now I click Continue” tells the client nothing they can’t see. The value of a walkthrough is the reasoning you’d otherwise explain in a meeting.

A simple structure for each flow:

1. What this flow is for: “This is how a returning customer changes a booking.”
2. The decision behind it: “We moved the date picker to the first step, because the brief says most changes are date changes.”
3. What’s still open: “The cancellation screen is a placeholder until we have the policy text.”
4. What you need back: “Can you check the wording on step two?”

For more on structuring a design presentation, including round two and before-and-after comparisons, see how to present a design to a client without a meeting. If the video is feedback rather than a presentation, giving design feedback by video has a different structure.

Send it with the prototype link

When you finish, send two things in one message: the video, and Figma’s prototype link for clients who want to click around. Put the question you need answered in the message too, not only at the end of the video.

Hi Marco, here’s a short walkthrough of the booking flow. The prototype link is below if you want to click through it yourself. One question: are you happy with the date coming first? A yes or no by Friday keeps us on schedule.

https://justrec.app/v/k3f9Qa

Booking flow, first clickable versionJustRec · 2:48

If you send this kind of video often, our page on sending videos to clients explains how the link and the client page work, and the guide to async video for client communication covers when a video replaces a call.