Agent skill · design visual · heygen-com
figma
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.
Why this skill is useful
Adds specific commands and workflows for importing Figma assets into HyperFrames that the AI wouldn't reliably generate on its own.
What it needs
Requires figma account access. About 10k tokens when loaded. Last updated 2026-08-07. 39,818 stars on the source repository.
What this skill does
First, keep this skill fresh — confirm with the user before running: npx hyperframes skills update figma. A fast no-op when everything is current; otherwise it refreshes this skill plus the core domain skills it depends on before you rely on them. Figma → HyperFrames Bring the user's Figma work into a composition. Split by capability (design spec §2): Phase What Transport Surface ----- ------------------- ------------------------- ----------------------------- 1 Static assets REST hyperframes figma asset 2 Brand tokens/styles REST hyperframes figma tokens 3 Components → HTML REST hyperframes figma component 4 Motion → GSAP connector when available use its motion context 5 Shaders connector / manual export use it or a native export REST is used wherever it can be (usable at volume, headless). A compatible Figma connector is optional for motion and shader data; without one, ask for a native export. Every path freezes assets locally so renders stay deterministic. Storyboard reconstructions compose Phase-1 asset exports (REST) with agent-driven timeline assembly — no connector needed. Existing frozen assets, manifest records, and bindings are unaffected by routing changes — the split only changes which credential the next import uses. Auth — two credentials, scoped Preflight — before the first CLI call, check a token exists: shell env ([ -n "$FIGMATOKEN" ]) or the project .env (the CLI auto-loads it — a .env entry counts as configured). If neither, do NOT run the command to harvest the error — walk the user through the one-time setup first, then stop and wait: 1. figma.com/settings → Security → Personal access tokens → Generate new token. 2. Scopes — read-only is all this integration ever needs (it never writes to Figma): File content: Read-only + File metadata: Read-only. Add Library content: Read-only if you'll run tokens on a non-Enterprise plan — the published-styles fallback hits /v1/files/:key/styles, which 403s without it (a scope the older setup text omitted). …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills heygen-com/figma