How to Record a Figma Prototype Walkthrough on Mac

To record a Figma prototype walkthrough on a Mac, give the prototype a window of its own, record only that window with your microphone on, and click through the flow while you explain each decision. In Screen Bolt, click Window in the recording bar, pick the prototype window, choose a microphone under Mic and press the red record button. When the editor opens, zoom regions have already been created from your clicks. If you only need a quick, unedited clip for your own team, the free macOS Screenshot toolbar (⌘⇧5, Command-Shift-5) records the screen and your voice.

What a good prototype walkthrough looks like

• Only the prototype is on screen. No Slack sidebar, no layers panel, no browser bookmarks with client names.
• Every interaction is visible. A viewer on a laptop can see the toggle flip, the menu open and the error state appear.
• The narration explains why, not what. Stakeholders can see that you clicked "Continue". They can't see that you removed a step because support kept getting the same question.
• One flow per video. A stakeholder can watch it between meetings and reply with feedback on a specific screen.
• It's a plain video file. An MP4 plays in nearly any chat tool, doc or email client.

Why record instead of a live review

In a live review, part of the time goes to screen-sharing problems, people joining late and someone asking you to go back two screens. A recording lets each person watch at their own pace, pause on a screen and replay the interaction they're unsure about.

A recording also keeps your reasoning. Three months later, when someone asks why checkout has two steps instead of one, the answer is in the video, in your words.

Live sessions still work better for early exploration, when you want to sketch with people rather than present to them. A common split is to send the recorded walkthrough first and keep the meeting for the disagreements it brings up.

Pick your recording tool

The built-in way: press ⌘⇧5 and choose Record Selected Portion. Drag the frame around the prototype, open Options to pick your microphone, then click Record. Stop with the stop button in the menu bar. The file is saved to the Desktop unless you changed the location under Options.

Pick the built-in toolbar if the flow is one or two screens, the viewers are designers who know what to look for, and you don't need to cut anything.

Pick Screen Bolt if the audience includes PMs, engineers or clients who need small interactions zoomed in, or if you want to cut mistakes, add a background and clean up your audio before sending. We make Screen Bolt, so weigh that recommendation accordingly. The free version doesn't expire and doesn't limit recording length; its limits are the export limits in the table.

For more on window capture in general, see how to record a single window on Mac.

Prepare the prototype

1. Give the prototype its own window. Close or move everything else out of it, so the window shows only the flow you're presenting.
2. Load the first frame of the flow. Start on the screen the viewer should see first, not halfway through your last test run.
3. Click through the whole flow once. Dead hotspots and wrong links are easier to fix before you record than to explain during the take.
4. Size the window for the video. Screen Bolt captures at twice the window's size in points (it assumes a Retina display). A 1280×720 pt window records at 2560×1440, which leaves room for a sharp 1080p export. A 16:9 window also fills a 16:9 video without large empty bands.
5. Check the mock data. Replace real customer names, emails and internal URLs with placeholder content. Blurring in the editor works as a fallback, but clean data is safer.
6. Write short notes for each screen (see "Narrate the decisions" below).

Record the Figma prototype window

Before you start: Screen Bolt needs Screen Recording permission. On macOS 14, quit and reopen the app after granting it. The Microphone permission prompt appears the first time you record with a mic turned on. If anything is blocked, see Troubleshooting.

1. Open Screen Bolt. The recording bar floats above your other windows and doesn't appear in the recording.
2. Click Window. The Select Window to Record picker opens with live thumbnails.
3. Click the window that shows your prototype, then click Record Window (or press Return). This selects the window.
4. Click Mic and choose your microphone. A thin level meter on the Mic button shows it's picking up your voice.
5. Click Audio and choose Don't record system audio, unless the prototype plays sound. Otherwise notification sounds and other apps' audio end up in the take.
6. Optional: click Camera and choose a camera if stakeholders should see you. The round preview bubble on your screen is not recorded.
7. Click the red record button, switch to the prototype and walk through the flow.
8. Click Stop on the recording bar. The editor opens with your zooms. A few details that matter for prototypes:

• Shortcut: ⌥⌘4 (Option-Command-4) opens the window picker and starts recording once you confirm. It only works while Screen Bolt is the active app. Screen Bolt has no global hotkeys, so once you're clicking around in the prototype, stop with the Stop button on the bar.
• Covered windows still record. Window mode captures the window itself, so another window sliding over it during the take doesn't end up in the video.
• The picker lists only windows that are on screen and at least 150×150 pt. If your prototype window is minimized, restore it first.
• Tabs and address bars: Window mode records the whole window, including any tab bar, address bar and tab titles. To show only the prototype, choose Area instead, drag a rectangle around the canvas and click Record Area. Area mode records a fixed part of the screen, so don't move or resize the window during the take.
• Mistakes during the take: use Pause while you reset something. Discard and restart deletes the take and returns you to setup.

Zoom in on interactions

With Create zooms automatically on (the default), Screen Bolt turns your mouse clicks into zoom regions after you stop recording. How it decides:

• Clicks within 1 second and 200 px of each other are merged into one zoom.
• Drags are ignored.
• Each zoom holds for at least 1.8 seconds, and while zoomed the view follows your cursor.
• Typing does not create zooms.

That suggests two habits while recording. First, leave a beat between clicks so separate interactions get separate zooms. Second, rest the pointer on the element you're talking about, because the zoom centers on the cursor and there's no control to move a zoom's focus point by hand.

Then adjust the zooms by the type of interaction:

In the Zoom panel, Default Level (1.2× to 6.0×, default 2.0×) sets the level for new regions, and Apply to All Regions applies it to every existing zoom. On the zoom track you can drag a region to move it, drag its edges to change its length, or double-click it to cycle through levels.

Leave Auto Zoom on Click turned on. Turning it off disables every zoom in the preview and the export, including the ones you added by hand. To get rid of a few zooms, delete those regions instead.

The cursor is redrawn in the editor. In the Cursor panel, Size defaults to 3.0×, which can cover small UI in a design review, so lower it if the pointer hides what you're showing. Highlight on Click marks each click in a color you choose. More detail is in Editing Your Recording and our explainer on auto zoom.

Narrate the decisions

Viewers can see what you click. Use your voice for what they can't see. For each screen, cover four things:

1. The problem this screen solves.
2. What you chose.
3. What you rejected, and why.
4. The feedback you need, and from whom.

Screen Bolt's teleprompter keeps those notes next to the prototype without recording them. Open it with the Script button or ⇧⌘T (Shift-Command-T). Paste or type your notes, or use Import .txt. Cue markers such as [PAUSE] and [EMPHASIS] show as colored chips; they are reminders for you and don't change the recording. A walkthrough script can be this short:

Checkout, step 1. Goal: get first-time buyers to payment with fewer fields.
[PAUSE] Address autocomplete replaces four fields. Clicking into it now.
[EMPHASIS] Guest checkout is the default. Account creation moves to the confirmation screen.
Rejected: one long page. Too much scrolling on small laptop screens.
Feedback needed: engineering, is autocomplete feasible for launch?

In Auto Scroll mode, scrolling starts when the recording starts, and the speed keys (↑ / ↓) only respond while the teleprompter window has focus. In a click-through your focus is on the prototype, so Manual mode with notes that fit on one page usually works better: nothing moves until you want it to. Lower the opacity slider and place the window beside the prototype. For more on this technique, see how to read a script while recording.

Clean up your voice afterwards. In the Audio panel, Auto Audio Enhance turns on Noise Reduction, Volume Normalization and Voice Clarity. All three are off by default, apply only to the microphone track and run on your Mac. If macOS Voice Isolation was on when you recorded, Screen Bolt skips its own noise reduction for that recording.

If your webcam is on, check its corner in the Webcam panel (Position) so it doesn't cover prototype UI. New projects place it at the bottom left.

Trim, export and share with stakeholders

Cut the dead time. Press I at the start of a pause or a wrong click, O at the end, then click Cut I-O. Cut long loading moments rather than speeding them up: speed ramps play in the preview but are not exported. Avoid J and L for fast previewing, because they change the project's overall speed, and that speed is exported.

Export an MP4.

1. Click Export in the editor toolbar.
2. Under Format, choose MP4 (H.264, the safest choice for sharing).
3. Under Quality, choose 1080p (Pro) or 720p (the free version's maximum).
4. Check Save to (Desktop by default), then click Export. Finder shows the file when it's done.

Share it where the review happens. Screen Bolt doesn't upload anything or create share links. Post the MP4 in your design channel, doc or ticket, together with the link to the live prototype so reviewers can click through it themselves. Timeline markers don't appear in the export, so if the video covers several screens, list a few timestamps in your message.

Don't use the toolbar's Share button for this. It sends the raw, unedited recording.mov without your zooms, cuts or audio clean-up.

GIFs for one interaction (Pro only) work well in a ticket or design doc that shows a single micro-interaction. GIFs export at about 10 fps, silent and looping, at Standard (640 px wide) or HD (960 px wide). Recordings over 60 seconds are refused, and the export sheet measures the full recording rather than the trimmed part, so record the interaction as its own short take. At 10 fps, fast animations look choppier than in the prototype; use MP4 when the motion is the point. Format details are in Exporting Your Video.

Common mistakes

• Clicking quickly through several nearby elements. Clicks less than a second and 200 px apart become one zoom. Pause between interactions.
• Using live Blur zones in Window mode. In Window mode, Screen Bolt records the window directly, so a blur zone drawn over it doesn't hide anything in the video. Use Add Blur Region (B) in the editor, or Auto-Detect Sensitive Text, which finds email addresses (and optionally phone numbers and your own keywords) and blurs them. Review the results on the Blur track, and check them again if you cut or reorder clips after scanning.
• Expecting a device frame in the export. Device frames show in the editor preview but are not exported. If your prototype view already shows a phone frame, that frame is part of the pixels you record.
• Recording over 3 minutes on the free version and then trimming. The export sheet checks the full recording length, not the trimmed length. Record one flow per take and keep each take under 3 minutes.
• Narrating every click. "Now I click Next" adds nothing. Say why Next is where it is.
• Leaving system audio on. A Slack ping in the middle of your explanation of the empty state pulls attention away from it.

Related walkthroughs

If you're recording a live site for a client instead of a prototype, see how to record a website walkthrough video. If your engineers record their side of the handoff, how to record a code walkthrough for a pull request uses the same approach with code instead of frames.