figmadi HeyGen

Figma Skill.

Una skill per Claude Code e Codex dedicata a motion e video: importa asset, token di brand e storyboard da Figma in una composizione HyperFrames.

Motion e video
Video

Scarica OpenDesign Guida all'uso

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 e intestazioni di sezione letti dal file upstream il 14/09/2026 · 17.829 caratteri in totale

01 Cosa fa

Cosa fa lo Skill figma in Claude Code e Codex

Sintesi, workflow e output, tutto letto dal SKILL.md della skill.

Dal SKILL.mdLetto il 14-09-2026 · non è un'esecuzione registrata

Nelle parole della skill

Importa contenuti Figma in composizioni HyperFrames attraverso cinque fasi: asset statici, token di brand, componenti come HTML, timeline di motion e shader. Utilizza REST API ove possibile (asset, token, componenti) con connector opzionale per dati di motion e shader. Ogni importazione congela gli artifact localmente con provenance registrata, così i render non chiamano mai Figma e restano deterministici.

La ricostruzione dello storyboard tratta i frame come keyframe che descrivono lo stato di un elemento nel tempo, non come slide. Supporta il binding token-componente, così l'aggiornamento di una variabile di brand ricolora ogni componente importato. Attento ai rate limit, con retry automatico. Funziona su ogni file Figma a cui il token configurato può accedere.

Che cosa produce

Asset immagine congelati sotto .media/images/ con provenance nel manifest e snippet img
Voci di token di brand, sidecar figma-tokens.json e record binding-index in .media/figma-bindings.jsonl
Pacchetti di componenti HTML editabili sotto compositions/components/<name>/
Script timeline GSAP iniettati dopo i tag CDN, in pausa e finiti, registrati su window.__timelines

Vedi l'esempio di prompt ↗

Come funziona

01
Analizzare il Riferimento Figma
Usa parseFigmaRef per estrarre fileKey e nodeId dall'URL dell'utente, dalla stringa fileKey:nodeId o dal solo fileKey.
02
Indirizzare in Base all'Intento alla Fase Corretta
Fai corrispondere la richiesta dell'utente a una delle cinque fasi: esportazione asset, importazione token, ricostruzione componenti, timeline di motion o gestione shader.
03
Recuperare via REST o Connector
REST viene usato per asset, token e componenti. Motion e shader richiedono un connector compatibile o un'esportazione manuale.
04
Congelare gli Artifact Localmente con Provenance
Ogni importazione scrive un file locale, aggiunge al manifest i metadati della fonte e rigenera l'inventario condiviso di utilizzo dei media.
05
Ricostruire Motion e Storyboard dai Dati di Stato
I frame dello storyboard diventano timeline di elementi tramite il confronto (diff) tra frame adiacenti. Il contesto di motion viene normalizzato in MotionDocs, poi in script GSAP.
06
Verificare Rispetto alla Ground Truth
Confronta il render con l'esportazione pixel nativa di Figma per la fedeltà statica. La ricostruzione del motion deve superare un motion-PSNR minimo di 15dB.

02 Trova la tua applicazione

Quando usare lo skill figma

Usa lo skill figma in Claude Code o Codex quando il lavoro riguarda motion e video di questo tipo. Idoneità e limiti qui sotto sono tratti dal file dello skill stesso.

Buona applicazione

L'utente incolla un link figma.com o chiede di portare un design Figma in un video o in una composizione
Estrarre colori di brand, token o stili da un file Figma nelle variabili della composizione
Costruire una scena da un frame Figma come componente HTML editabile
Ricostruire l'animazione da una sezione di storyboard che contiene frame di scena come keyframe

Conosci i limiti

L'importazione di motion e shader senza un connector Figma compatibile richiede esportazioni native manuali
Il percorso di rendering del connettore Figma non esegue gli shader; vengono appiattiti al colore di base
L'API REST delle variabili è riservata al piano Enterprise; gli altri piani ripiegano sui metadati in stile pubblicato
I fotogrammi dello storyboard che rappresentano una UI di prodotto coerente evolvono nella ricostruzione dell'app come DOM live, non come catene di elementi

Cosa fornire

Token di accesso personale FigmaAmbiti di sola lettura: File content, File metadata, opzionalmente Library content e Variables. Impostare come FIGMA_TOKEN nella shell o in .env.
Connettore Figma compatibile (opzionale)Autorizzazione separata dal token. Richiesto per le timeline di movimento e la fonte degli shader. Senza di esso, richiedere l'esportazione nativa.
Note del regista per l'intento dello storyboardI nodi TEXT sotto la striscia dello storyboard descrivono come animare. Associati alle scene tramite sovrapposizione dell'intervallo x.
Esportazione nativa da Figma per gli shaderPNG o Motion MP4 esportati direttamente da Figma quando il percorso del connettore non esegue gli shader o non è disponibile alcun connettore.

03 Dentro la skill

Le regole che lo skill figma fornisce a Claude Code e Codex

7 istruzioni concrete, valori predefiniti e limiti che SKILL.md definisce per l'agente — la parte del file che cambia il risultato.

Controllare il token prima della prima chiamata CLI
Prima di eseguire qualsiasi comando hyperframes figma, verificare che FIGMA_TOKEN esista nell'ambiente della shell o nel file .env del progetto. Se non esiste in nessuno dei due, guidare l'utente attraverso la configurazione una tantum e interrompere.
Passare sempre --description per gli asset
Ogni importazione di asset deve includere --description con la descrizione dell'elemento. Questo diventa la riga dell'indice e il testo alt dell'immagine. Aggiungere --entity per i marchi denominati.
Raggruppare i nodi in una singola richiesta per file
Passare più riferimenti dello stesso file come argomenti separati da spazi o uniti da virgole. Vengono tutti renderizzati in un'unica chiamata /v1/images per evitare i limiti di frequenza.
Importare i token prima dei componenti
Eseguire hyperframes figma tokens prima di importare i componenti. Questo consente ai colori dei componenti di collegarsi alle variabili del brand invece di incorporare valori letterali duplicati.
Non lasciare mai URL Figma nella composizione
Congelare prima tutto il contenuto Figma in file locali. Il rendering deve vedere solo file locali per un output deterministico.
Non emettere mai Repeat: -1
Le timeline devono essere in pausa, finite, con chiavi window.__timelines letterali. Nessun ciclo infinito.
Narrare ogni passaggio per l'utente
Prima di ogni comando, indicare cosa si sta recuperando da Figma. Dopo, indicare dove è arrivato, cosa è cambiato nella composizione e la prossima azione immediata.

04 Mettila al lavoro

Installa figma in Claude Code o Codex

Un comando npx skills add, poi un primo task nel tuo agente e una checklist per il risultato.

Aggiungi figma a Claude Code, Codex o al tuo agente

Eseguitelo nel Suo progetto; l'installer chiede a quale agente aggiungerlo.

Terminal

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

Forma CLI generica skills per skills/figma/SKILL.md; il repository potrebbe documentare il proprio percorso.

Dai alla Skill un Primo Compito di Motion e Video

Redatto nei termini propri della skill; sostituisca le parti tra parentesi con il suo materiale.

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.

Fonte: redatto a partire dal SKILL.md, nei termini propri della skill.

Verifica il primo risultato

Ciò che il SKILL.md stesso indica come risultato corretto:

Eseguire npx hyperframes check prima di considerare completata l'importazione di movimento o componenti
Verificare che la ricostruzione del movimento superi un minimo di 15dB di motion-PSNR usando lo script verify-motion.mjs
Verifica che le importazioni degli asset siano idempotenti per fileKey:nodeId:format:scale:version, reimportando solo i contenuti modificati

In OpenDesign importa figma dal suo link SKILL.md: Plugins → Add → Skill → Import from link, poi selezionalo nella barra superiore.

Scarica OpenDesign Leggi il quickstart

05 Open source, tracciabile

Sorgente, licenza e verifica

Da dove provengono i dati di questa pagina e quando sono stati verificati l'ultima volta.

Author: HeyGen
Repository: github.com/heygen-com/hyperframes Branch main
File della skill: skills/figma/SKILL.md Checksum del contenuto registrato alla verifica; commit 558c11b
License: Apache-2.0 Da LICENSE.
Stelle del repository: 49.761 Snapshot GitHub del 14/09/2026 per l'intero repository heygen-com/hyperframes, che contiene 9 skill in questo catalogo. Non è un indice di valutazione o utilizzo per figma.
Verificato da OpenDesign: 14/09/2026 File sorgente, percorso, testo della licenza e conteggio delle stelle sono stati verificati. Non inclusa in OpenDesign main (verificato il 28/08/2026); un'esecuzione live non è stata registrata in questa pagina.

All'interno di SKILL.md

Figma → HyperFramesSuddivisione delle funzionalità in cinque fasi: asset, token, componenti tramite REST; motion e shader tramite connettore o esportazione manuale
Autenticazione — due credenziali, con ambitiPersonal access token per REST con scope di sola lettura; autenticazione separata del connettore per motion/shader; controllo preventivo del token prima della CLI
InstradamentoAnalizza i riferimenti Figma, instrada in base all'intento verso le fasi asset/token/componente/motion/storyboard/shader
Asset (Fase 1 — CLI)Renderizza i nodi tramite REST, sanifica gli SVG, congela sotto .media/images/, raggruppa i nodi per file per evitare limiti di frequenza
Token (Fase 2 — CLI)Importa le variabili come voci brand di composizione, degrada agli stili pubblicati sui piani non Enterprise, costruisce l'indice dei binding
Componenti (Fase 3 — CLI)Trasforma l'albero dei nodi in HTML con geometria esatta, i vettori si rasterizzano automaticamente, associa i riempimenti ai token tramite var() quando importati
Motion (Fase 4 — assistita da connettore)Recupera il contesto motion ricorsivamente, normalizza in MotionDocs, genera script GSAP, valida rispetto alla soglia di 15dB motion-PSNR
Shader (Fase 5 — perlopiù manuale)Il render del connettore appiattisce gli shader; chiedi all'utente di esportare nativamente da Figma come PNG o MP4
Storyboard (una SEZIONE di frame di scena → animazione)I frame sono keyframe, non slide; confronta i frame adiacenti per ottenere catene di elementi, associa per nome poi per geometria, le note di regia specificano le transizioni
DeterminismoCongela localmente tutti gli URL Figma, non emettere mai repeat -1, le timeline sono in pausa e finite, tutto l'I/O avviene al momento dell'importazione

Descrizione della skill

Importa contenuti Figma in una composizione HyperFrames — asset renderizzati, token di brand, componenti, sezioni storyboard → motion ricostruito (i frame sono letti come stati, non slide) (REST/CLI), motion assistito da connector quando disponibile e shader da connector o export nativo. Usa quando l'utente incolla un link figma.com o chiede di portare un design, frame, logo, brand o animazione Figma in un video/composizione.

Descrizione front-matter da SKILL.md. Il file completo è di circa 17.829 caratteri. Leggi il file completo su GitHub.

Figma

Esegui figma su un'attività reale di Motion e Video.

Scarica OpenDesign, importa figma dal link SKILL.md, incolla il prompt sopra e leggi il piano prima del risultato.

Scarica OpenDesign Esplora tutte le skill

Terminale

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

Cosa fa lo Skill figma in Claude Code e Codex

Nelle parole della skill

Come funziona

Quando usare lo skill figma

Buona applicazione

Conosci i limiti

Cosa fornire

Le regole che lo skill figma fornisce a Claude Code e Codex

Controllare il token prima della prima chiamata CLI

Passare sempre --description per gli asset

Raggruppare i nodi in una singola richiesta per file

Importare i token prima dei componenti

Non lasciare mai URL Figma nella composizione

Non emettere mai Repeat: -1

Narrare ogni passaggio per l'utente