figmavon HeyGen

Figma Skill.

Ein Claude Code und Codex Skill für Motion und Video: importiert Figma-Assets, Brand-Tokens und Storyboards in eine HyperFrames-Komposition.

Motion & Video
Video

OpenDesign herunterladen Anleitung ansehen

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)

Metadaten und Abschnittsüberschriften aus der Ursprungsdatei vom 14.09.2026 · 17.829 Zeichen insgesamt

01 Was es tut

Was der figma-Skill in Claude Code und Codex leistet

Zusammenfassung, Workflow und Ergebnisse — alles aus der SKILL.md des Skills ausgelesen.

Aus der SKILL.mdGelesen am 14.09.2026 · kein aufgezeichneter Durchlauf

In den eigenen Worten des Skills

Importiert Figma-Inhalte in HyperFrames-Kompositionen über fünf Phasen: statische Assets, Brand-Token, Komponenten als HTML, Motion-Timelines und Shader. Nutzt wo immer möglich die REST API (Assets, Token, Komponenten) mit optionalem Connector für Motion- und Shader-Daten. Jeder Import friert Artefakte lokal mit protokollierter Provenienz ein, sodass Renderings Figma nie aufrufen und deterministisch bleiben.

Die Storyboard-Rekonstruktion behandelt Frames als Keyframes, die den Zustand eines Elements über die Zeit beschreiben, nicht als Folien. Unterstützt Token-zu-Komponenten-Bindung, sodass die Aktualisierung einer Brand-Variable jede importierte Komponente neu einfärbt. Berücksichtigt Rate-Limits mit automatischem Retry. Funktioniert über jede Figma-Datei, auf die das konfigurierte Token Zugriff hat.

Was er erzeugt

Eingefrorene Bild-Assets unter .media/images/ mit Manifest-Provenienz und img-Snippet
Brand-Token-Einträge, figma-tokens.json-Sidecar und Binding-Index-Einträge in .media/figma-bindings.jsonl
Editierbare HTML-Komponentenpakete unter compositions/components/<name>/
Nach den CDN-Tags eingefügte GSAP-Timeline-Skripte, pausiert und endlich, registriert unter window.__timelines

Siehe Beispiel-Prompt ↗

So funktioniert es

01
Die Figma-Referenz parsen
Verwenden Sie parseFigmaRef, um fileKey und nodeId aus der URL, dem fileKey:nodeId-String oder dem bloßen fileKey des Benutzers zu extrahieren.
02
Nach Absicht zur richtigen Phase routen
Ordnen Sie die Anfrage des Benutzers einer von fünf Phasen zu: Asset-Export, Token-Import, Komponenten-Rekonstruktion, Motion-Timelines oder Shader-Verarbeitung.
03
Abruf per REST oder Connector
REST wird für Assets, Token und Komponenten verwendet. Motion und Shader erfordern einen kompatiblen Connector oder manuellen Export.
04
Artefakte lokal mit Provenienz einfrieren
Jeder Import schreibt eine lokale Datei, ergänzt das Manifest um Quellmetadaten und regeneriert das gemeinsam genutzte Media-Use-Inventar.
05
Motion und Storyboards aus Zustandsdaten rekonstruieren
Storyboard-Frames werden durch den Vergleich benachbarter Frames zu Element-Timelines. Der Motion-Kontext wird zu MotionDocs normalisiert, dann zu GSAP-Skripten.
06
Gegen die Ground Truth verifizieren
Vergleichen Sie das Rendering mit Figmas eigenem Pixel-Export auf statische Genauigkeit. Die Motion-Rekonstruktion muss einen Motion-PSNR von mindestens 15 dB erreichen.

02 Finden Sie Ihren Favoriten

Wann der figma Skill zu verwenden ist

Verwenden Sie den figma Skill in Claude Code oder Codex, wenn die Aufgabe Motion und Video dieser Art ist. Passform und Grenzen unten sind der eigenen Datei des Skills entnommen.

Gut geeignet

Benutzer fügt einen figma.com-Link ein oder bittet darum, ein Figma-Design in ein Video oder eine Komposition einzubringen
Übernahme von Markenfarben, Token oder Stilen aus einer Figma-Datei in Kompositionsvariablen
Aufbau einer Szene aus einem Figma-Frame als editierbare HTML-Komponente
Rekonstruktion von Animation aus einem Storyboard-Abschnitt, dessen Szenen-Frames als Keyframes dienen

Grenzen kennen

Motion- und Shader-Import ohne kompatiblen Figma-Connector erfordert manuelle native Exporte
Figmas Render-Pfad für Connectoren führt keine Shader aus; sie werden auf die Grundfarbe reduziert
Die REST-Variablen-API ist Enterprise vorbehalten; in anderen Tarifen bleiben nur Metadaten im Published-Stil
Storyboard-Frames, die eine zusammenhängende Produkt-UI darstellen, eskalieren zum Neuaufbau der App als lebendes DOM, nicht als Elementketten

Was Sie bereitstellen sollten

Figma Personal Access TokenNur-Lese-Scopes: File content, File metadata, optional Library content und Variables. Als FIGMA_TOKEN in der Shell oder .env setzen.
Kompatibler Figma-Connector (optional)Separate Autorisierung vom Token. Erforderlich für Motion-Timelines und Shader-Quellen. Ohne ihn nativen Export anfordern.
Regieanweisungen für die Storyboard-AbsichtTEXT-Knoten unterhalb des Storyboard-Streifens beschreiben, wie animiert werden soll. Sie werden Szenen anhand der x-Bereichsüberlappung zugeordnet.
Nativer Figma-Export für ShaderPNG oder Motion MP4, direkt aus Figma exportiert, wenn der Connector-Pfad keine Shader ausführt oder kein Connector verfügbar ist.

03 Innerhalb des Skills

Regeln, die der figma Skill Claude Code und Codex Gibt

7 konkrete Anweisungen, Voreinstellungen und Grenzen, die die SKILL.md für den Agent festlegt – der Teil der Datei, der das Ergebnis verändert.

Token vor dem ersten CLI-Aufruf prüfen
Bevor Sie einen hyperframes figma-Befehl ausführen, prüfen Sie, ob FIGMA_TOKEN in der Shell-Umgebung oder der Projekt-.env vorhanden ist. Falls nicht, führen Sie den Nutzer durch die einmalige Einrichtung und stoppen Sie.
Immer --description für Assets Übergeben
Jeder Asset-Import muss --description mit einer Beschreibung enthalten. Dies wird zur Indexzeile und zum Bild-Alt-Text. Fügen Sie --entity für benannte Markenzeichen hinzu.
Nodes pro Datei in einer Anfrage Bündeln
Übergeben Sie mehrere Referenzen derselben Datei als leerzeichen- oder kommagetrennte Argumente. Alle werden in einem einzigen /v1/images-Aufruf gerendert, um Rate Limits zu vermeiden.
Tokens vor Komponenten Importieren
Führen Sie hyperframes figma tokens aus, bevor Sie Komponenten importieren. So können Komponentenfarben mit Markenvariablen verknüpft werden, statt doppelte Literale einzubacken.
Niemals Figma-URLs in der Komposition Belassen
Fixieren Sie zunächst alle Figma-Inhalte als lokale Dateien. Das Rendering darf für ein deterministisches Ergebnis nur lokale Dateien sehen.
Niemals Repeat: -1 Ausgeben
Timelines müssen pausiert, endlich sein, mit literalen window.__timelines-Schlüsseln. Keine Endlosschleifen.
Jeden Schritt für den Nutzer Erläutern
Sagen Sie vor jedem Befehl, was Sie aus Figma abrufen. Danach, wo es gelandet ist, was sich in der Komposition geändert hat, und den unmittelbar nächsten Schritt.

04 In Betrieb nehmen

figma in Claude Code oder Codex installieren

Ein npx skills add-Befehl, dann eine erste Aufgabe in Ihrem Agent und eine Checkliste für das Ergebnis.

figma zu Claude Code, Codex oder Ihrem Agent hinzufügen

Im eigenen Projekt ausführen; der Installer fragt, welchem Agent er hinzugefügt werden soll.

Terminal

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

Allgemeine skills-CLI-Form für skills/figma/SKILL.md; das Repository dokumentiert eventuell einen eigenen Pfad.

Geben Sie dem Skill eine erste Motion- und Video-Aufgabe

In den eigenen Begriffen des Skills verfasst; ersetzen Sie die Teile in Klammern durch Ihr 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.

Quelle: verfasst aus der SKILL.md in den eigenen Begriffen des Skills.

Das erste Ergebnis prüfen

Was die SKILL.md selbst als korrektes Ergebnis beschreibt:

Führen Sie npx hyperframes check aus, bevor Sie Motion- oder Komponentenimport als abgeschlossen markieren
Verifizieren Sie, dass die Motion-Rekonstruktion mindestens 15dB Motion-PSNR erreicht, mit dem verify-motion.mjs-Skript
Prüfen Sie, ob Asset-Importe pro fileKey:nodeId:format:scale:version idempotent sind und nur geänderte Inhalte erneut importiert werden

In OpenDesign importieren Sie figma über dessen SKILL.md-Link: Plugins → Add → Skill → Import from link, und wählen Sie es anschließend in der oberen Leiste aus.

OpenDesign herunterladen Quickstart lesen

05 Open Source, nachvollziehbar

Quelle, Lizenz und Verifizierung

Woher die Fakten auf dieser Seite stammen und wann sie zuletzt geprüft wurden.

Author: HeyGen
Repository: github.com/heygen-com/hyperframes Branch main
Skill-Datei: skills/figma/SKILL.md Content-Prüfsumme bei Verifizierung aufgezeichnet; Commit 558c11b
License: Apache-2.0 Aus LICENSE.
Repository-Sterne: 49.761 GitHub-Snapshot erstellt am 2026-09-14 für das gesamte Repository heygen-com/hyperframes, das 9 Skills in diesem Katalog enthält. Keine Bewertung oder Nutzungszahl für figma.
Verifiziert von OpenDesign: 14.09.2026 Quelldatei, Pfad, Lizenztext und Sternezählung wurden geprüft. Nicht in OpenDesign main gebündelt (geprüft 28.08.2026); ein Live-Durchlauf wurde auf dieser Seite nicht erfasst.

In der SKILL.md

Figma → HyperFramesAufteilung der Fähigkeiten in fünf Phasen: Assets, Tokens, Komponenten über REST; Motion und Shader über Connector oder manuellen Export
Auth — zwei Zugangsdaten, mit ScopePersönlicher Access-Token für REST mit Nur-Lese-Scopes; separate Connector-Authentifizierung für Motion/Shader; Token-Vorabprüfung vor der CLI
RoutingFigma-Referenzen parsen, nach Absicht in die Phasen Asset/Tokens/Komponente/Motion/Storyboard/Shader routen
Assets (Phase 1 — CLI)Nodes über REST rendern, SVG bereinigen, unter .media/images/ einfrieren, Nodes pro Datei bündeln, um Rate-Limits zu vermeiden
Tokens (Phase 2 — CLI)Variablen als Composition-Brand-Einträge importieren, bei Nicht-Enterprise auf veröffentlichte Styles zurückstufen, Binding-Index aufbauen
Komponenten (Phase 3 — CLI)Node-Baum in HTML mit exakter Geometrie umwandeln, Vektoren werden automatisch rasterisiert, Fills werden beim Import über var() an Tokens gebunden
Motion (Phase 4 — Connector-unterstützt)Motion-Kontext rekursiv abrufen, in MotionDocs normalisieren, GSAP-Skripte erzeugen, gegen Schwellenwert von 15dB Motion-PSNR validieren
Shader (Phase 5 — größtenteils manuell)Der Connector-Render flacht Shader ab; bitten Sie den Nutzer stattdessen um einen nativen Figma-Export als PNG oder MP4
Storyboards (eine SECTION aus Szenenframes → Animation)Frames sind Keyframes, keine Folien; benachbarte Frames werden zu Element-Ketten verglichen, Zuordnung erst nach Name, dann Geometrie, Director-Notes geben Übergänge vor
DeterminismusAlle Figma-URLs lokal einfrieren, niemals repeat -1 ausgeben, Timelines pausiert und endlich, alle I/O zum Importzeitpunkt

Die eigene Beschreibung des Skills

„Importiert Figma-Inhalte in eine HyperFrames-Komposition – gerenderte Assets, Brand-Tokens, Komponenten, Storyboard-Abschnitte → rekonstruierte Motion (Frames werden als Zustände gelesen, nicht als Folien) (REST/CLI), Connector-unterstützte Motion, wenn verfügbar, und Shader aus einem Connector oder nativem Export. Verwendung, wenn der Benutzer einen figma.com-Link einfügt oder darum bittet, ein Figma-Design, Frame, Logo, eine Brand oder Animation in ein Video/eine Komposition einzubringen."

Front-Matter-Beschreibung aus SKILL.md. Die vollständige Datei umfasst etwa 17.829 Zeichen. Die vollständige Datei auf GitHub lesen.

Figma

figma für eine echte Motion- und Video-Aufgabe ausführen.

OpenDesign herunterladen, figma über seinen SKILL.md-Link importieren, den obigen Prompt einfügen und den Plan vor dem Ergebnis lesen.

OpenDesign herunterladen Alle Skills durchsuchen

Terminal

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

Was der figma-Skill in Claude Code und Codex leistet

In den eigenen Worten des Skills

So funktioniert es

Wann der figma Skill zu verwenden ist

Gut geeignet

Grenzen kennen

Was Sie bereitstellen sollten

Regeln, die der figma Skill Claude Code und Codex Gibt

Token vor dem ersten CLI-Aufruf prüfen

Immer --description für Assets Übergeben

Nodes pro Datei in einer Anfrage Bündeln

Tokens vor Komponenten Importieren

Niemals Figma-URLs in der Komposition Belassen

Niemals Repeat: -1 Ausgeben

Jeden Schritt für den Nutzer Erläutern