98.8K+Download
Skip to the usage guide
figmaby HeyGen

Figma Skill.

A Claude Code and Codex skill for motion and video: imports Figma assets, brand tokens, and storyboards into a HyperFrames composition.

  • Motion & Video
  • Video
Download OpenDesignView usage guide
heygen-com/hyperframes · skills/figma/SKILL.mdSKILL.md
--- name: figma description: 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. --- ## Auth — two credentials, scoped ## Routing ## Assets (Phase 1 — CLI) ## Tokens (Phase 2 — CLI) ## Components (Phase 3 — CLI) ## Motion (Phase 4 — connector-assisted)
Front matter and section headings read from the upstream file on 2026-09-14 · 17,829 characters in full

01 What it does

What the figma Skill Does in Claude Code and Codex

Summary, workflow and outputs, all read from the skill's SKILL.md.

From the SKILL.mdRead 2026-09-14 · not a recorded run

In the Skill's Own Terms

Imports Figma content into HyperFrames compositions across five phases: static assets, brand tokens, components as HTML, motion timelines, and shaders. Uses REST API wherever possible (assets, tokens, components) with optional connector for motion and shader data. Every import freezes artifacts locally with recorded provenance so renders never call Figma and stay deterministic.

Storyboard reconstruction treats frames as keyframes describing element state over time, not slides. Supports token-to-component binding so one brand variable update re-colors every imported component. Rate-limit aware with automatic retry. Works across every Figma file the configured token can access.

What it produces

  • Frozen image assets under .media/images/ with manifest provenance and img snippet
  • Brand token entries, figma-tokens.json sidecar, and binding-index records in .media/figma-bindings.jsonl
  • Editable HTML component packages under compositions/components/<name>/
  • GSAP timeline scripts injected after CDN tags, paused and finite, registered on window.__timelines
See the example prompt ↗

How It Works

  1. 01
    Parse the Figma Reference

    Use parseFigmaRef to extract fileKey and nodeId from the user's URL, fileKey:nodeId string, or bare fileKey.

  2. 02
    Route by Intent to the Correct Phase

    Match the user's request to one of five phases: asset export, token import, component reconstruction, motion timelines, or shader handling.

  3. 03
    Fetch via REST or Connector

    REST is used for assets, tokens, and components. Motion and shaders require a compatible connector or manual export.

  4. 04
    Freeze Artifacts Locally with Provenance

    Every import writes a local file, appends the manifest with source metadata, and regenerates the shared media-use inventory.

  5. 05
    Reconstruct Motion and Storyboards from State Data

    Storyboard frames become element timelines by diffing adjacent frames. Motion context normalizes into MotionDocs, then GSAP scripts.

  6. 06
    Verify Against Ground Truth

    Compare the render against Figma's own pixel export for static fidelity. Motion reconstruction must pass 15dB minimum motion-PSNR.

02 Find your fit

When to Use the figma Skill

Use the figma skill in Claude Code or Codex when the job is motion and video of this kind. Fit and limits below are taken from the skill's own file.

Good Fit

  • User pastes a figma.com link or asks to bring a Figma design into a video or composition
  • Pulling brand colors, tokens, or styles from a Figma file into composition variables
  • Building a scene from a Figma frame as editable HTML component
  • Reconstructing animation from a storyboard section containing scene frames as keyframes

Know the Boundaries

  • Motion and shader import without a compatible Figma connector require manual native exports
  • Figma's connector render path does not execute shaders; they flatten to base color
  • REST variables API is Enterprise-gated; other plans degrade to published-style metadata
  • Storyboard frames depicting one coherent product UI escalate to rebuilding the app as live DOM, not element chains

What to Provide

  • Figma personal access tokenRead-only scopes: File content, File metadata, optionally Library content and Variables. Set as FIGMA_TOKEN in shell or .env.
  • Compatible Figma connector (optional)Separate authorization from the token. Required for motion timelines and shader source. Without it, ask for native export.
  • Director notes for storyboard intentTEXT nodes below the storyboard strip describe how to animate. Paired to scenes by x-range overlap.
  • Native Figma export for shadersPNG or Motion MP4 exported directly from Figma when connector path doesn't execute shaders or no connector available.

03 Inside the skill

Rules the figma Skill Gives Claude Code and Codex

7 concrete instructions, defaults and limits the SKILL.md sets for the agent — the part of the file that changes the result.

  1. Check Token Before First CLI Call

    Before running any hyperframes figma command, verify FIGMA_TOKEN exists in shell env or project .env. If neither, walk the user through one-time setup and stop.

  2. Always Pass --description for Assets

    Every asset import must include --description with what it is. This becomes the index row and img alt text. Add --entity for named brand marks.

  3. Batch Nodes in One Request per File

    Pass multiple refs of the same file as space-separated or comma-joined arguments. All render in a single /v1/images call to avoid rate limits.

  4. Import Tokens Before Components

    Run hyperframes figma tokens before importing components. This allows component colors to link to brand variables instead of baking duplicate literals.

  5. Never Leave Figma URLs in Composition

    Freeze all Figma content to local files first. Render must see local files only for deterministic output.

  6. Never Emit Repeat: -1

    Timelines must be paused, finite, with literal window.__timelines keys. No infinite loops.

  7. Narrate Every Step for the User

    Before each command say what you're pulling from Figma. After, say where it landed, what changed in the composition, and the immediate next action.

04 Put it to work

Install figma in Claude Code or Codex

One npx skills add command, then a first task in your agent and a checklist for the result.

Add figma to Claude Code, Codex or Your Agent

Run in your project; the installer asks which agent to add it to.

Terminal
npx skills add https://github.com/heygen-com/hyperframes --skill figma

Generic skills CLI form for skills/figma/SKILL.md; the repository may document its own path.

Give the Skill a First Motion and Video Task

Written in the skill's own terms; replace the bracketed parts with your material.

Starter prompt
Import the hero section from [figma.com/file/abc123/Brand?node-id=42-1] including the logo, headline text, and background. Pull the brand tokens from the same file so the colors stay linked to our design system variables. Then build the animation timeline — the logo should scale in with a burst effect and the headline should slide from the left.

Source: written from the SKILL.md in the skill's own terms.

Check the First Result

What the SKILL.md itself says a correct result looks like:

  • Run npx hyperframes check before calling motion or component import done
  • Verify motion reconstruction passes 15dB minimum motion-PSNR using verify-motion.mjs script
  • Verify asset imports are idempotent per fileKey:nodeId:format:scale:version, only re-importing changed content

In OpenDesign import figma from its SKILL.md link: Plugins → Add → Skill → Import from link, then pick it in the top bar.

Download OpenDesignRead the quickstart

05 Open source, traceable

Source, License and Verification

Where this page's facts come from, and when they were last checked.

Author
HeyGen
Repository
github.com/heygen-com/hyperframes Branch main
Skill file
skills/figma/SKILL.md Content checksum recorded at verification; commit 558c11b
License
Apache-2.0 From LICENSE.
Repository stars
49,761 GitHub snapshot taken 2026-09-14 for the whole heygen-com/hyperframes repository, which contains 9 skills in this catalog. Not a rating or usage count for figma.
Verified by OpenDesign
2026-09-14 Source file, path, license text and star count were checked. Not bundled in OpenDesign main (checked 2026-08-28); a live run has not been recorded on this page.

Inside the SKILL.md

  1. Figma → HyperFramesFive-phase capability split: assets, tokens, components via REST; motion and shaders via connector or manual export
  2. Auth — two credentials, scopedPersonal access token for REST with read-only scopes; separate connector auth for motion/shaders; preflight token check before CLI
  3. RoutingParse Figma refs, route by intent to asset/tokens/component/motion/storyboard/shader phases
  4. Assets (Phase 1 — CLI)Render nodes over REST, sanitize SVG, freeze under .media/images/, batch nodes per file to avoid rate limits
  5. Tokens (Phase 2 — CLI)Import variables as composition brand entries, degrade to published styles on non-Enterprise, build binding index
  6. Components (Phase 3 — CLI)Node tree to HTML at exact geometry, vectors auto-rasterize, bind fills to tokens via var() when imported
  7. Motion (Phase 4 — connector-assisted)Retrieve motion context recursively, normalize to MotionDocs, emit GSAP scripts, validate against 15dB motion-PSNR threshold
  8. Shaders (Phase 5 — mostly manual)Connector render flattens shaders; ask user for native Figma export as PNG or MP4 instead
  9. Storyboards (a SECTION of scene frames → animation)Frames are keyframes not slides; diff adjacent frames into element chains, match by name then geometry, director notes specify transitions
  10. DeterminismFreeze all Figma URLs locally, never emit repeat -1, timelines paused and finite, all I/O at import time
The Skill's Own Description
“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.”

Front-matter description from SKILL.md. The full file is about 17,829 characters. Read the full file on GitHub.

Figma

Run figma on a Real Motion and Video Task.

Download OpenDesign, import figma from its SKILL.md link, paste the prompt above, and read the plan before the result.

Download OpenDesignBrowse all skills
Terminal
npx skills add https://github.com/heygen-com/hyperframes --skill figma

OpenDesign Desktop

One design system. Every output unmistakably your brand

Inside the full Vibe Design Workspace, use the same brand rules across websites, slide decks, interactive prototypes, dashboards, images, and HTML video. Connect Codex, Claude Code, Cursor, and other coding agents already on your computer, then create locally for free.

  • Web, slides, prototypes, dashboards, images, and video
  • 140+ design systems, plus the full template and skill library
  • Connect local Codex and 21+ coding agents · Free to use
Download free

Available for macOS and Windows