Imports Figma assets, brand tokens, components and motion into a HyperFrames video at build time, so renders never call Figma.
Useful for Figma-to-video work, but it needs a Figma token and, for motion, a connector, and it runs usage beacons through the HyperFrames CLI.
This HyperFrames skill brings Figma designs into a video project. Every import happens at build time and writes a local file with its source recorded under .media/, so later renders do not touch Figma and re-running a command re-imports only what changed. It needs a read-only FIGMA_TOKEN in the shell or the project's .env, and tells the agent to stop and explain how to create one if it is missing, never asking the person to paste it into the chat.
The commands cover three jobs. hyperframes figma asset renders layers, logos or images to SVG or PNG; figma tokens pulls brand colours and type (falling back to published styles without an Enterprise plan) for use as composition variables; figma component converts a frame into editable HTML at exact geometry, binding fills to imported tokens as CSS variables. A further section handles motion, shaders and storyboard frames reconstructed as animation through a Figma connector: it normalizes the connector's motion data into GSAP timelines instead of transcribing keyframes. One bundled script, verify-motion.mjs, compares a render against Figma's own export and fails below a 15 dB motion similarity. The skill also runs usage-beacon commands (hyperframes events) at the start and end of the connector phases. The folder has two files.
A 6 KB SKILL.md with a motion-verification script, but only two files and no tests in the skill folder.
npx hyperframes events --skill=figma-motion (and similar) as usage beacons at the start and end of the connector phases. The HyperFrames CLI's usage counters are on by default; disable with npx hyperframes telemetry disable.The skill activates when you paste a figma.com link or ask the agent to use a Figma design, frame, logo or brand. Prompts like "use the logo from this Figma link in the opening card" or "rebuild this frame as a component in my video" fit that trigger. The SKILL.md gives the commands an order:
npx hyperframes figma tokens <fileKey> and paste the printed entries into data-composition-variables. This step has to come before component, because component imports bind fills to these tokens.npx hyperframes figma component '<url or fileKey:nodeId>' writes editable HTML under compositions/components/<name>/. A fill bound to a known token comes out as var(--slug, #literal), which means changing one variable re-brands every import. If a token is unknown, the fill stays a literal and gets marked data-figma-unresolved. To fix it, import that library's tokens and re-import the component. The agent asks you once which file a library lives in and never guesses by matching hex values.--format svg for logos and vectors and --format png --scale 2 for raster images. If you pass several nodes from the same file in one call, they render in a single request. Add --entity "<brand mark>" so /media-use can find the mark later.figma asset <same node> --format png). The usual cause of drift is text. The skill tells the agent to report drift it can't fix rather than hand-edit the import.In storyboards, the skill reads frames as keyframes, not slides. When two frames hold the same element, the agent animates that element between the two states. Playing the frames back to back as stills is treated as the failure case. To build scenes, it takes every frame-sized node in the section, filters by size instead of type or name, and orders them by absoluteBoundingBox.x. Children in neighbouring frames are matched by name first, then by similar size and position. Text nodes placed below the strip count as motion notes for the scene above them, not on-screen copy. When frames show one product UI in successive states, the agent rebuilds that UI as live DOM and performs each frame change as an interaction.
For connector motion, motionToGsap maps a fixed set of named eases. Any ease outside that set falls back to linear, and the agent is told to tell you when that happens. Measure the --crop value for verify-motion.mjs from the render's card edges. A faithful translation scores about 20 dB or higher and a diverging one about 5. If a track won't translate at all, the agent exports it as an MP4 and places it as a clip.
Shaders are the weakest area. Figma's export path flattens a shader to its base colour, and shader source is only reachable for library-published styles. In practice you supply a native PNG or MP4 export of the frame.
BAD_TOKEN (401): the token expired or was revoked. Create a new one.FORBIDDEN (403): the message names the missing scope, or the file isn't visible to the account that owns the token.REQUIRES_ENTERPRISE (403, variables): this one isn't a failure. The published-styles fallback has already run.RATE_LIMITED (429): the CLI already retried with backoff. Wait a minute, or import fewer nodes per call.For storyboard exports, send about 4 scene frames per call. The skill notes that /v1/images times out past about 12 ids.
A search for "figma skills" mostly returns Figma's own skills for the Figma MCP server and the Figma agent, which work on the Figma canvas. This HyperFrames skill only reads from Figma, using a read-only token or a connector. Its output is local files inside a HyperFrames video project. If you want an agent to write to the canvas or edit your design system in Figma directly, this skill won't do that.
Skill for importing Figma assets, tokens, components and motion into HyperFrames video projects through the HyperFrames CLI. It needs a personal Figma access token, which the CLI sends to Figma, and tells the agent to send usage beacon events through the CLI. The one bundled script only runs ffmpeg locally to compare two videos.
npx hyperframes figma ..., i.e. the HyperFrames npm CLI, whose code is not in the skill folder.skills/figma/SKILL.md:20npx hyperframes without a version for standalone installs (plugin installs are told to use a launcher pinned to the plugin release).skills/figma/SKILL.md:20npx hyperframes events --skill=figma-motion at the start and end of motion/shader imports (usage beacon); the HyperFrames CLI's telemetry has a documented opt-out (HYPERFRAMES_NO_TELEMETRY=1, DO_NOT_TRACK=1).skills/figma/SKILL.md:32The skill folder (2 files) on Oct 29, 2026. Not a full review: it relies on code outside the repository: npm package hyperframes (HyperFrames CLI, run through npx); Figma connector / MCP tools used for the motion import.
NVIDIA SkillSpector static scan: 5 pattern hits (MCP Rug Pull 4, Privilege Escalation 1). No scanner hits mattered; the only code file is a local ffmpeg comparison script called with array arguments (no shell). The beacon and FIGMA_TOKEN items are described in SKILL.md.
A review, not a certification. Skills change after we check them — read the files before installing.
Apache-2.0 — commercial use allowed.
Not really. It is an import helper that depends on a person-supplied token and visual review of the imported frames.
Points a headless browser at any site and reconstructs its design system as 8+ files: DTCG tokens, Tailwind config, shadcn theme, Figma variables, WCAG score.
A skill plus npm CLI that extracts colors, fonts, spacing, radii and shadows from a public website and writes starter tokens.json and tokens.css files.
Google Labs' 16 skills for the Stitch design tool: generate screens, extract design systems, and convert Stitch designs to React, React Native and more.
The Remotion team's twelve skills for building videos as React code: project setup, markup rules, maps, captions, studio, render and upgrades.
It is a skill that imports Figma content into a HyperFrames video: rendered assets, brand tokens, components and, via a connector, motion and shaders. Imports are frozen as local files so renders do not call Figma.
It installs on demand: run npx hyperframes skills update figma, or npx skills add heygen-com/hyperframes and select it. Set FIGMA_TOKEN in your shell or project .env first; create it under Figma Settings, Security, Personal access tokens with read-only scopes.
Use a token with read-only scopes, as the skill recommends, and set it in your shell or .env rather than pasting it into chat. The skill says the agent must never ask for the token in the conversation.
No. Without Enterprise, figma tokens falls back to published styles instead of variables. Library content scope may be needed for tokens on non-Enterprise plans.
Figma's export path flattens shaders to their base colour, and shader source is only reachable for library-published styles. Give the agent a native PNG or MP4 export of that frame and it will place the file as an asset or clip.
The render's motion scored below 15 dB against Figma's own export. Faithful translations score about 20 or more. The skill says a fail means the translation needs fixing, not the threshold.
Yes. It treats storyboard frames as states of the same elements and tweens between them. It also reads text below the strip as motion notes for the scene above, not as on-screen copy.