Plugin-Installation: Führen Sie vor Setup- oder Aktualisierungsbefehlen die Plugin-Installationsregeln aus, wenn sich dieses Skill innerhalb eines HyperFrames-Plugins befindet. Eigenständige Installationen behalten die untenstehenden Aktualisierungshinweise bei.

Zunächst halten Sie dieses Skill frisch – bestätigen Sie mit dem Benutzer vor dem Ausführen: npx hyperframes skills update figma. Ein schneller No-Op, wenn alles aktuell ist; andernfalls aktualisiert es dieses Skill sowie die Kernbereichs-Skills, von denen es abhängt, bevor Sie sich auf sie verlassen.

Figma → HyperFrames

Bringen Sie die Figma-Arbeit des Benutzers in eine Komposition. Nach Fähigkeiten aufgeteilt (Design-Spezifikation §2):

Phase	Was	Transport	Oberfläche
1	Statische Assets	REST	`hyperframes figma asset`
2	Marken-Tokens/Styles	REST	`hyperframes figma tokens`
3	Komponenten → HTML	REST	`hyperframes figma component`
4	Bewegung → GSAP	Connector, wenn verfügbar	Verwenden Sie seinen Bewegungskontext
5	Shader	Connector / manueller Export	Verwenden Sie ihn oder einen nativen Export

REST wird verwendet, wo immer möglich (nutzbar in großem Umfang, headless). Ein kompatibler Figma-Connector ist optional für Bewegungs- und Shader-Daten; ohne einen solchen fordern Sie einen nativen Export an. Jeder Pfad friert Assets lokal ein, sodass Renderings deterministisch bleiben. Storyboard-Rekonstruktionen kombinieren Phase-1-Asset-Exporte (REST) mit einer agentengesteuerten Timeline-Erstellung – kein Connector erforderlich. Vorhandene eingefrorene Assets, Manifesteinträge und Bindungen werden durch Routing-Änderungen nicht beeinflusst – die Aufteilung ändert nur, welche Anmeldeinformationen der nächste Import verwendet.

Authentifizierung – zwei Anmeldeinformationen, bereichsbezogen

Vorab-Check – vor dem ersten CLI-Aufruf prüfen, ob ein Token existiert: Shell-Env ([ -n "$FIGMA_TOKEN" ]) oder das Projekt .env (die CLI lädt es automatisch – ein .env-Eintrag gilt als konfiguriert). Wenn keines vorhanden ist, führen Sie NICHT den Befehl aus, um den Fehler zu provozieren – führen Sie den Benutzer stattdessen durch die einmalige Einrichtung und stoppen Sie dann:

figma.com/settings → Sicherheit → Persönliche Zugriffstoken → Neues Token generieren.
Bereiche – Schreibgeschützt ist alles, was diese Integration jemals benötigt (sie schreibt nie in Figma): Dateiinhalt: Schreibgeschützt + Dateimetadaten: Schreibgeschützt. Fügen Sie Bibliotheksinhalt: Schreibgeschützt hinzu, wenn Sie tokens in einem Nicht-Enterprise-Plan ausführen – der Fallback auf veröffentlichte Styles trifft /v1/files/:key/styles, was ohne diesen Bereich einen 403-Fehler auslöst (ein Bereich, den der ältere Setup-Text ausgelassen hat). Optional Variablen: Schreibgeschützt für Markenvariablen – nur Enterprise; ohne ihn degradiert tokens automatisch zu veröffentlichten Styles (erwartet, kein Fehler – sagen Sie das). Ein 403-Fehler nennt jetzt den genauen fehlenden Bereich; 429-Fehler werden automatisch wiederholt (pro-Minute-Limit, beachtet Retry-After).
Lassen Sie den Benutzer FIGMA_TOKEN in seinem Shell-Profil oder Projekt .env setzen; bitten Sie ihn niemals, das Token in die Konversation einzufügen.

Während des Onboardings setzen Sie auch in einem Atemzug die Erwartungen: Jeder Import landet als lokale eingefrorene Datei mit aufgezeichneter Herkunft – Renderings rufen nie Figma auf, ein erneutes Ausführen eines Befehls importiert nur das, was sich in Figma geändert hat, und ein Token funktioniert für Assets, Marken-Tokens und Komponenten in allen Dateien, die das Figma-Konto des Benutzers einsehen kann.

Phasen 4–5 (Bewegung/Shader): ein kompatibler Figma-Connector mit separater Autorisierung vom Token. Wenn er nicht verfügbar oder nicht authentifiziert ist, bitten Sie den Benutzer, ihn zu verbinden oder einen nativen Export bereitzustellen, und stoppen Sie dann.
Sagen Sie genau, welche Anmeldeinformationen eine fehlschlagende Phase benötigt – präsentieren Sie die Aufteilung niemals als defekt.
BAD_TOKEN (401) während des Ablaufs → das Token ist abgelaufen/widerrufen; neu generieren. FORBIDDEN (403) → die Nachricht nennt den genauen fehlenden Bereich (z.B. library_content:read für den Styles-Fallback) – fügen Sie ihn hinzu, oder die Datei ist für das Konto nicht sichtbar. REQUIRES_ENTERPRISE (403 bei Variablen) → kein Fehler: der Styles-Fallback wurde bereits ausgeführt. RATE_LIMITED (429) → der Client hat bereits mit Backoff wiederholt (dies gilt für JEDEN Lesevorgang – Assets, Tokens, Styles, Knotenbäume, Versionen – die Wiederholung befindet sich im gemeinsamen Anforderungspfad; Retry-After wird beachtet, gedeckelt auf 60s); wenn es immer noch auftritt, warten Sie eine Minute oder importieren Sie weniger Knoten pro Aufruf.

Ratenbegrenzungsbewusstsein (Spezifikation §2.1): Connector-Kontingente variieren je nach Figma-Plan – bündeln Sie übergeordnete Frame-Anfragen, überspringen Sie Verifikations-Screenshots, sofern nicht danach gefragt, und zwischenspeichern Sie rohe Antworten, sodass eine erneute Ableitung nie einen zweiten Aufruf kostet. REST ist pro Minute (10+/Min., pro Endpunkt-Buckets) – in großem Umfang in Ordnung, bei 429-Fehlern zurückfahren.

Routing

Parsen Sie den Figma-Link des Benutzers mit parseFigmaRef (URL, fileKey:nodeId, bloßes fileKey). Dann nach Absicht:

"diese Ebene / dieses Logo / dieses Bild verwenden" → Asset (CLI)
"meine Marke / meine Farben / meine Tokens holen" → Tokens (CLI)
"eine Szene aus diesem Frame erstellen" → Komponente (CLI)
"diese Animation / Bewegung importieren" → Bewegung (Connector, wenn verfügbar, unten)
ein Storyboard-Abschnitt / Filmstreifen von Szenen-Frames → Storyboard (unten)
Shader-Füllung/Effekt → Shader (unten)

Erzählen Sie dem Benutzer jeden Schritt – sagen Sie vor jedem Befehl, was Sie gleich aus Figma holen werden; sagen Sie danach, wo das Artefakt gelandet ist (der eingefrorene Pfad / Sidecar / Komponentenverzeichnis), was sich in der Komposition geändert hat und die unmittelbare nächste Aktion (Vorschau, gedruckte Variablen hinzufügen, erneut importieren, um Bindungen zu verknüpfen). Der Benutzer sollte nie fragen müssen: "Hat es funktioniert?" oder "Und jetzt?".

Assets (Phase 1 – CLI)

hyperframes figma asset '<url-oder-fileKey:nodeId>' [weitere Ref…] [--format svg|png|jpg|pdf] [--scale 2] [--description "..."] [--entity "..."]

Rendert über REST, bereinigt SVG, friert unter .media/images/ ein, hängt das Manifest mit Herkunft an, generiert .media/index.md (das gemeinsame Mediennutzungsinventar) neu, gibt einen <img>-Snippet aus. Idempotent pro fileKey:nodeId:format:scale:version. Bevorzugen Sie SVG für Vektoren/Logos (skalierbar, animierbar), PNG --scale 2 für Raster-Treue. Übergeben Sie immer --description "<was es ist>" (es wird die Indexzeile + <img alt>); fügen Sie --entity "<name>" für benannte Markenzeichen hinzu, damit die Mediennutzung resolve --entity sie später findet (Entität-Treffer stimmen über Bild/Symbol hinweg überein).

Viele Knoten in EINER Anforderung bündeln – übergeben Sie mehrere Ref (leerzeichen- oder kommagetrennt) der GLEICHEN Datei: hyperframes figma asset 'KEY:1-2' 'KEY:3-4' 'KEY:5-6'. Alle werden in einem einzigen /v1/images-Aufruf gerendert, was Figmas eigene Antwort auf das Pro-Minute-Ratenlimit ist – bevorzugen Sie dies gegenüber N separaten Befehlen, wenn Sie Assets eines gesamten Frames ziehen. --description/--entity gelten für jeden Knoten im Batch, also bündeln Sie Knoten, die einen gemeinsamen Zweck haben. 429-Fehler werden ebenfalls unabhängig davon mit Backoff automatisch wiederholt.

Tokens (Phase 2 – CLI)

hyperframes figma tokens <fileKey>

Importiert Variablen als Kompositions-Markenvariablen-Einträge + figma-tokens.json-Sidecar + Binding-Index-Datensätze (.media/figma-bindings.jsonl). Variablen sind upstream auf Enterprise beschränkt: bei anderen Plänen degradiert der Befehl zu Metadaten veröffentlichter Styles (Werte werden zum Zeitpunkt des Komponentenimports aufgelöst). Fügen Sie die gedruckten Einträge zu den data-composition-variables der Komposition hinzu.

Importieren Sie Tokens vor Komponenten, wenn beide gewünscht sind – das ermöglicht es Komponentenfarben, sich mit Markenvariablen zu verlinken, anstatt Duplikate zu erzeugen.

Nicht-Enterprise-Variablen-Pfad (feldgetestet): REST-Variablen sind Enterprise-beschränkt, aber ein kompatibler Connector kann Variablendefinitionen bereitstellen. Wenn tokens REQUIRES_ENTERPRISE meldet und der Connector verfügbar ist, rufen Sie die Variablen der übergeordneten Szene einmal ab, zwischenspeichern Sie die rohe Antwort in .media/figma-cache/ und verwenden Sie sie, um den Binding-Index zu erstellen. Der REST-Knotenbaum liefert mit boundVariables VariableIDs pro Eigenschaft; verbinden Sie sie nach Knoten und Eigenschaft, schreiben Sie dann .media/figma-bindings.jsonl-Zeilen ({kind:"binding", figmaId, sourceFileKey, compositionVariableId: "figma:<name>", version}) plus die Kompositionsvariablen-Einträge. Alles Downstream (Komponenten-var()-Auflösung, Aktualisierung, Laufzeit-CSS-Variablen) ist die ausgelieferte Mechanik. Kennzeichnen Sie es für den Benutzer: "Tokens über den Figma-Connector – Enterprise-Pläne erhalten dies direkt von hyperframes figma tokens."

Die Laufzeit definiert jede deklarierte Kompositionsvariable als CSS-Custom-Property (Dokumentstamm + Sub-Comp-Hosts), sodass importiertes var(--slug, literal) die Neufärbung ausfüllt, wenn sich der Variablenstandard ändert – das Aktualisieren eines Werts in data-composition-variables benennt jede importierte Komponente neu, ohne etwas erneut importieren zu müssen. hyperframes render --variables '<json>' überschreibt sie zur Rendering-Zeit.

Komponenten (Phase 3 – CLI)

hyperframes figma component '<url-oder-fileKey:nodeId>'

Knotenbaum → bearbeitbares HTML bei exakter Figma-Geometrie, verpackt als Registry-Element unter compositions/components/<name>/. Vektoren/boolesche Operationen werden automatisch über den Phase-1-Export gerastert. Bindungsdurchlauf (Spezifikation §7.1, nur exakte ID – niemals Wertabgleich):

Statischer Treue-Selbsttest (obligatorisch für heroische Inhalte): Nach dem Importieren das Fragment rendern und mit Figmas eigenen Pixeln vergleichen – figma asset <gleicher Knoten> --format png ist die Ground Truth. Text ist die bekannte Abweichungsachse: ein Figma-Textfeld, das kürzer als seine Zeilenhöhe ist, hat vertikal zugeschnittene Grenzen (der Mapper gibt für diese text-box-trim aus; gemessene Abweichung ohne war ~6px bei einer 70px-Schrift). Wenn der Vergleich eine Abweichung zeigt, die der Mapper nicht abdeckt, melden Sie es – nehmen Sie keine stillschweigenden manuellen Anpassungen am Fragment vor.
Füllung gebunden an ein importiertes Token → var(--slug, #literal) – Markenaktualisierung propagiert.
Gebunden an ein unbekanntes Token → Literal + data-figma-unresolved-Flag. Der Befehl teilt es Ihnen mit; bieten Sie dem Benutzer an: führen Sie tokens für die Quell- (oder Bibliotheks-)Datei aus, importieren Sie dann die Komponente erneut, um sie zu verknüpfen. Fragen Sie einmal pro unbekannter Bibliothek, um welche Datei es sich handelt – raten Sie nie, gleichen Sie nie nach Hex ab.

Bewegung (Phase 4 – Connector-unterstützt)

Nutzungsbeacon: Connector-unterstützte Phasen haben keinen CLI-Berührungspunkt, also feuern Sie den Skill-Beacon zu Beginn und am Ende (anonym, zustimmungsgesteuert, schlägt nie fehl): npx hyperframes events --skill=figma-motion wenn Sie beginnen, npx hyperframes events --skill=figma-motion --event=skill_completed --outcome=success|error wenn Sie fertig sind. Gleiches für Shader (figma-shaders) und Storyboards (figma-storyboard).

Kein REST-Äquivalent existiert. Wenn ein kompatibler Connector verfügbar ist, verwenden Sie ihn und übergeben Sie seine Ausgabe an die reinen Helfer in @hyperframes/core/figma; andernfalls fordern Sie einen nativen Export an:

Rufen Sie den Bewegungskontext für den übergeordneten Frame in einer rekursiven Anforderung ab, nicht einer Anforderung pro Element. Speichern Sie das rohe JSON neben dem Projekt (.media/figma-cache/), sodass eine erneute Übersetzung kostenlos ist.
Normalisieren Sie in MotionDocs mit motionContextToDocs(rawResponse, { selectorFor, repeat }) aus @hyperframes/core/figma – transkribieren Sie Keyframe-Nummern niemals von Hand. Der Helfer kodiert die feldgetesteten Dekodierungsregeln mechanisch: er parst die motion.dev-Snippets (die zuverlässige Kodierung – die CSS-Snippets strecken Dauern und können widersprüchlich sein; sie werden ignoriert), entfernt Schleifen-End-Keyframes (Sub-Millisekunden-Segmente zu Zeiten ≈0,9999→1 sind der sofortige Reset der Schleife, keine autorisierte Bewegung – die Schleife wird durch repeat-Neustart realisiert) und bewahrt Bezier-Easings originalgetreu. selectorFor muss die IDs aus dem Phase-3-Komponentenimport zurückgeben – leiten Sie Selektoren nicht von Knotennamen ab. 2b. Vor dem Abschluss gegen Ground Truth validieren – obligatorisch: Exportieren Sie den Wurzelrahmen der Kohorte über den verfügbaren Connector und führen Sie node <SKILL_DIR>/scripts/verify-motion.mjs --reference <export.mp4> --render <render.mp4> --crop WxH+X+Y aus – es vergleicht Bewegung-Energie-Deltas (statische Importtreue hebt sich auf) und schlägt unter 15 dB minimalem Bewegung-PSNR fehl (kalibriert: originalgetreu ≈ 20+, abweichend ≈ 5). Messen Sie --crop von den tatsächlichen Kartengrenzen des Renderings, raten Sie nicht. FEHLER bedeutet, die Übersetzung erneut zu prüfen, nicht den Schwellenwert.
motionToGsap(doc) → emitTimelineScript(spec) → als <script> nach den GSAP + CustomEase CDN-Tags einfügen. Pausiert, endlich, registriert auf window.__timelines mit einem literal Schlüssel.
Nicht übersetzbare Spur (Shader-gesteuert, nicht unterstützte Eigenschaft, komplexe Masken) → durch den Connector exportieren, das MP4 einfrieren, dann als <video class="clip"> einbetten. Ausnahme: Shader-gesteuerte Spuren – Figmas Exportpfad reduziert Shader auf die Basisfarbe (siehe Shader unten), sodass ein Bake dort den Shader still verliert; fordern Sie stattdessen den Benutzer zu einem nativen Figma-Export auf. Sagen Sie immer, welchen Pfad Sie verwendet haben und warum. Benannte Easings außerhalb des zugeordneten Satzes fallen auf linear zurück – die Zuordnungstabelle lebt in motionEase.ts; kennzeichnen Sie den Fallback für den Benutzer, wenn er ausgelöst wird.
Führen Sie npx hyperframes check aus, bevor Sie es für erledigt erklären.

Shader (Phase 5 – meist manuell)

Figmas Connector-Renderpfad führt keine Shader aus (sie werden auf die Basisfarbe reduziert), und die Shader-Quelle ist nur für bibliotheksveröffentlichte Styles (kostenpflichtiger Vollzugang) erreichbar. Standardpfad: Bitten Sie den Benutzer, den Shader-Frame nativ in Figma zu exportieren (PNG oder Bewegungs-MP4), und importieren Sie ihn dann als Phase-1-Asset/Clip. Versuchen Sie keine Connector-Pixel-Erfassung eines Shaders – sie wird still das falsche Ergebnis liefern.

Storyboards (ein ABSCHNITT von Szenen-Frames → Animation)

Die wichtigste Regel: Storyboard-Frames sind KEYFRAMES, keine Folien. Zwei Frames, die dasselbe Element enthalten, beschreiben den Zustand dieses Elements im Laufe der Zeit – animieren Sie das ELEMENT zwischen den Zuständen; spielen Sie die Frames niemals als eine Sequenz von Standbildern ab. Ein Logo, das in vier aufeinanderfolgenden Frames mit abnehmendem Y gezeichnet wird, ist EIN Element, das durch vier Keyframes aufsteigt. Das Hintereinander-Abspielen von Storyboard-Frames ist der Fehlermodus; die Rekonstruktion der implizierten Element-Zeitachsen ist die Aufgabe.

Storyboard-Dateien folgen einer Grammatik, die Sie mechanisch parsen können – schauen Sie nicht nach Augenmaß, dekodieren Sie:

Szeneneinheiten: innerhalb des ABSCHNITTS ist jeder Frame-große Knoten eine Szene – sowohl benannte FRAMEs als auch lose vollflächige RECTANGLEs (Designer fügen Standbilder direkt in den Abschnitt ein). Filtern Sie nach Größe (≈ Kompositionsseitenverhältnis, z.B. >1400×900), nicht nach Knotentyp oder Name.
Reihenfolge = x-Position (zeilenweise, wenn der Streifen umbricht). Sortieren Sie Szenen nach absoluteBoundingBox.x.
Diff benachbarte Szenen: für jeden gelösten Knoten, der in Frame N und Frame N+1 vorhanden ist, berechnen Sie eine Tween-Quelle ({von: Zustand N, zu: Zustand N+1}). Eigenschaften, die sich nicht geändert haben → weg (kein Keyframe). Das ergibt maximal N-1 Tweens – komprimieren Sie identische benachbarte Zustände, feuern Sie nur bei Änderungen.
Knotenauflösung: Jeder Frame exportiert den vollständigen Knotenbaum. Lösen Sie Knoten zuerst nach ID auf (figma-IDs sind stabil), dann nach Name (Autolayout-Duplikate verschieben IDs). Knoten, die nur in einem Frame existieren → <img> einfügen (Phase-1-Export) + Fade-In-Keyframe.
Zeitachsen-Montage: hyperframes figma storyboard timeline' orchestriert den Export, führt die Differenzierung durch und gibt eine GSAP-Timeline aus. Führen Sie es mit --preview aus, bevor Sie rendern – es spielt die rekonstruierte Bewegung ab, sodass Sie sie validieren können, bevor Sie sie für erledigt erklären.

Das ist die Arbeit. Erzählen Sie nichts über Folien.

Projekt-Besonderheiten

Credential-Hierarchie: Der FIGMA_TOKEN (REST) übernimmt – er ist die authentifiziertere Anmeldeinformation, hat einen weiteren Bereich und liest Bibliotheken. Der Connector-Bereich ist eine separate Autorisierung.

Bedingung	Ergebnis
Kein Connector, eingeschränkter REST-Token	Asset + Tokens + Komponente (Phase 1–3); Bewegung + Shader (Phase 4–5) anfordern, dann stoppen
Connector + REST-Token	Alle 5 Phasen

Caching: Alle REST-API-Antworten im Arbeitsablauf werden zu .media/figma-cache/<endpoint-hash>.json zwischengespeichert. Das Cache-Steuerungsverhalten: hyperframes figma übernimmt invalide Antworten im Cache (z.B. 304) – Sie verwalten den Cache nie manuell. Die Cache-Fenster sind: Knotenbäume 5 Min., Bild-URLs 10 Min., Variablen-/Stildefinitionen 30 Min., Storyboard-Szenen-IDs 10 Min. Der Connector-Cache-Zwischenspeicher ist separat, wird aber bei der Connector-Autorisierung ungültig gemacht.

Bereinigungs-Sidecar: Wenn ein figma asset-Befehl Assets ersetzt (gleicher Knoten, neue Version), wird das alte unter .media/images/<hash>.bak gespeichert, bis hyperframes figma clean ausgeführt wird. Der Sidecar wird nur geschrieben, wenn die Version des manifestierten Assets != der neuen Version ist. Der Sidecar wird automatisch beim nächsten erfolgreichen hyperframes figma asset mit derselben Knoten-ID gelöscht – wenn Sie ihn also versehentlich überschreiben, wird der Sidecar beim nächsten Import dieser Knoten-ID gelöscht.

Außerhalb der Geschäftszeiten: hyperframes figma wird während des normalen Geschäftsbetriebs ausgeführt, es gibt keine geplanten Ausfallzeiten.

Lizenz: MIT

kinyias/hyperframes-templates

Was ist hyperframes-templates?

In Ihrer bevorzugten KI fragen

Dokumentation