figma

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

Updated Sep 6, 2026
One-click install
npx skills add https://github.com/AbuBakar125-co/Resturant_web --skill figma-abubakar125-co
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: figma
Source: https://github.com/AbuBakar125-co/Resturant_web/tree/main/agent/skills/figma
Command: npx skills add https://github.com/AbuBakar125-co/Resturant_web --skill figma-abubakar125-co

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve? Designers and developers often need to turn Figma designs into animated video compositions, but manually recreating assets, brand tokens, components, and motion timelines is slow and error-prone. This Skill automates importing Figma content into HyperFrames compositions with frozen local assets and deterministic renders. ## Core Features & Use Cases - Asset and token import: Render Figma layers as SVG/PNG via the REST API and import brand variables or published styles as composition variables with binding records. - Component and motion reconstruction: Convert Figma node trees into editable HTML components and translate connector-provided motion data into GSAP timelines, with an objective PSNR-based verification script. - Storyboard reconstruction: Diff storyboard section frames into element chains and build animated timelines, treating frames as keyframes rather than slides. - Use Case: A user pastes a figma.com link to a brand logo and a storyboard section; the Skill freezes the assets locally, imports brand tokens, and reconstructs the animation as a deterministic HyperFrames composition. ## Quick Start Paste a Figma link and ask the assistant 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 a figma.com link and the Skill routes it by intent: assets render via the REST API as frozen SVG/PNG files, components convert to editable HTML, and motion translates to GSAP timelines. All Figma I/O happens at import time so renders stay deterministic.

How do I import Figma brand tokens and colors without an Enterprise plan?

Run the tokens command, which degrades to published-style metadata on non-Enterprise plans. With a compatible Figma connector, variable definitions can be retrieved and cached to build the binding index, labeling the import as connector-sourced.

What Figma token scopes does the integration need?

The token needs read-only scopes: File content and File metadata. Add Library content read-only for the published-styles fallback on non-Enterprise plans, and optionally Variables read-only which is Enterprise-only. The integration never writes to Figma.

Can Figma motion and animations be imported without a connector?

Motion import has no REST equivalent, so without a compatible connector you must provide a native Figma export such as an MP4, which is frozen and embedded as a video clip. Shader-driven tracks always require a native export since Figma flattens shaders to base colors.

Why does the Figma import return a 403 or 429 error?

A 403 names the exact missing token scope, such as library content for the styles fallback, or means the file is not visible to the account. A 429 is rate limiting; the client retries automatically with backoff honoring Retry-After, so wait a minute or batch fewer nodes per call.

How is imported Figma motion verified for accuracy?

The verify-motion script compares the render against Figma's own video export using motion-energy PSNR deltas, which cancels out static fidelity differences. It fails below a 15dB minimum motion-PSNR threshold, indicating diverging choreography that needs re-translation.