Featured

Launch OpenClaw on Hostinger in about 60 seconds and keep your agent live 24/7. Our referral link gives you 20% off, no coupon code needed.

Launch on Hostinger →

Run your Hermes agent on Hostinger, fully managed

Launch Hermes on Hostinger in one click, fully managed, no VPS knowledge needed. Use code ZACAARON10 for 10% off.

Launch on Hostinger →

Crawl and scrape any site into clean data, 10% off

Firecrawl crawls and scrapes any site into clean markdown for your agent. Get 1,000 free credits, and new users get 10% off their first purchase.

Try Firecrawl free →

Your own AI agent, running 24/7 with QwikClaw

QwikClaw sets up and runs an always-on OpenClaw agent for you. One click, no config files, no server setup.

Deploy now →

One API to scrape, enrich, and extract the internet.

Context.dev gives your agents a single API to scrape, enrich, and extract live web data — no proxies, no parsers, no maintenance.

Start building free →

SetupClaw: done-for-you OpenClaw for founders & exec teams

White-glove OpenClaw for founders and exec teams (4–50+ employees): we install, harden, integrate your tools, and maintain it — secured from day one.

Get it set up for you →

SEO data APIs for your agent, $1 free credit

DataForSEO gives your agent live access to SERP results, keyword data, backlinks, and on-page SEO data through one API. New accounts get a $1 credit, good for up to 20,000 keyword or backlink lookups.

Try DataForSEO free →

Reach 47,000+ AI builders

A flat monthly placement in front of developers actively installing AI tools. No lock-in, cancel anytime.

Advertise here →

Deploy OpenClaw in 60 seconds — 20% off

Launch on Hostinger →

Run your Hermes agent on Hostinger, fully managed

Launch on Hostinger →

Crawl and scrape any site into clean data, 10% off

Try Firecrawl free →

Your own AI agent, running 24/7 with QwikClaw

Deploy now →

One API to scrape, enrich, and extract the internet.

Start building free →

SetupClaw: done-for-you OpenClaw for founders & exec teams

Get it set up for you →

SEO data APIs for your agent, $1 free credit

Try DataForSEO free →

Reach 47,000+ AI builders

Advertise here →

figma

heygen-com/hyperframes

3K installs33K stars

Run it on Hostinger →up to 70% off + an extra 10% with code ZACAARON10 Free API →

Installation

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

Summary

Import Figma content into a HyperFrames composition — rendered assets, brand tokens, components, and Figma Motion animations — via the Figma MCP connector. 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.

SKILL.md

Figma → HyperFrames

Bring the user's Figma work into a composition. MCP-first: you (the agent) call the Figma MCP tools, then hand their output to the pure helpers in @hyperframes/core/figma, freezing every asset locally so renders stay deterministic.

Auth

Requires the Figma MCP connector (one-click OAuth). If tools error unauthenticated, tell the user to connect Figma and stop.

Routing

Parse the user's figma link with parseFigmaRef. Then by intent:

"use this layer / logo / image" → Asset import
"import this animation / motion" → Motion import
brand tokens / components → not in this skill version (see the design spec roadmap).

Asset import

get_metadata(fileKey, nodeId) → confirm the node, capture width/height.
Export it: download_assets (or node image export) for PNG; prefer SVG for vectors.
Freeze: write the bytes with freezeBytes(bytes, join(typeDirPath(projectDir,"image"), id + ext)) where id = nextId(projectDir,"image").
Ledger: appendRecord(projectDir, { id, type:"image", path, source:"figma", width, height, provenance:{ source:"figma", fileKey, nodeId, format } }).
Emit buildAssetSnippet(record).html into the composition. Re-import guard: findByFigmaNode before re-fetching.

Motion import

get_motion_context(fileKey, nodeId) → read the codeSnippets.motionDev (and .css).
Normalize it into a MotionDoc: for each animated property build a MotionTrack { property (motion.dev name), values, times (0..1), ease[] (named strings or [x1,y1,x2,y2] bezier arrays), duration, repeat }. Selector = the target element's stable id (#<id> from the component's data-figma-id/id).
const spec = motionToGsap(doc);
const script = emitTimelineScript(spec); → inject as a <script> in the composition (after the GSAP + CustomEase CDN tags). The timeline is paused, finite, registered on window.__timelines.
If a track uses shader/spring/effect props with no GSAP mapping, bake instead: export_video → freeze MP4 → embed as <video class="clip">. Say which path you used.

Determinism

Never leave a Figma URL in the composition — freeze first. Never emit repeat: -1. Timelines paused.

Score

0–100

71/ 100

Grade

Popularity23/30

3,239 installs — solid traction. Source repo has 33,107 GitHub stars.

Completeness27/30

Documented: full SKILL.md body, description, one-line install. Missing: category/license metadata.

Trust15/25

Community skill with a public GitHub source repository you can review.

Freshness6/15

No update timestamp is tracked for this skill in our catalog.

Scored automatically from popularity, completeness, trust, and freshness — computed only from data in our catalog, never fabricated.

Proud of your score? Add this badge to your README.

Paste a snippet into your GitHub README. The badge updates automatically and links back to this page.

Score badge

Markdown

[![Figma skill](https://www.claudemarket.ai/skills/heygen-com/hyperframes/figma/badges/score.svg)](https://www.claudemarket.ai/skills/heygen-com/hyperframes/figma)

HTML

<a href="https://www.claudemarket.ai/skills/heygen-com/hyperframes/figma"><img src="https://www.claudemarket.ai/skills/heygen-com/hyperframes/figma/badges/score.svg" alt="Figma skill"/></a>