Kipt

HyperFrames figma skill: turn Figma designs into video with your agent

The HyperFrames figma skill has your agent import Figma assets, brand tokens, components and storyboards into an HTML video. What it does and how to install it.

By the Kipt team · Updated 24 October 2026

Source: heygen-com/hyperframes · Maintainer: HeyGen · License: Apache-2.0 · Checked: 24 October 2026

What is the HyperFrames figma skill?

The HyperFrames figma skill teaches a coding agent to bring a Figma design into a video: logos and images as files, brand colours and type as variables, frames as editable HTML, storyboards rebuilt as motion, and Figma Motion timelines translated into animation code. It is for teams whose brand and screens live in Figma and who want an agent to make launch or product videos that match them.

It ships in HeyGen's open-source HyperFrames repo, a framework for rendering HTML compositions to MP4. It is HeyGen's skill, not a Figma product. The description says: "Bring Figma into a HyperFrames video - rendered assets, brand tokens, components, storyboard frames as reconstructed motion (frames read as states, not slides), shaders and connector-assisted motion. Use when the person pastes a figma.com link or asks to use a Figma design, frame, logo or brand."

The README lists it under "On demand" rather than the core set. Its skills.sh page listed about 325,000 installs (snapshot, 24 October 2026), first seen on 3 July 2026.

What does it do?

The SKILL.md is about 55 lines plus one script, scripts/verify-motion.mjs. Its first principle: "Every import happens at build time and freezes a local file with its source recorded under .media/, so renders never call Figma."

Access. Assets, tokens and components go over Figma's REST API with a FIGMA_TOKEN. If the token is missing, the agent explains how to make one and stops. The person sets it themselves; the skill says "never ask them to paste it into the chat." An error table explains BAD_TOKEN, FORBIDDEN, REQUIRES_ENTERPRISE and RATE_LIMITED.

Three CLI imports.

What Command Result
A layer, logo or image npx hyperframes figma asset '<url>' A frozen SVG or PNG file and a ready-to-paste <img> snippet
Brand colours and type npx hyperframes figma tokens <fileKey> Entries for the composition's variables
A frame as editable HTML npx hyperframes figma component '<url>' A component under compositions/components/<name>/

The skill says to run tokens before component. A fill bound to an imported token comes out as a CSS variable with the literal colour as fallback, so "one variable re-brands every import." The HyperFrames Figma guide adds that matching is by Figma ID, never by hex value.

Motion through a connector. A Figma Motion timeline is fetched through a Figma connector, normalised with helpers from @hyperframes/core/figma, and emitted as a paused GSAP timeline. The agent then runs verify-motion.mjs against Figma's own video export. It "fails under 15 dB," and "a fail means fix the translation, not the threshold." A track that won't translate becomes a frozen MP4 clip.

Shaders. Figma's export flattens shaders to their base colour, so the agent asks you for a native PNG or MP4 export and places it as an asset.

Storyboards. The longest section is headed "frames are KEYFRAMES, not slides." Elements shared across neighbouring frames are matched by name, then by size and position, and animated between states. Text below the strip is read as motion notes, not on-screen copy. Frames showing one product UI in successive states are rebuilt as live DOM with a cursor that clicks through them. Stills are the fallback.

How do you install it?

Just this skill, using the command shown on skills.sh:

npx skills add https://github.com/heygen-com/hyperframes --skill figma

On demand from main. The README says /figma, /slideshow and /remotion-to-hyperframes "install on demand" with:

npx hyperframes skills update figma

The README notes that skills add reads the skills.sh registry copy, which "can lag main by hours," while skills update installs from the current main branch. The figma skill builds on the main /hyperframes skill and the CLI, so also install the core set with npx hyperframes skills update.

Claude Code plugin. The plugin bundles every published HyperFrames skill:

claude plugin marketplace add heygen-com/hyperframes
claude plugin install hyperframes@hyperframes

See Claude Code's plugin docs and skills docs. For other agents, see Codex skills and Cursor skills.

Figma setup. Make a personal access token in Figma under Settings, Security, Personal access tokens (Figma's token help page covers this) with read-only File content and File metadata, plus Library content for tokens on non-Enterprise plans. The HyperFrames guide says Enterprise users can also add Variables read-only, and that motion and shaders need a compatible Figma connector or a native export.

Rendering needs Node.js 22 or later and FFmpeg, per the README.

How do you use it?

Paste a figma.com link and say what the video is for. The skill is model-invoked when it sees a Figma link or you ask to use a Figma design, frame, logo or brand.

Example prompts (suggestions, not quotes from the repo):

  • Use /figma to import our logo from this Figma link as SVG and pull the brand tokens from the same file.
  • Here is our launch storyboard in Figma. Build a 20-second video from it, animating elements between frames rather than cutting between stills.
  • Import this pricing card frame as an editable component and animate the price counting up.
  • Translate the Figma Motion timeline on this frame to the video and verify it against Figma's export.
  • The checkout flow frames show one screen in successive states. Rebuild it as a live UI with a cursor clicking through.

Tips and limits

From the skill and the HyperFrames docs, not from testing:

  • Keep the token out of chat. Set FIGMA_TOKEN yourself in your shell or .env. The token only needs read access; the guide says the integration "never writes to Figma."
  • Tokens before components. Import brand tokens first so component colours link to variables instead of hard-coded values.
  • Batch exports. Export about 4 storyboard frames per call; past about 12 ids, Figma's image export times out.
  • Check heroes against Figma. The skill says text drift is the usual cause of mismatch, and to report drift it can't fix rather than hand-tweak the import.
  • Usage beacons. The motion, shader and storyboard phases run npx hyperframes events commands to record that the skill ran.
  • Snyk warning. On skills.sh, Snyk's audit dated 21 October 2026 shows Warn, medium risk, for W011 "Third-party content exposure detected (indirect prompt injection risk)," because the agent reads user-written text layers in Figma files. Gen Agent Trust Hub and Socket showed Pass. Be careful importing files from people you don't trust.

Under Apache-2.0 you can copy and modify the skill if you keep the license and notices.

Save it in your Kipt library

In Kipt, open Skills and paste the GitHub folder link into the import box. Kipt reads the SKILL.md and its scripts/ folder. Because heygen-com/hyperframes holds several skills, Kipt shows a list so you can take the core set with it. Your copies live in your own private GitHub repo and install into Claude Code or Codex with one command:

npx skills add https://github.com/<you>/<repo>.git --all -g

Kipt is not affiliated with HeyGen, Figma or the HyperFrames project.

Similar skills

Questions

What is the HyperFrames figma skill?

It is the figma Agent Skill in HeyGen's open-source heygen-com/hyperframes repo. It teaches a coding agent to bring a Figma design into a HyperFrames video: rendered assets, brand tokens, frames as editable HTML components, storyboards rebuilt as motion, and Figma Motion timelines translated to GSAP. It is not Figma's own product or skill.

How do I install the HyperFrames figma skill?

skills.sh shows npx skills add https://github.com/heygen-com/hyperframes --skill figma. The README lists figma as an on-demand skill you can also install with npx hyperframes skills update figma, from the current main branch. The Claude Code plugin hyperframes@hyperframes bundles it with every other published HyperFrames skill.

Does the figma skill need a Figma token?

For assets, tokens and components, yes: FIGMA_TOKEN in your shell or the project .env, with read-only File content and File metadata scopes, plus Library content for tokens on non-Enterprise plans. The skill tells the agent to explain how to make one and stop if it is missing, and never to ask you to paste it into the chat. Motion and shader data need a Figma connector or a native export instead.

Does the rendered video still depend on Figma?

No. The skill says every import happens at build time and freezes a local file with its source recorded under .media/, so renders never call Figma. Re-running an import pulls only what changed, and the skill says never to leave a Figma URL in the composition.

How does the skill handle a Figma storyboard?

It reads storyboard frames as keyframes, not slides. Elements that appear in neighbouring frames are matched and animated between their states, and text below the strip is treated as motion notes. Playing the frames back to back as stills is called the failure mode.

More in Skill directory

All guides

Keep your prompts and skills in one place, in your own GitHub. Install every skill with one command.

Get started

Kipt is an independent product, not affiliated with or endorsed by Anthropic, OpenAI, Cursor or GitHub. Claude, ChatGPT, Codex, Cursor and GitHub are trademarks of their owners.