video-interaction-mapper

Official

Annotate UI interactions in Figma with video screen recordings.

Authorfigma
Version1.0.0
Installs0

System Documentation

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.

Dependency Matrix

Required Modules

ffmpegffprobepythonPillow

Components

scriptsassets

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: video-interaction-mapper
Download link: https://github.com/figma/mcp-server-guide/archive/main.zip#video-interaction-mapper

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 620,000+ vetted skills library on demand.