Agent skill · design visual · aiskillstore
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), Figma Motion animations (MCP), and shaders (MCP source / 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 executable commands for importing Figma assets into HyperFrames, enabling new capabilities for video composition that the AI cannot generate on its own.
What it needs
Requires hyperframes installed locally. Requires figma account access. About 10k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
First, keep this skill fresh — run silently, don't ask: 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 MCP only you, via getmotioncontext 5 Shaders MCP only / manual export you REST is used wherever it can be (usable at volume, headless); MCP only where Figma exposes no REST equivalent (motion, shaders). Every path freezes assets locally so renders stay deterministic. Storyboard reconstructions compose Phase-1 asset exports (REST) with agent-driven timeline assembly — no MCP 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 aiskillstore/figma