Import Figma assets, tokens, components, and motion into HyperFrames compositions.
npx skills add https://github.com/Sergiotsk/Interstellar --skill figma-sergiotsk
Please help me install this Agent Skill. Skill: figma Source: https://github.com/Sergiotsk/Interstellar/tree/main/.agents/skills/figma Command: npx skills add https://github.com/Sergiotsk/Interstellar --skill figma-sergiotsk
.media/images/, and import brand variables with binding records so color updates propagate without re-importing. - Component and motion reconstruction: Convert Figma node trees into editable HTML at exact geometry, and translate connector-provided motion data into paused, finite GSAP timelines validated by an objective PSNR-based verification script. - Storyboard decoding: Parse a section of scene frames into element chains and keyframe timelines instead of playing stills back-to-back. - Use Case: A user pastes a figma.com link to a brand logo and an animated card; the Skill freezes the logo as SVG, imports the brand tokens, rebuilds the card as HTML, and reconstructs its animation as a verified GSAP timeline. ## Quick Start Import this Figma frame into my composition and reconstruct its animation: paste your figma.com link and ask the agent to bring the design into the video.High-intent search queries and answers about installing and using this skill.
Paste the figma.com link and the Skill routes it by intent: assets render via `hyperframes figma asset`, brand styles via `hyperframes figma tokens`, and frames become editable HTML via `hyperframes figma component`. Everything is frozen locally so renders never call Figma.
Motion import uses a compatible Figma connector to retrieve motion context, then `motionContextToDocs` and `motionToGsap` from `@hyperframes/core/figma` generate a paused, finite GSAP timeline. The result is verified against Figma's own video export using a motion-PSNR gate.
Only read-only scopes: File content Read-only and File metadata Read-only, plus Library content Read-only if running tokens on non-Enterprise plans. Variables Read-only is Enterprise-only; without it the tokens command degrades to published styles automatically.
REST variables are Enterprise-gated, so on other plans `hyperframes figma tokens` falls back to published-style metadata. If a compatible connector is available, variable definitions can be retrieved through it and cached to build the binding index.
The verify-motion.mjs script compares motion-energy deltas between your render and Figma's export and fails below 15dB min motion-PSNR. A failure means the translation diverges — check timings, durations, and invented keyframes rather than lowering the threshold.
No. Figma's connector render path flattens shaders to the base color, and shader source is only reachable for library-published styles with a paid Full seat. The supported path is asking the user for a native Figma export (PNG or MP4) imported as a regular asset.
celeroncoderImport Figma assets, tokens, components, and motion into HyperFrames compositions.
cosmicstack-labsCreate HTML-driven video compositions with timed clips and deterministic animation for MP4 rendering.
AnderHonoratoImport Figma assets, tokens, components, and motion into HyperFrames video compositions.
heygen-comImport Figma assets, tokens, components, and motion into HyperFrames video compositions.