skills.rest
CodeWithSally
CodeWithSallyOFFICIAL
Explore all skills by this author →
GitHub

figma

Import Figma assets, tokens, components, and motion into HyperFrames compositions.

13|17|Updated Jan 30, 2025
Search Tags:#figma#animation#rest api#gsap#video composition#design import#brand tokens
One-click install
npx skills add https://github.com/CodeWithSally/CodeWithSally-Apex-English --skill figma-codewithsally
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figma
Source: https://github.com/CodeWithSally/CodeWithSally-Apex-English/tree/main/Sessions/ClaudeCode/Session007/.agents/skills/figma
Command: npx skills add https://github.com/CodeWithSally/CodeWithSally-Apex-English --skill figma-codewithsally

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve? Designers and developers need to bring Figma designs into video compositions without manually recreating assets, colors, and animations. This Skill automates importing Figma content—rendered assets, brand tokens, components, storyboards, and motion—into HyperFrames compositions as deterministic local files. ## Core Features & Use Cases - Asset & Token Import: Render Figma nodes via REST API as frozen SVG/PNG files and import brand variables as composition tokens with binding records. - Component & Motion Reconstruction: Convert Figma node trees to editable HTML components and translate connector-provided motion data into GSAP timelines, verified against Figma exports with a PSNR-based script. - Storyboard Animation: Parse storyboard sections into element keyframe chains and rebuild UI flows as animated timelines rather than static slide sequences. - Use Case: A user pastes a figma.com link to a brand logo and a storyboard section; the Skill freezes the logo as SVG, imports brand colors as variables, and reconstructs the storyboard as an animated GSAP timeline. ## Quick Start Paste a Figma link and ask to import that design, frame, or animation into your HyperFrames composition.

Frequently Asked Questions about figma

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I import a Figma design into a video composition?▼

Paste the figma.com link and state your intent: assets import via hyperframes figma asset, brand colors via hyperframes figma tokens, and frames via hyperframes figma component. Each command freezes files locally with provenance records so renders never call Figma.

How do I convert Figma animations to GSAP timelines?▼

Motion import uses a compatible Figma connector to retrieve motion context, then motionContextToDocs and motionToGsap helpers translate it into a paused GSAP timeline. Validate the result with the verify-motion.mjs script comparing against Figma's own video export.

What Figma token scopes are needed for the REST API?▼

You need File content: Read-only and File metadata: Read-only scopes. Add Library content: Read-only for published styles fallback on non-Enterprise plans, and Variables: Read-only for brand variables, which is Enterprise-only.

Why does Figma tokens import say REQUIRES_ENTERPRISE?▼

Figma's variables REST endpoint is Enterprise-gated, so on other plans the tokens command degrades to published-style metadata automatically. This is expected behavior, not an error, and values resolve at component-import time.

Can I import Figma shader effects into a composition?▼

Figma's connector render path flattens shaders to the base color, so connector capture produces wrong output. Ask the user to export the shader frame natively from Figma as PNG or MP4, then import it as a standard asset or video clip.

Why does my Figma import hit rate limits?▼

Figma's REST API enforces per-minute rate limits per endpoint. Batch multiple node IDs into a single asset command, and note that 429 responses automatically retry with backoff honoring the Retry-After header.

Related Skills

Explore More Design & Creative Skills→
double-coding-labdouble-coding-lab
4

pp-doctor

Inspects Figma design files for naming, layout, structure, and asset issues before code generation.

Official
Advanced
heygen-comheygen-com
43.5k

hyperframes-core

Defines the composition contract for building renderable HyperFrames HTML video projects.

Official
Advanced
heygen-comheygen-com
43.5k

media-use

Resolve, generate, and operate on media assets for HyperFrames video projects.

Official
Advanced
waqarahmed-designwaqarahmed-design
13

technical-tools

Align design tools, front-end knowledge, and collaboration patterns into a unified workflow.

Community
Advanced