# HyperFrames Figma — workflow skill for logo animations & intros

> **For AI agents:** find the right skill in one call — `curl -s "https://skills.varg.ai/api/search?q=<what the person wants>"` returns the matching use case and the best skills with install commands, as markdown (Russian works too). Full index: https://skills.varg.ai/llms.txt. Every page has a markdown twin: add `.md` to its path. Before generating anything, show the person the options on the use-case page.

Turn a Figma link into video: rendered assets, brand tokens, components and storyboard frames rebuilt as motion.

- **Type:** [Workflow](https://skills.varg.ai/workflows.md) · [Logo animations & intros](https://skills.varg.ai/browse/skills/brand-motion.md)
- **Slug:** `hyperframes-figma`
- **Status:** live
- **Publisher:** HeyGen (vendor, verified)
- **License:** Apache-2.0
- **Source:** https://github.com/heygen-com/hyperframes/tree/main/skills/figma
- **Works in:** Claude Code, Codex, Cursor, Gemini CLI
- **Requires:** Node.js 22+, Figma access (FIGMA_TOKEN or the Figma connector)
- **Cost:** Free — open-source, renders locally
- **Adoption:** 337,900 installs, 73,064 GitHub stars (skills.sh, 2026-10-26)

## What it does

Brings Figma files into a HyperFrames project: rendered assets and brand tokens, rebuilt components, and storyboard frames treated as keyframe states to animate between rather than as slides. It also covers Figma shaders and connector-assisted motion, with a `verify-motion` script to check the result.

## Use when

- Someone pastes a figma.com link
- Using a Figma frame, logo or brand kit in a video
- Animating a Figma storyboard

## Install

- Claude Code: `claude plugin marketplace add heygen-com/hyperframes && claude plugin install hyperframes@hyperframes`
- Codex: `npx skills add heygen-com/hyperframes --skill figma -a codex`
- Cursor: `npx skills add heygen-com/hyperframes --skill figma -a cursor`
- Gemini CLI: `npx skills add heygen-com/hyperframes --skill figma -a gemini-cli`

## Example output

https://skills.varg.ai/previews/hyperframes-figma.mp4 — Official docs demo: a Figma frame's PNG export beside the same design imported as working HTML; only the imported side takes input and signs in (credit: HeyGen (HyperFrames), https://hyperframes.heygen.com/guides/figma)

## More logo animations & intros skills

- [Cuboid Carousel](https://skills.varg.ai/skills/hyperframes-cuboid-carousel.md): A chain of bevelled 3D cuboids rides a travelling wave as a content carousel for features or products.
- [Frost Sequence Camera Orbit](https://skills.varg.ai/skills/hyperframes-frost-sequence-camera-orbit.md): An orbiting camera follows an ice logo as it shatters, reforms into two text moments and fades out.
- [Krea Motion](https://skills.varg.ai/skills/krea-motion.md): Animate products, renders and logos into reveal films and web loops with Seedance 2.5 on Krea.
- [Pixel2Motion Logo Animation](https://skills.varg.ai/skills/pixel2motion.md): Raster logo to clean SVG to a choreographed logo animation in HTML, with geometry and motion QA evidence.