figma Skill for Claude: Bring Figma Designs into HyperFrames Videos

The HyperFrames figma skill brings Figma logos, brand tokens, components and storyboard frames into a HyperFrames video project.

Installs: 373K; on skills.sh
Stars: 77.1K; on GitHub
Files: 1; besides SKILL.md
Updated: Nov 2026; last repo commit

This figma skill is part of HyperFrames, a tool that renders HTML to video. It activates when you paste a figma.com link or ask to use a Figma design, frame, logo or brand. It runs npx hyperframes figma commands to import assets (SVG or PNG), brand colours and type, and frames as editable HTML.

It needs a Figma personal access token in FIGMA_TOKEN, which you create yourself. Motion and shader data need a Figma connector or an export from you. It works inside a HyperFrames project and relies on the hyperframes skill, so install that too.

Good for

People making HyperFrames videos from a Figma design or brand
Motion designers turning storyboard frames into animated HTML
Developers who want brand tokens imported as variables

Install figma

Claude Code

Copy this prompt.

Install the figma skill in Claude Code. Run this command:

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

Then check that it loaded and tell me how to use it.

2
Paste it into Claude Code. It shows the change and asks before running it.

The figma skill works inside a HyperFrames project and points to the hyperframes skill, so install it with the core skill. The README says standalone installs add /figma on demand with npx hyperframes skills update figma.

From the project README. Source.

What's in the skill

When it loads

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.

Sections in SKILL.md

Access
Commands
Motion (connector)
Shaders
Storyboards: frames are KEYFRAMES, not slides

Key facts

Author: HeyGen (heygen-com/hyperframes)
License: Apache-2.0
Installs on skills.sh: 373,021 as of 2026-11-02
GitHub stars: 77,112 for the whole heygen-com/hyperframes repo
skills.sh audits: Gen Agent Trust Hub pass, Socket pass, Snyk warn
What is inside: 2 files: SKILL.md and scripts/verify-motion.mjs
Needs: A HyperFrames project and its hyperframes skill, Node (npx), and a Figma personal access token in FIGMA_TOKEN with File content and File metadata read scopes
Last commit to the repo: 2026-11-02

What it includes

Imports a layer, logo or image as SVG or PNG
npx hyperframes figma asset <url or fileKey:nodeId> with --format svg|png and --scale. The result is stored locally under .media/ with its source.
Try: “Use this Figma logo in my video: https://www.figma.com/design/...”
Write · figma asset
Imports brand colours and type
Prints entries for data-composition-variables. Without Enterprise it falls back to published styles.
Write · figma tokens
Turns a frame into editable HTML at exact geometry
Packaged under compositions/components/<name>/. Bound fills come out as CSS variables.
Write · figma component
Builds GSAP timelines from Figma motion data
Needs a Figma connector for motion context. A usage beacon command runs at the start and end of this phase.
Write · Motion (connector)
Compares your render with Figma's export
Fails under 15 dB; SKILL.md says a faithful match is about 20 or more.
Runs code · scripts/verify-motion.mjs
Asks for a native export of the frame
Figma's export flattens shaders to base colour, so you supply a PNG or MP4.
Read · Shaders
Treats neighbouring frames as keyframes
Frames holding the same element describe its states over time, so Claude animates between them instead of playing stills.
Write · Storyboards

From the official docs

Permissions

Medium risk

It runs npx commands and uses your Figma token to download files into your project. Use a read-only token and keep it out of the chat.

What it can do

Read your data
Create and change things
Delete things
Read-only mode

Watch out for

It uses your Figma token
SKILL.md asks for FIGMA_TOKEN with read-only scopes, set by you in the shell or .env. Never paste it into the chat.
It runs npx commands that fetch packages
The commands run npx hyperframes. Review them if your machine blocks unreviewed package runs.
A usage beacon runs during motion work
SKILL.md says to run npx hyperframes events at the start and end of the motion, shader and storyboard phases.

Technical details

Talks to	Figma REST API. HyperFrames usage events (npx hyperframes events) during the motion, shader and storyboard phases
Scopes	Runs npx hyperframes figma commands Uses your FIGMA_TOKEN (read-only scopes) against Figma's API Writes imported files under .media/ and compositions/components/ Runs a bundled Node script to compare renders

Questions

What does the figma skill for HyperFrames do?

It brings Figma designs into a HyperFrames video: logos and images, brand colours and type, frames as editable HTML, and storyboard frames as motion.

How do I install it?

Use the install box at the top of this page. It needs the hyperframes skill as well, which the plugin includes. Then set FIGMA_TOKEN yourself in your shell or the project's .env file.

Do I need a Figma token?

Yes. SKILL.md says to set FIGMA_TOKEN, a personal access token with read-only File content and File metadata scopes. Library content is also needed for token import on non-Enterprise plans. Do not paste it into the chat.

Does it send my Figma data anywhere?

Imports go to Figma's REST API with your token and are saved as local files, so renders do not call Figma later. The motion steps also run a usage beacon command (npx hyperframes events) at the start and end.

Can it import Figma animations and shaders?

Motion needs a Figma connector, and shaders cannot be read through export: SKILL.md says to ask for a native PNG or MP4 export of that frame.

Does it work without HyperFrames?

No. It is built for HyperFrames projects and points to HyperFrames files and commands.

Is the figma skill safe?

It runs npx commands, calls Figma with your token and writes files in your project. On skills.sh the audits read Gen Agent Trust Hub pass, Socket pass and Snyk warn. Use a read-only token.

Information

updated Nov 2, 2026

Repository: heygen-com/hyperframes
Folder: skills/figma

heygen-com/hyperframes skills.sh

Sources

Docs, issue trackers and discussions this page is built from.

Show all 3

hyperframes README · github.com
figma SKILL.md · github.com
skills.sh listing and audits · skills.sh