figma

An agent skill by heygen-com, from heygen-com/hyperframes. Tags: api, design, developer-tools, mcp, web.

What it does

Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, storyboard sections → reconstructed motion (frames read as states, not slides) (REST/CLI), connector-assisted motion when available, and shaders from a connector or native export. Use when the user pastes a figma.com link or asks to bring a Figma design, frame, logo, brand, or animation into a video/composition.

Install

With the skills CLI, which installs into Claude Code, Codex, Cursor and other agents:

npx skills add heygen-com/hyperframes --skill figma

Or copy the skill folder into Claude Code's skills directory by hand (~/.claude/skills for every project, or .claude/skills inside one):

git clone --depth 1 https://github.com/heygen-com/hyperframes
cp -r hyperframes/skills/figma ~/.claude/skills/figma

Safety box score

Grade C, moderate risk: 35 of 100 risk points, rated 2026-09-29. The grade rates what the skill and its scripts can reach on the machine of whoever installs it, across eight categories from shell execution to secrets access. How the score works.

This skill imports Figma assets, tokens, components, motion, and shaders into a HyperFrames project, writing frozen media and component files locally. Main risks are secret-token handling, registry-based `npx` commands, and a motion-verification script that shells out to `ffmpeg`/`ffprobe` on MP4s.

Category levels, from 0 (none) to 3 (high)
Category	Level	Why
Code & shell execution	2 (moderate)	It runs external commands during normal use (`npx hyperframes ...`) and its bundled verifier shells out to `ffprobe`/`ffmpeg` via `execFileSync` and `spawnSync`.
Network access	2 (moderate)	Imports talk to Figma over REST and an optional connector, and the skill also sends anonymous usage beacons with `npx hyperframes events --skill=figma-motion`.
Filesystem reach	1 (low)	Writes are mostly bounded to the project tree (`.media/images/`, `.media/index.md`, `.media/figma-bindings.jsonl`, `compositions/components/<name>/`).
Secrets & credentials	2 (moderate)	It explicitly checks for `FIGMA_TOKEN` in the shell environment or project `.env`, so it reads secret material from user-controlled config.
Privilege & persistence	0 (none)	There is no sudo, service installation, global package install, or shell/OS setting modification in the shipped files.
Instruction hijack surface	0 (none)	I found no instruction to ignore higher-priority rules, hide content, or follow fetched remote instructions; the text is operational rather than prompt-injection oriented.
Irreversible actions	1 (low)	The skill automatically imports and reconstructs compositions, but it does not publish, pay, deploy, or delete external resources.
Transparency	1 (low)	The shipped JS is readable, though the skill relies on external `npx hyperframes ...` commands and connector behavior that are not included in this repo.

Before installing

Review the `npx hyperframes ...` commands and be comfortable running registry code in your environment.
Confirm `ffmpeg` and `ffprobe` are installed if you plan to use motion verification.
Decide whether storing `FIGMA_TOKEN` in your shell profile or project `.env` is acceptable for this repo.
Check that writing into `.media/` and `compositions/components/` is safe for your workflow.

Rated 2026-09-29 by an automated review of 2 files from the skill's repository.

Source

Repository: heygen-com/hyperframes (all skills from this repository)
Path: skills/figma/SKILL.md
Branch: main
Updated: 2026-09-19

hyperframes-registry — Search, install, and wire registry blocks and components into HyperFrames compositions.
vercel-composition-patterns — React composition patterns that scale.
hyperframes-animation — All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques.
hyperframes-keyframes — Use when a HyperFrames composition needs a punch-in, punch-out, zoom, reframe, Ken Burns treatment, camera move, visual match/whip handoff.
algorithmic-art — Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code.
api-and-interface-design — Guides stable API and interface design. Use when designing APIs, module boundaries, or any public interface.