How to Record Figma Prototypes

Recording your Figma prototypes transforms static design presentations into dynamic walkthroughs that stakeholders can review asynchronously, testers can follow along with, and your portfolio can showcase with full interaction fidelity. Whether you need to demonstrate a complex multi-screen flow for a client approval or capture usability testing sessions for later analysis, the right recording setup makes all the difference.

This guide covers four approaches — from zero-install macOS tools to dedicated recording apps — so you can pick the method that fits your workflow and budget.

Quick Comparison

Method 1: macOS Screenshot Toolbar + Figma Presentation Mode

The fastest path if you already have Figma open and need a quick recording without installing anything.

Step 1: Prepare Your Prototype in Figma

Open your Figma file and select the starting frame of your prototype. Click the Play button (▶) in the top-right corner of the Figma editor, or press ⌥ Option + ⌘ Cmd + Return to launch Presentation mode. Choose Fill Screen or a specific device frame from the presentation options dropdown.

Step 2: Set Prototype Flow Options

In Presentation mode, click the Options icon (gear) in the top toolbar. Enable Show Hotspot Hints on Click if you want blue highlights showing interactive areas — useful for demos but distracting for portfolio recordings. Set the background color to match your design system (typically #1E1E1E for dark or #F5F5F5 for light).

Step 3: Open Screenshot Toolbar

Press ⌘ Cmd + Shift + 5 to open the macOS Screenshot Toolbar. Select Record Selected Portion and drag the recording area to match your Figma presentation window exactly. Click Options to select your microphone if you want voiceover narration.

Step 4: Record and Navigate

Click Record in the Screenshot Toolbar, then interact with your Figma prototype — clicking through screens, triggering animations, and demonstrating hover states. The toolbar hides automatically during recording. When finished, click the Stop button in the menu bar or press ⌘ Cmd + Control + Escape.

Step 5: Review and Share

Your recording saves to the Desktop (or your chosen location) as a .mov file. Preview it with Quick Look (press Space) and trim if needed by opening in QuickTime Player and selecting Edit → Trim (⌘ Cmd + T).

Limitations: No webcam overlay, no system audio capture, no zoom effects, and the .mov output is large (often 50-100MB for a 2-minute recording).

Method 2: Screenify Studio — Auto-Zoom Follows Your Clicks

Screenify Studio's auto-zoom feature is particularly effective for prototype recordings because it automatically magnifies the area where you click, making small UI elements and micro-interactions clearly visible to viewers without manual pan-and-zoom editing.

Step 1: Set Up Your Recording

Open Screenify Studio and select your capture area. For Figma prototypes, choose either Window Capture (to record just the Figma window) or Custom Area (to crop precisely to the prototype viewport). Enable System Audio if your prototype includes sound interactions, and toggle on your microphone for voiceover.

Step 2: Configure Auto-Zoom

In the recording settings, enable Auto-Zoom. This feature tracks your cursor and automatically creates smooth zoom animations centered on each click — perfect for prototype recordings where viewers need to see button states, dropdown menus, and form interactions at readable scale. Adjust the zoom intensity based on your prototype's UI density: higher zoom for mobile prototypes with small tap targets, moderate zoom for desktop flows.

Step 3: Add Webcam Overlay (Optional)

If you're recording a walkthrough for stakeholders or a portfolio case study, enable the webcam overlay. Position it in a corner that doesn't overlap your prototype's primary navigation areas. A face on screen increases engagement for design presentations — viewers connect your commentary with your expressions.

Step 4: Record Your Prototype Flow

Launch Figma's Presentation mode (⌥ Option + ⌘ Cmd + Return), then start recording in Screenify Studio. Walk through your prototype flow at a natural pace. The auto-zoom handles emphasis automatically — when you click a small button, viewers see it zoom in smoothly; when you scroll a long page, the view follows naturally.

Step 5: Export and Share

After stopping the recording, Screenify Studio processes the video with Metal-accelerated export. Choose your output format and resolution. Share directly via link or download the file for embedding in Notion, Confluence, or your portfolio site.

Why this works well for Figma: Prototype recordings often involve clicking small interactive elements that are hard to see at full-screen scale. Auto-zoom solves this without post-production editing — each click automatically gets a smooth zoom-in, making micro-interactions and hover states clearly visible.

Method 3: Loom Chrome Extension

Loom integrates directly into your browser workflow, making it convenient for quick prototype recordings you want to share with your team immediately.

Step 1: Install and Configure Loom

Install the Loom Chrome Extension from the Chrome Web Store. Click the Loom icon in your browser toolbar and sign in. Grant camera and microphone permissions when prompted.

Step 2: Open Figma in Browser

Navigate to your Figma file at figma.com (not the desktop app — Loom's Chrome extension only captures browser tabs). Enter Presentation mode by clicking the Play button or pressing ⌥ Option + ⌘ Cmd + Return (macOS shortcut works in browser too).

Step 3: Start Recording

Click the Loom extension icon and select Current Tab as your recording source. Enable or disable your webcam and microphone as needed. Click Start Recording — Loom shows a 3-second countdown, then begins capturing.

Step 4: Navigate and Annotate

Click through your prototype while narrating. Loom's toolbar offers a drawing tool for on-screen annotations — useful for highlighting specific UI elements during design reviews. You can also use Ctrl + Shift + L to pause/resume recording.

Step 5: Share via Link

When you stop recording, Loom automatically uploads and generates a shareable link. Your team can add timestamped comments directly on the video — particularly useful for async design critique sessions where reviewers can point to specific moments in the flow.

Limitations: Recording quality caps at 1080p on free plans. The Chrome extension only works with Figma in the browser (not the desktop app). Videos are hosted on Loom's servers, so you need internet access for playback.

Method 4: OBS Studio — Multi-Source Composition

OBS gives you full control over scene composition when you need to combine your Figma prototype with multiple video sources, overlays, or live annotations.

Step 1: Create a New Scene

Open OBS Studio and create a new Scene (click + in the Scenes panel). Name it something descriptive like "Figma Prototype Recording."

Step 2: Add Figma as a Window Source

In the Sources panel, click + → Window Capture. Select your Figma window from the dropdown. If using Figma in the browser, select the Chrome/Arc/Firefox window. Resize and position the source to fill most of your canvas. Use Edit → Transform → Fit to Screen (⌘ Cmd + F) for quick fitting.

Step 3: Add Webcam Source

Add another source: + → Video Capture Device. Select your webcam, resize it to a small rectangle (roughly 320x240), and position it in a corner. Right-click the webcam source and select Filters → add Chroma Key or Background Removal if you want a floating-head effect.

Step 4: Configure Audio

In the Audio Mixer panel, ensure your microphone is active and system audio is captured. On macOS, OBS requires a virtual audio driver like BlackHole to capture system sounds. Add it via Settings → Audio → Global Audio Devices.

Step 5: Set Output Format

Go to Settings → Output and set:

• Recording Format: MKV (or MP4 with "Remux to MP4" post-recording)
• Encoder: Apple VT H264 Hardware Encoder (uses Apple Silicon)
• Resolution: Match your Figma prototype dimensions
• FPS: 30 (sufficient for UI recordings; 60 if you have scroll animations)

Step 6: Record

Click Start Recording in OBS, switch to your Figma Presentation mode, and walk through the prototype. OBS records in the background with no visible UI interfering with your Figma window. Press your configured hotkey to stop recording when done.

Best for: Recordings that need multiple camera angles, overlay graphics, or when you plan to stream the design review live to an audience.

Tips for Better Figma Prototype Recordings

Resolution and Frame Settings

Set your Figma frame dimensions to match common recording resolutions. For 1080p recordings, design at 1920x1080 or use Figma's Presentation → Fill Screen option with a 16:9 browser window. If recording a mobile prototype, consider placing the device frame on a 1920x1080 background in Figma so the recording shows context around the phone frame.

Prototype Interaction Preparation

Before recording, rehearse the entire flow once. Open Figma's Prototype panel (right sidebar) and verify every connection works — dead-end frames interrupt your recording flow and require re-takes. Use Restart Prototype (⌘ Cmd + .) if you hit a dead end during recording.

Hotspot Hints Strategy

Figma's Show Hotspot Hints on Click (the blue rectangles) helps during internal team demos but looks unprofessional in client presentations or portfolio pieces. Decide before recording: toggle this OFF for polished deliverables, ON for usability walkthroughs where you want viewers to see available interactions.

Cursor Visibility

Your cursor guides the viewer's eye. Move deliberately between interactive elements — avoid random mouse movements. If your recording tool supports cursor highlighting (like Screenify Studio's cursor effects), enable it so viewers can track exactly where you're clicking, especially on dense UI screens.

Narration Pacing

When recording with voiceover, pause for 1-2 seconds after each screen transition before speaking. This gives viewers time to visually process the new screen before your commentary begins. Describe what you're doing and why — "I'm clicking the checkout button here to show the payment flow" rather than just clicking silently.

Multi-Device Prototype Recording

If your Figma file includes both desktop and mobile variants, record them as separate clips rather than switching mid-recording. Set up the desktop prototype in Presentation mode at full resolution, record that flow completely, then switch to the mobile prototype and record separately. This avoids awkward resolution changes mid-video and lets you optimize each recording for its target viewport.

Troubleshooting

Recording Shows Browser Chrome or Figma UI Instead of Just the Prototype

If your recording captures Figma's toolbar, layers panel, or browser address bar, you're not in full Presentation mode. Press ⌥ Option + ⌘ Cmd + Return (not just the Play button) to enter fullscreen presentation. Alternatively, use Record Selected Portion in macOS Screenshot Toolbar and draw the selection to cover only the prototype viewport area.

Prototype Animations Appear Choppy in Recording

This happens when your recording FPS is too low for Figma's animation speed. Ensure you're recording at 30fps minimum (60fps for Spring or complex Smart Animate transitions). In OBS, check Settings → Video → Common FPS Values and set to 30 or 60. For macOS Screenshot Toolbar, the default recording is 30fps which should be sufficient for most transitions.

Cursor Disappears or Lags Behind During Fast Interactions

Some recording tools introduce cursor rendering delays on high-DPI displays. If your cursor appears to lag behind your actual clicks, disable hardware cursor capture in your recording tool's settings. In OBS, try switching from Window Capture to Display Capture — the latter captures the cursor at the system level with no lag.

Audio Sync Issues When Recording Long Prototype Walkthroughs

For recordings longer than 5 minutes, audio drift can occur with some tools. Record a short test clip first and verify audio stays in sync. If you notice drift, reduce your recording resolution (1080p instead of 4K) to lower system load, close other resource-heavy applications, and ensure your Mac isn't thermal throttling during recording.

Figma Prototype Doesn't Respond to Clicks During Recording

Occasionally, Figma's Presentation mode loses focus when you start a recording tool. After starting your recording, click once directly on the Figma prototype window to ensure it has keyboard and mouse focus. If using OBS with Window Capture, the captured window remains interactive — you can click through the prototype while OBS records in the background.

Large File Sizes from macOS Screenshot Toolbar

The .mov files from macOS Screenshot Toolbar use Apple ProRes codec, which prioritizes quality over file size. A 2-minute recording can easily reach 100-200MB. To reduce file size, open the recording in QuickTime Player and select File → Export As → 1080p which re-encodes to H.264 at roughly 10-20% of the original size. For more compression options, see our video compression guide.

FAQ

Q: Can I record Figma prototypes with page transitions and animations?

Yes. All four methods capture whatever appears on screen, including Figma's built-in transitions (dissolve, move in, push, slide) and Smart Animate effects. Record at 30fps minimum to capture smooth animations. For complex Spring animations, consider 60fps to avoid visual stuttering in playback.

Q: What resolution should I record at?

Record at 1080p (1920x1080) for general sharing. For portfolio pieces or client presentations viewed on large screens, record at 1440p or 4K if your hardware supports it. The recording resolution should match your Figma presentation viewport — check Presentation → Options for the active dimensions.

Q: How do I capture hover states in my Figma prototype?

Figma's prototype interactions include While Hovering triggers. These appear during Presentation mode when you hover over configured elements. All recording methods capture these because they record the screen output. Move your cursor slowly over hover-triggered elements so viewers can clearly see the state change.

Q: Should I record the Figma desktop app or the browser version?

Use the desktop app for Screenify Studio, OBS, and macOS Screenshot Toolbar — it runs smoother and avoids browser chrome. Use the browser version only if you need Loom's Chrome extension or want to record a specific browser viewport size.

Q: How do I record audio from Figma prototype interactions?

Some prototypes include audio feedback (click sounds, notification tones). To capture these, you need system audio recording. Screenify Studio captures system audio natively on macOS. For OBS, install BlackHole audio driver. macOS Screenshot Toolbar cannot capture system audio. Loom captures tab audio in Chrome.

Q: What's the ideal video length for a prototype walkthrough?

Keep recordings under 3 minutes for stakeholder reviews — attention drops sharply after that. For detailed usability testing recordings, capture the full session (5-15 minutes) and add chapter markers or timestamps in your sharing platform. For portfolio pieces, edit down to 60-90 seconds highlighting the key interactions.

Q: Can I add annotations or callouts during recording?

Loom offers built-in drawing tools during recording. For OBS, add a Browser Source with a transparent annotation tool. With Screenify Studio, the auto-zoom naturally emphasizes your click targets. For post-production annotations, export your recording and use a video editor like iMovie or Descript to add callout graphics.

Q: How do I handle prototype dead-ends during recording?

If you hit an unconnected frame, press R in Figma Presentation mode to restart the prototype from the beginning, or press ← Backspace to go back one step. Plan your click path before recording and keep Figma's Prototype panel connections visible during rehearsal to verify every path connects properly.

---

Recording Figma prototypes effectively combines good prototype preparation with the right capture tool for your context. For quick team shares, macOS Screenshot Toolbar or Loom work fine. For portfolio-quality recordings with automatic emphasis on interactions, Screenify Studio's auto-zoom handles the production work for you. And for complex multi-source setups, OBS provides unlimited flexibility.

For more recording techniques, check out our guides on screen recording on Mac and recording with webcam overlay.