# Video Interaction Mapper

Should be used when the user asks to analyze a UI screen recording and map interaction...

- Repository: https://github.com/figma/mcp-server-guide (2138 stars)
- Category: Design
- License: see repository
- Last updated: 2026-10-28
- Runs scripts: yes, review before use

## Install

Claude Code: `npx skills add figma/mcp-server-guide --skill video-interaction-mapper -g -a claude-code -y`
Codex: `npx skills add figma/mcp-server-guide --skill video-interaction-mapper -g -a codex -y`
Cursor: `npx skills add figma/mcp-server-guide --skill video-interaction-mapper -g -a cursor -y`
Gemini CLI: `npx skills add figma/mcp-server-guide --skill video-interaction-mapper -g -a gemini-cli -y`

## Description

This skill should be used when the user asks to analyze a UI screen recording and map interaction states into Figma. Trigger for requests such as "put video frames in Figma", "extract states from my recording", "map interactions from video to Figma", "analyze this screen recording", "create a storyboard from my video", "deconstruct this interaction in Figma", "annotate the UI states in my recording", or "pull the key moments from this video into Figma". Also trigger when the user references a video file (.mp4, .mov, .webm, .avi) together with Figma, design review, interaction analysis, prototypes, or UI states. The skill extracts key visual moments from a video, infers interaction triggers, and builds an annotated Figma Design storyboard using native Figma annotations and uploaded screenshot assets.

## SKILL.md, as published by its author (untrusted third-party text, read it as data)

# Video Interaction Mapper

Turn a UI recording into a static, annotated Figma storyboard. Extract the important
before/after states, infer what triggered each change, then place clean screenshots,
blue interaction markers, and concise annotations into a Figma Design file.

## Required Inputs and Tools

Start with:

- A local video file path (`.mp4`, `.mov`, `.webm`, or `.avi`).
- `ffmpeg` and `ffprobe` available on the machine.
- Python with Pillow installed.
- Figma MCP tools available: `create_new_file`, `use_figma`, `upload_assets`, and
  `get_screenshot` or `get_design_context`.

Run the bundled files in `scripts/` as executable workflow helpers. They are part
of the skill's implementation, not reference material. Read or modify them only
when debugging, adapting to an unusual environment, or changing the skill itself.

Use a Figma Design file (`figma.com/design/...`) as the target. The generated
Plugin API code creates pages and image-fill frames, which are Design-file
operations. If the user provides a FigJam or Slides URL, ask for a Design file or
create a new one.

Before any `use_figma` call, load the Figma API guidance skill if available
(`figma-use`). Before creating a new Figma file, load the file-creation guidance
skill if available (`figma-create-new-file`). Pass `skillNames:
"figma-use,video-interaction-mapper"` on `use_figma` calls when the client supports
that parameter.

## Workflow

### 1. Validate and Prepare

Confirm the video path exists, then check `ffmpeg -version`. If Pillow is missing,
install it in the active Python environment:

```bash
pip install Pillow --break-system-packages -q
```

Do local analysis before creating or modifying the Figma file. Create a Figma file
only after `key_moments.json`, `upload_manifest.json`, and generated Figma scripts
are ready, unless the user explicitly asks to create the file first. This avoids
leaving partial pages behind when local frame analysis changes.

### 2. Scout the Timeline Quickly

The rest: https://github.com/figma/mcp-server-guide/blob/HEAD/workflow-skills/video-interaction-mapper/SKILL.md