skills.rest
figma
figmaOFFICIAL
Explore all skills by this author →
WebsiteGitHub

video-interaction-mapper

Extract key moments from video screen recordings and build annotated Figma storyboards.

1.9k|171|Updated Aug 5, 2025
Search Tags:#Figma#video analysis#screen recording#UI storyboarding#interaction annotation
One-click install
npx skills add https://github.com/figma/mcp-server-guide --skill video-interaction-mapper
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: video-interaction-mapper
Source: https://github.com/figma/mcp-server-guide/tree/main/workflow-skills/video-interaction-mapper
Command: npx skills add https://github.com/figma/mcp-server-guide --skill video-interaction-mapper

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires ffmpeg, ffprobe, python, Pillow, and includes scripts (resource) and assets (resource) components.

What problem does it solve?

This Skill simplifies the process of creating annotated UI storyboards in Figma from video screen recordings.

Core Features & Use Cases

  • Video Analysis: Extracts key interaction states from video screen recordings.
  • Storyboard Creation: Generates annotated Figma storyboards from the extracted data.
  • Use Case: Imagine you have a video of a user interacting with a UI. Use this Skill to create a Figma storyboard showing each interaction state with annotations and visual markers.

Quick Start

Use the video-interaction-mapper skill on the video file '/path/to/ui-interaction.mp4' and create a new Figma file.

Frequently Asked Questions about video-interaction-mapper

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a UI storyboard in Figma from a screen recording?▼

To create a UI storyboard from a screen recording, this Skill extracts key interaction moments from the video and generates an annotated Figma design file using native Figma annotations and extracted screenshot assets.

Can I automatically annotate UI interactions in Figma using a video file?▼

Yes, you can automatically annotate UI interactions by processing a video file to identify interaction triggers, which are then mapped to visual markers and native annotations within a new Figma storyboard.

Do I need ffmpeg and Python installed to extract interaction states from video?▼

Yes, extracting interaction states from video requires ffmpeg, ffprobe, Python with the Pillow library, and Figma MCP tools to process the video and interface with the Figma API.

What is the best way to extract key moments from a UI screen recording for Figma?▼

The best way to extract key moments from a UI screen recording is using this Skill's video analysis, which identifies interaction triggers and builds annotated storyboards directly in Figma.

How does video analysis identify interaction triggers for UI storyboarding?▼

Video analysis identifies interaction triggers by processing the screen recording to detect key UI state changes, extracting those frames as screenshots to build an annotated Figma storyboard.

Are there limitations when using ffmpeg to process video for Figma UI annotations?▼

Processing video for Figma UI annotations requires exact dependency versions, specifically ffmpeg, ffprobe, and Python with Pillow, limiting use to environments where these tools are properly configured.

Related Skills

Explore More Design & Creative Skills→
ramonclaudioramonclaudio
4

frames

Extract frames from video files using ffmpeg and ffprobe.

Community
Advanced
bacchus-labsbacchus-labs
4

figma-design-workflow

Generate Figma mockups from wrangler specifications with design system integration.

Official
Advanced
ImL1sImL1s
6

playwright-figma-scrape

Extract Figma design assets and build frame-to-code inventories via Playwright MCP.

Community
Advanced
anis-marrouchianis-marrouchi

motion-animation

Integrate Framer Motion with Remotion for frame-synced animations.

Community
Intermediate