Installations du plugin : Avant les commandes de configuration ou de mise à jour, suivez les règles d'exécution du plugin lorsque cette compétence se trouve dans un plugin HyperFrames. Les installations autonomes conservent les instructions de mise à jour ci-dessous.

Tout d'abord, gardez cette compétence à jour — confirmez avec l'utilisateur avant d'exécuter : npx hyperframes skills update figma. Une rapide opération sans effet si tout est à jour ; sinon, cela rafraîchit cette compétence ainsi que les compétences de domaine principal dont elle dépend avant que vous ne les utilisiez.

Figma → HyperFrames

Importez le travail Figma de l'utilisateur dans une composition. Divisé par capacité (spécification de conception §2) :

Phase	Quoi	Transport	Surface
1	Ressources statiques	REST	`hyperframes figma asset`
2	Jetons de marque/styles	REST	`hyperframes figma tokens`
3	Composants → HTML	REST	`hyperframes figma component`
4	Motion → GSAP	connecteur quand disponible	utiliser son contexte de motion
5	Shaders	connecteur / export manuel	l'utiliser ou une exportation native

REST est utilisé partout où cela est possible (utilisable à volume, sans tête). Un connecteur Figma compatible est optionnel pour les données de motion et de shader ; sans lui, demandez une exportation native. Chaque chemin gèle les ressources localement pour que les rendus restent déterministes. Les reconstructions de storyboard composent les exportations de ressources de Phase 1 (REST) avec un assemblage de chronologie piloté par l'agent — aucun connecteur n'est nécessaire. Les ressources gelées existantes, les enregistrements de manifeste et les liaisons ne sont pas affectés par les changements de routage — la division ne fait que changer la credential que la prochaine importation utilisera.

Authentification — deux credentials, limitées

Vérification préalable — avant le premier appel CLI, vérifiez qu'un jeton existe : shell env ([ -n "$FIGMA_TOKEN" ]) ou le .env du projet (le CLI le charge automatiquement — une entrée .env compte comme configurée). Si aucun, n'exécutez PAS la commande pour récolter l'erreur — guidez l'utilisateur à travers la configuration unique d'abord, puis arrêtez-vous et attendez :

figma.com/settings → Sécurité → Jetons d'accès personnels → Générer un nouveau jeton.
Scopes — la lecture seule est tout ce dont cette intégration a besoin (elle n'écrit jamais dans Figma) : Contenu du fichier : Lecture seule + Métadonnées du fichier : Lecture seule. Ajoutez Contenu de la bibliothèque : Lecture seule si vous exécutez tokens sur un plan Non-Enterprise — le fallback des styles publiés touche /v1/files/:key/styles, qui renvoie 403 sans cela (un scope que l'ancien texte de configuration omettait). Optionnellement Variables : Lecture seule pour les variables de marque — Enterprise uniquement ; sans cela, tokens se dégrade automatiquement en styles publiés (attendu, pas une erreur — dites-le). Un 403 nomme désormais le scope exact manquant ; les 429 réessayent automatiquement (limite par minute, honore Retry-After).
Demandez à l'utilisateur de définir FIGMA_TOKEN dans son profil shell ou .env du projet ; ne lui demandez jamais de coller le jeton dans la conversation.

Pendant l'intégration, définissez également les attentes en une phrase : chaque importation atterrit comme un fichier gelé local avec une provenance enregistrée — les rendus n'appellent jamais Figma, réexécuter une commande réimporte uniquement ce qui a changé dans Figma, et un jeton fonctionne pour les ressources, les jetons de marque et les composants de tous les fichiers que leur compte Figma peut voir.

Phases 4–5 (motion/shaders) : un connecteur Figma compatible, avec une autorisation séparée du jeton. S'il est indisponible ou non authentifié, demandez à l'utilisateur de le connecter ou de fournir une exportation native, puis arrêtez-vous.
Dites exactement quelle credential une phase en échec nécessite — ne présentez jamais la division comme cassée.
BAD_TOKEN (401) en cours de flux → le jeton a expiré/révoqué ; regénérez-le. FORBIDDEN (403) → le message nomme le scope exact manquant (ex. library_content:read pour le fallback des styles) — ajoutez-le, ou le fichier n'est pas visible par le compte. REQUIRES_ENTERPRISE (403 sur les variables) → pas un échec : le fallback des styles a déjà eu lieu. RATE_LIMITED (429) → le client a déjà réessayé avec backoff (cela s'applique à CHAQUE lecture — ressources, jetons, styles, arbres de nœuds, versions — la nouvelle tentative vit dans le chemin de requête partagé ; Retry-After est honoré, plafonné à 60s) ; si cela refait surface, attendez une minute ou importez moins de nœuds par appel.

Conscience de la limite de débit (spécification §2.1) : les quotas des connecteurs varient selon le plan Figma — traitez les requêtes de cadres parents par lots, sautez les captures d'écran de vérification sauf demande, et mettez en cache les réponses brutes pour qu'une redérivation n'utilise jamais un second appel. REST est par minute (10+/min, buckets par point de terminaison) — bien à volume, faites backoff sur 429.

Routage

Analysez le lien Figma de l'utilisateur avec parseFigmaRef (URL, fileKey:nodeId, fileKey nu). Ensuite, selon l'intention :

"utilise ce calque / logo / image" → Ressource (CLI)
"importe ma marque / mes couleurs / mes jetons" → Jetons (CLI)
"construis une scène à partir de cette image" → Composant (CLI)
"importe cette animation / ce motion" → Motion (connecteur quand disponible, ci-dessous)
une section de storyboard / filmstrip d'images de scène → Storyboard (ci-dessous)
remplissage/effet shader → Shaders (ci-dessous)

Racontez chaque étape pour l'utilisateur — avant chaque commande, dites ce que vous allez extraire de Figma ; après, dites où l'artefact a atterri (le chemin gelé / sidecar / dossier composant), ce qui a changé dans la composition, et la prochaine action immédiate (prévisualisation, ajout de variables imprimées, réimportation pour lier les liaisons). L'utilisateur ne doit jamais avoir à demander "est-ce que ça a marché ?" ou "et maintenant ?".

Ressources (Phase 1 — CLI)

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

Rend via REST, nettoie les SVG, gèle sous .media/images/, ajoute le manifeste avec la provenance, régénère .media/index.md (l'inventaire partagé d'utilisation des médias), imprime un extrait <img>. Idempotent par fileKey:nodeId:format:scale:version. Préférez SVG pour les vecteurs/logos (évolutif, animable), PNG --scale 2 pour la fidélité raster. Passez toujours --description "<ce que c'est>" (cela devient la ligne d'index + <img alt>) ; ajoutez --entity "<nom>" pour les marques nommées afin que les éléments de médias resolve --entity puissent les trouver plus tard (les correspondances d'entité s'appliquent à travers image/icône).

Traitez plusieurs nœuds par lot en UNE SEULE requête — passez plusieurs refs (séparés par des espaces ou des virgules) du MÊME fichier : hyperframes figma asset 'KEY:1-2' 'KEY:3-4' 'KEY:5-6'. Tous sont rendus en un seul appel /v1/images, ce qui est la propre réponse de Figma à la limite de débit par minute — préférez-la à N commandes séparées lorsque vous extrayez un ensemble de ressources d'une image entière. --description/--entity s'appliquent à chaque nœud du lot, donc traitez par lots les nœuds qui partagent un même but. Les 429 réessayent également automatiquement avec backoff.

Jetons (Phase 2 — CLI)

hyperframes figma tokens <fileKey>

Importe les variables comme entrées de variables de marque de la composition + sidecar figma-tokens.json + enregistrements d'index de liaison (.media/figma-bindings.jsonl). Les variables sont réservées Enterprise en amont : sur d'autres plans, la commande se dégrade en métadonnées de style publié (les valeurs se résolvent au moment de l'importation du composant). Ajoutez les entrées imprimées dans les data-composition-variables de la composition.

Importez les jetons avant les composants lorsque les deux sont souhaités — c'est ce qui permet aux couleurs des composants de se lier aux variables de marque au lieu de dupliquer les valeurs.

Chemin des variables Non-Enterprise (testé sur le terrain) : les variables REST sont réservées Enterprise, mais un connecteur compatible peut fournir des définitions de variables. Lorsque tokens signale REQUIRES_ENTERPRISE et que le connecteur est disponible, récupérez les variables de la scène parente une fois, mettez en cache la réponse brute dans .media/figma-cache/, et utilisez-la pour construire l'index de liaison. L'arbre de nœuds REST boundVariables fournit des VariableIDs par propriété ; joignez-les par nœud et propriété, puis écrivez les lignes .media/figma-bindings.jsonl ({kind:"binding", figmaId, sourceFileKey, compositionVariableId: "figma:<name>", version}) plus les entrées de variables de composition. Tout ce qui est en aval (résolution var() du composant, rafraîchissement, variables CSS runtime) est la machinerie fournie. Étiquetez-le pour l'utilisateur : "jetons via le connecteur Figma — les plans Enterprise obtiennent cela directement depuis hyperframes figma tokens."

Le runtime définit chaque variable de composition déclarée comme une propriété personnalisée CSS (racine du document + hôtes des sous-composants), donc le var(--slug, literal) importé remplit le recoloriage lorsque la valeur par défaut de la variable change — mettre à jour une valeur dans data-composition-variables rebrandit chaque composant importé sans rien réimporter. hyperframes render --variables '<json>' les remplace au moment du rendu.

Composants (Phase 3 — CLI)

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

Arbre de nœuds → HTML éditable aux dimensions exactes de Figma, empaqueté comme un élément de registre sous compositions/components/<nom>/. Les vecteurs/opérations booléennes se rasterizent automatiquement via l'exportation de Phase 1. Passe de liaison (spécification §7.1, ID exact uniquement — jamais de correspondance par valeur) :

Auto-vérification de fidélité statique (obligatoire pour le contenu vedette) : après l'importation, rendez le fragment et comparez-le aux pixels réels de Figma — figma asset <même nœud> --format png est la vérité terrain. Le texte est l'axe de dérive connu : une boîte de texte Figma plus courte que sa hauteur de ligne a des limites verticalement tronquées (le mappeur émet text-box-trim pour celles-ci ; la dérive mesurée sans cela était d'environ 6px sur une police de 70px). Si la comparaison montre une dérive que le mappeur ne couvre pas, signalez-la — ne modifiez pas le fragment manuellement en silence.
Remplissage lié à un jeton importé → var(--slug, #literal) — la mise à jour de la marque se propage.
Lié à un jeton inconnu → littéral + drapeau data-figma-unresolved. La commande vous en informe ; proposez à l'utilisateur : exécutez tokens sur le fichier source (ou de bibliothèque), puis réimportez le composant pour les lier. Demandez une fois par bibliothèque inconnue quel fichier c'est — ne devinez jamais, ne faites jamais correspondre par hexadécimal.

Motion (Phase 4 — assisté par connecteur)

Balise d'utilisation : Les phases assistées par connecteur n'ont pas de point de contact CLI, donc déclenchez la balise de compétence au début et à la fin (anonyme, avec consentement, ne provoque jamais d'erreur) : npx hyperframes events --skill=figma-motion lorsque vous commencez, npx hyperframes events --skill=figma-motion --event=skill_completed --outcome=success|error lorsque vous avez terminé. Idem pour les shaders (figma-shaders) et les storyboards (figma-storyboard).

Aucun équivalent REST n'existe. Lorsqu'un connecteur compatible est disponible, utilisez-le et passez sa sortie aux aides pures dans @hyperframes/core/figma ; sinon, demandez une exportation native :

Récupérez le contexte de motion pour le cadre parent en une seule requête récursive, pas une requête par élément. Enregistrez le JSON brut à côté du projet (.media/figma-cache/) pour que la retraduction soit gratuite.
Normalisez en MotionDocs avec motionContextToDocs(rawResponse, { selectorFor, repeat }) depuis @hyperframes/core/figma — ne transcrivez jamais les numéros d'image clé manuellement. L'aide encode mécaniquement les règles de décodage testées sur le terrain : elle analyse les extraits motion.dev (l'encodage fiable — les extraits CSS étirent les durées et peuvent être en désaccord ; ils sont ignorés), supprime les images clés de fin de boucle (segments sub-milliseconde à des temps ≈0.9999→1 sont la réinitialisation instantanée de la boucle, pas une motion créée — l'enveloppement est réalisé par le redémarrage repeat), et préserve les courbes de Bézier verbatim. selectorFor doit retourner les IDs de l'importation du composant de Phase 3 — ne dérivez pas les sélecteurs des noms de nœuds. 2b. Validez par rapport à la vérité terrain avant de déclarer terminé — obligatoire : exportez le cadre racine de la cohorte via le connecteur disponible et exécutez node <SKILL_DIR>/scripts/verify-motion.mjs --reference <export.mp4> --render <render.mp4> --crop WxH+X+Y — il compare les deltas d'énergie de motion (la fidélité d'importation statique s'annule) et échoue en dessous de 15 dB de motion-PSNR minimum (calibré : fidèle ≈ 20+, divergent ≈ 5). Mesurez --crop à partir des bords réels de la carte du rendu, ne devinez pas. ÉCHEC signifie revérifier la traduction, pas le seuil.
motionToGsap(doc) → emitTimelineScript(spec) → injectez comme une <script> après les balises GSAP + CustomEase CDN. En pause, fini, enregistré sur window.__timelines avec une clé littérale.
Piste intraduisible (pilotée par shader, propriété non prise en charge, masques complexes) → exportez via le connecteur, gelez le MP4, puis intégrez-le comme <video class="clip">. Exception : les pistes pilotées par shader — le chemin d'exportation de Figma aplatit les shaders en couleur de base (voir Shaders ci-dessous), donc une cuisson y perd silencieusement le shader ; demandez à l'utilisateur une exportation Figma native à la place. Dites toujours quel chemin vous avez utilisé et pourquoi. Les courbes nommées en dehors de l'ensemble mappé tombent en linéaire par défaut — la table de correspondance vit dans motionEase.ts ; signalez le fallback à l'utilisateur lorsqu'il se produit.
Exécutez npx hyperframes check avant de déclarer terminé.

Shaders (Phase 5 — principalement manuelle)

Le chemin de rendu du connecteur Figma n'exécute pas les shaders (ils s'aplatissent en couleur de base), et la source du shader n'est accessible que pour les styles publiés dans la bibliothèque (siège complet payant). Chemin par défaut : demandez à l'utilisateur d'exporter l'image shader nativement dans Figma (PNG ou MP4 de motion), puis importez-la comme une ressource de Phase 1 / clip. N'essayez pas de capture pixel du connecteur d'un shader — cela produira silencieusement une chose erronée.

Storyboards (une SECTION d'images de scène → animation)

La règle cardinale : les images de storyboard sont des IMAGES CLÉS, pas des diapositives. Deux images contenant le même élément décrivent l'état de cet élément dans le temps — animez l'ÉLÉMENT entre les états ; ne jouez jamais les images comme une séquence d'arrêts sur image. Un logo dessiné dans quatre images consécutives à des y descendants est UN élément s'élevant à travers quatre images clés. Jouer les images de storyboard bout à bout est le mode de défaillance ; reconstruire les chronologies d'éléments qu'elles impliquent est le travail.

Les fichiers de storyboard suivent une grammaire que vous pouvez analyser mécaniquement — n'évaluez pas à l'œil, décodez :

Unités de scène : à l'intérieur de la SECTION, chaque nœud de la taille d'une image est une scène — à la fois les FRAMEs nommés et les RECTANGLEs pleine image libres (les concepteurs collent directement les arrêts sur image dans la section). Filtrez par taille (≈ aspect de la composition, par ex. >1400×900), pas par type ou nom de nœud.
Ordre = position x (en ligne majeure si la bande s'enroule). Triez les scènes par absoluteBoundingBox.x.
Différence adjacente : comparez les nœuds enfants d'une scène à la suivante. Tout nœud qui apparaît dans la scène N+1 mais pas dans N est enter:{} (apparaît). Tout nœud qui disparaît est exit:{} (disparaît). Les nœuds qui persistent changent de position, d'échelle, de rotation, d'opacité — calculez le delta et émettez des images clés.
Mode de temporisation : par défaut, chaque scène tient 1s sur une ligne de temps continue. Si la propriété name ou description d'une scène contient duration: ou un temps en secondes (ex. 3.5s), utilisez-le à la place.
Reconstruction (première passe) : assemblez une chronologie GSAP avec gsap.timeline(). Les entrées sont scene1 → scene2 → …. Utilisez position: ">" pour un enchaînement, à moins que les scènes ne se chevauchent (mêmes noms de nœuds dans les deux ayant des propriétés de position similaires) — dans ce cas, chevauchez à 50% de la scène précédente.
Reconstruction (deuxième passe) : après la passe initiale, exécutez npx hyperframes check et node <SKILL_DIR>/scripts/verify-motion.mjs (comme pour la Phase 4). Si la chronologie ressemble à "quelque chose entrant, puis sortant" sans animation continue, vous avez traité les images comme des diapositives — recommencez la passe 1 avec des deltas d'élément, pas des entrées de scène.

Conditions d'arrêt et proaction

Problèmes d'authentification : arrêtez-vous après avoir signalé le problème et les étapes de correction. Ne réessayez pas automatiquement.
Dégradation Enterprise : lorsque les variables sont indisponibles, le fallback des styles publiés se produit automatiquement. Confirmez-le en une phrase : "Les jetons de marque ont été importés en utilisant les styles publiés (les variables nécessitent un plan Enterprise Figma). Les valeurs se résolvent au moment de l'importation du composant."
Échec du connecteur : arrêtez-vous, conseillez l'exportation native, NE passez PAS à une autre phase comme solution de contournement.
Apparitions de limite de débit : gérez automatiquement par backoff, mais si l'utilisateur voit "429", dites "Limite de débit Figma atteinte — attendez une minute ou importez moins de nœuds par commande."
Limites de commande : avant d'exécuter une commande CLI, vérifiez qu'elle existe dans le projet (l'installateur HyperFrames l'enregistre). Sinon, conseillez d'abord l'installation.
Maintenance : exécutez npx hyperframes skills update figma avant de démarrer si vous soupçonnez que la compétence est obsolète.

courtneymgabrus-star/Video

Qu'est-ce que Video ?

Demander à votre IA préférée

Documentation