figmapar HeyGen

Figma Skill.

Un skill Claude Code et Codex pour le motion et la vidéo : importe des éléments Figma, des tokens de marque et des storyboards dans une composition HyperFrames.

Mouvement et vidéo
Video

Télécharger OpenDesign Voir le guide d'utilisation

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)

En-tête et titres de section lus depuis le fichier amont le 14 septembre 2026 · 17 829 caractères au total

01 Ce qu'il fait

Ce que fait le skill figma dans Claude Code et Codex

Résumé, workflow et sorties, tous lus dans le SKILL.md du skill.

D'après le SKILL.mdLu le 14-09-2026 · pas une exécution enregistrée

Dans les termes du Skill

Importe le contenu Figma dans les compositions HyperFrames selon cinq phases : assets statiques, tokens de marque, composants en HTML, timelines d'animation et shaders. Utilise l'API REST autant que possible (assets, tokens, composants) avec un connecteur optionnel pour les données d'animation et de shader. Chaque import fige les artefacts en local avec une provenance enregistrée, afin que les rendus n'appellent jamais Figma et restent déterministes.

La reconstruction du storyboard traite les frames comme des keyframes décrivant l'état d'un élément dans le temps, et non comme des diapositives. Prend en charge la liaison token-composant, si bien qu'une mise à jour de variable de marque recolore tous les composants importés. Tient compte des limites de débit avec relance automatique. Fonctionne sur tous les fichiers Figma accessibles au token configuré.

Ce qu'il produit

Assets d'images figés sous .media/images/ avec provenance dans le manifest et extrait img
Entrées de tokens de marque, sidecar figma-tokens.json et enregistrements binding-index dans .media/figma-bindings.jsonl
Packages de composants HTML modifiables sous compositions/components/<name>/
Scripts de timeline GSAP injectés après les balises CDN, en pause et finis, enregistrés sur window.__timelines

Voir l'exemple de prompt ↗

Fonctionnement

01
Analyser la référence Figma
Utilisez parseFigmaRef pour extraire fileKey et nodeId à partir de l'URL de l'utilisateur, d'une chaîne fileKey:nodeId, ou d'un fileKey seul.
02
Router selon l'intention vers la bonne phase
Faites correspondre la demande de l'utilisateur à une des cinq phases : export d'assets, import de tokens, reconstruction de composants, timelines d'animation, ou gestion des shaders.
03
Récupérer via REST ou connecteur
REST est utilisé pour les assets, les tokens et les composants. Les animations et les shaders nécessitent un connecteur compatible ou un export manuel.
04
Figer les artefacts en local avec provenance
Chaque import écrit un fichier local, ajoute au manifest les métadonnées de source, et régénère l'inventaire partagé d'utilisation des médias.
05
Reconstruire l'animation et les storyboards à partir des données d'état
Les frames du storyboard deviennent des timelines d'élément par différenciation des frames adjacentes. Le contexte d'animation est normalisé en MotionDocs, puis en scripts GSAP.
06
Vérifier par rapport à la vérité terrain
Comparez le rendu à l'export pixel natif de Figma pour la fidélité statique. La reconstruction d'animation doit atteindre un motion-PSNR minimum de 15 dB.

02 Trouvez celui qui vous convient

Quand utiliser le skill figma

Utilisez le skill figma dans Claude Code ou Codex quand le travail concerne motion et video de ce type. Adéquation et limites ci-dessous sont tirées du fichier propre au skill.

Bon choix

L'utilisateur colle un lien figma.com ou demande d'importer un design Figma dans une vidéo ou une composition
Extraction de couleurs de marque, tokens ou styles d'un fichier Figma vers des variables de composition
Construction d'une scène à partir d'une frame Figma sous forme de composant HTML modifiable
Reconstruction d'une animation à partir d'une section de storyboard contenant des frames de scène en tant que keyframes

Connaître les limites

L'import d'animation et de shader sans connecteur Figma compatible nécessite des exports natifs manuels
Le chemin de rendu du connecteur Figma n'exécute pas les shaders ; ils sont aplatis en couleur de base
L'API REST variables est réservée à l'offre Enterprise ; les autres offres se limitent à des métadonnées de style publié
Les cadres de storyboard représentant une UI produit cohérente passent à la reconstruction de l'app en DOM en direct, et non en chaînes d'éléments

Quoi fournir

Jeton d'accès personnel FigmaPortées en lecture seule : contenu de fichier, métadonnées de fichier, éventuellement contenu de bibliothèque et Variables. À définir comme FIGMA_TOKEN dans le shell ou .env.
Connecteur Figma compatible (facultatif)Autorisation distincte du jeton. Requis pour les chronologies d'animation et la source des shaders. Sans lui, demandez un export natif.
Notes de direction pour l'intention du storyboardLes nœuds TEXT sous la bande du storyboard décrivent comment animer. Associés aux scènes par chevauchement de plage x.
Export natif Figma pour les shadersPNG ou Motion MP4 exporté directement depuis Figma lorsque le chemin du connecteur n'exécute pas les shaders ou qu'aucun connecteur n'est disponible.

03 Dans le skill

Règles que le skill figma donne à Claude Code et Codex

7 instructions concrètes, valeurs par défaut et limites que le SKILL.md fixe pour l'agent — la partie du fichier qui change le résultat.

Vérifier le jeton avant le premier appel CLI
Avant d'exécuter toute commande hyperframes figma, vérifiez que FIGMA_TOKEN existe dans l'environnement shell ou dans le .env du projet. Si aucun des deux, guidez l'utilisateur dans la configuration initiale et arrêtez-vous.
Toujours passer --description pour les assets
Chaque import d'asset doit inclure --description précisant de quoi il s'agit. Cela devient la ligne d'index et le texte alt de l'image. Ajoutez --entity pour les marques nommées.
Regrouper les nœuds en une seule requête par fichier
Passez plusieurs références du même fichier en arguments séparés par des espaces ou des virgules. Tous sont rendus dans un seul appel /v1/images pour éviter les limites de débit.
Importer les tokens avant les composants
Exécutez hyperframes figma tokens avant d'importer les composants. Cela permet aux couleurs des composants de se lier aux variables de marque plutôt que de figer des valeurs littérales en double.
Ne jamais laisser d'URL Figma dans la composition
Figez d'abord tout le contenu Figma en fichiers locaux. Le rendu doit ne voir que des fichiers locaux pour un résultat déterministe.
Ne jamais émettre Repeat: -1
Les chronologies doivent être en pause, finies, avec des clés window.__timelines littérales. Aucune boucle infinie.
Décrire chaque étape à l'utilisateur
Avant chaque commande, dites ce que vous récupérez depuis Figma. Après, dites où cela a été placé, ce qui a changé dans la composition, et l'action suivante immédiate.

04 Mettez-le en pratique

Installer figma dans Claude Code ou Codex

Une commande npx skills add, puis une première tâche dans votre agent et une checklist pour le résultat.

Ajouter figma à Claude Code, Codex ou votre agent

Exécutez-la dans votre projet ; l'installateur demande à quel agent l'ajouter.

Terminal

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

Forme générique de la CLI skills pour skills/figma/SKILL.md ; le dépôt peut documenter son propre chemin.

Donner au skill une première tâche de motion et vidéo

Rédigé dans les termes propres du skill ; remplacez les parties entre crochets par votre contenu.

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.

Source : rédigé à partir du SKILL.md, dans les termes propres du skill.

Vérifiez le premier résultat

Ce que le SKILL.md lui-même présente comme un résultat correct :

Exécutez npx hyperframes check avant de considérer l'import de motion ou de composant comme terminé
Vérifiez que la reconstruction de motion atteint un motion-PSNR minimum de 15dB à l'aide du script verify-motion.mjs
Vérifier que les imports d'assets sont idempotents par fileKey:nodeId:format:scale:version, en ne réimportant que le contenu modifié

Dans OpenDesign, importez figma depuis son lien SKILL.md : Plugins → Add → Skill → Import from link, puis sélectionnez-le dans la barre supérieure.

Télécharger OpenDesign Lire le démarrage rapide

05 Open source, traçable

Source, licence et vérification

D'où proviennent les faits de cette page et quand ils ont été vérifiés pour la dernière fois.

Author: HeyGen
Repository: github.com/heygen-com/hyperframes Branche main
Fichier du skill: skills/figma/SKILL.md Somme de contrôle du contenu enregistrée lors de la vérification ; commit 558c11b
License: Apache-2.0 Depuis LICENSE.
Étoiles du dépôt: 49 761 Instantané GitHub pris le 14/09/2026 pour l'ensemble du dépôt heygen-com/hyperframes, qui contient 9 skills dans ce catalogue. Ce n'est pas une note ni un compteur d'utilisation pour figma.
Vérifié par OpenDesign: 2026-09-14 Le fichier source, le chemin, le texte de licence et le nombre d'étoiles ont été vérifiés. Non intégré dans OpenDesign main (vérifié le 2026-08-28) ; aucune exécution en conditions réelles n'a été enregistrée sur cette page.

Dans le SKILL.md

Figma → HyperFramesRépartition en cinq phases : assets, tokens, composants via REST ; motion et shaders via connecteur ou export manuel
Auth — deux identifiants, aux périmètres distinctsJeton d'accès personnel pour REST avec des scopes en lecture seule ; authentification de connecteur séparée pour le motion et les shaders ; vérification préalable du jeton avant la CLI
RoutageAnalyser les références Figma, router selon l'intention vers les phases asset/tokens/composant/motion/storyboard/shader
Assets (Phase 1 — CLI)Rendre les nœuds via REST, assainir le SVG, figer sous .media/images/, regrouper les nœuds par fichier pour éviter les limites de débit
Tokens (Phase 2 — CLI)Importer les variables comme entrées de marque de composition, dégrader vers les styles publiés hors Enterprise, construire un index de liaison
Composants (Phase 3 — CLI)Arbre de nœuds vers HTML à géométrie exacte, les vecteurs se rasterisent automatiquement, liaison des remplissages aux tokens via var() lors de l'import
Motion (Phase 4 — assistée par connecteur)Récupérer le contexte de motion de manière récursive, normaliser en MotionDocs, générer des scripts GSAP, valider par rapport au seuil de motion-PSNR de 15 dB
Shaders (Phase 5 — majoritairement manuelle)Le rendu par connecteur aplatit les shaders ; demander à l'utilisateur un export natif Figma en PNG ou MP4 à la place
Storyboards (une SECTION de scene frames → animation)Les frames sont des keyframes, pas des diapositives ; comparer les frames adjacentes pour en déduire des chaînes d'éléments, faire correspondre par nom puis par géométrie, les notes de réalisation précisent les transitions
DéterminismeFiger toutes les URLs Figma localement, ne jamais émettre repeat -1, timelines en pause et finies, toutes les E/S au moment de l'import

Description du skill lui-même

« Importer du contenu Figma dans une composition HyperFrames — ressources rendues, tokens de marque, composants, sections de storyboard → mouvement reconstruit (les frames sont lues comme des états, pas des slides) (REST/CLI), mouvement assisté par connecteur si disponible, et shaders depuis un connecteur ou une exportation native. À utiliser quand l'utilisateur colle un lien figma.com ou demande d'apporter un design, une frame, un logo, une marque ou une animation Figma dans une vidéo/composition. »

Description du front-matter issue de SKILL.md. Le fichier complet fait environ 17 829 caractères. Lire le fichier complet sur GitHub.

Figma

Exécutez figma sur une vraie tâche Motion & Video.

Téléchargez OpenDesign, importez figma depuis son lien SKILL.md, collez le prompt ci-dessus et lisez le plan avant le résultat.

Télécharger OpenDesign Parcourir tous les skills

Terminal

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

Ce que fait le skill figma dans Claude Code et Codex

Dans les termes du Skill

Fonctionnement

Quand utiliser le skill figma

Bon choix

Connaître les limites

Quoi fournir

Règles que le skill figma donne à Claude Code et Codex

Vérifier le jeton avant le premier appel CLI

Toujours passer --description pour les assets

Regrouper les nœuds en une seule requête par fichier

Importer les tokens avant les composants

Ne jamais laisser d'URL Figma dans la composition

Ne jamais émettre Repeat: -1

Décrire chaque étape à l'utilisateur