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 figmaOr 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/figmaSafety box score
Not rated yet. A safety box score grades what a skill and its scripts can reach on the machine of whoever installs it, across eight categories from shell execution to secrets access. Anyone can request one from this page; it is saved for everyone. How the score works.
Source
- Repository
- heygen-com/hyperframes (all skills from this repository)
- Path
- skills/figma/SKILL.md
- Branch
- main
- Updated
- 2026-09-19
Related skills
- hyperframes-registry — Search, install, and wire registry blocks and components into HyperFrames compositions.
- vercel-composition-patterns — React composition patterns that scale.
- hyperframes-animation — js, CSS keyframes, Web Animations API, TypeGPU). g. js mixer).
- hyperframes-keyframes — js, WAAPI, FLIP, paths, masks, SVG morph/draw, text trails, 3D depth, or `hyperframes keyframes` diagnostics.
- algorithmic-art — js with seeded randomness and interactive parameter exploration.
- api-and-interface-design — Guides stable API and interface design. Use when designing APIs, module boundaries, or any public interface.