En bref
Crée et tient à jour les fichiers modèles Figma Code Connect (.figma.ts ou .figma.js) qui associent des composants Figma à des extraits de code. On la sollicite au moment où la personne parle de Code Connect, de correspondance composant-code, ou demande de créer ou mettre à jour ces fichiers, typiquement à partir d’une URL Figma. Ces skills Figma du dépôt openai/plugins sont soumises aux Conditions Figma Developer Terms, ce qui n’est pas une licence open source standard.
Ce que ça fait
- Crée un modèle .figma.ts Code Connect
- Mappe un composant Figma vers un extrait de code
Pour qui, et un exemple
Les développeurs et designers qui veulent synchroniser des composants Figma avec le code via Code Connect.
Exemple de demande : « À partir de cette URL Figma, crée le fichier Code Connect .figma.ts qui relie le composant bouton à notre code. »
À ouvrir lorsque la personne mentionne Code Connect, la correspondance composant-code, ou la création de fichiers .figma.ts ou .figma.js. Exemple rédigé par iadujour.fr à partir du SKILL.md, non testé.
Installer
Dans Codex : codex plugin add figma@openai-curated (marketplace officielle du dépôt).
codex plugin add figma@openai-curatedFonctionne avec
- Codex
Source : README : collection de plugins Codex ; la marketplace du dépôt s’appelle « Codex official ». D’autres agents ne sont pas nommés.
Niveau : Débutant
S’utilise en langage naturel ; aucun prérequis de code n’est exigé par la description, au-delà du produit visé.
À savoir
Extrait du SKILL.md
La description d’origine, celle que l’agent lit pour décider de charger la skill (en anglais) :
Creates and maintains Figma Code Connect template files that map Figma components to code snippets. Use when the user mentions Code Connect, Figma component mapping, design-to-code translation, or asks to create/update .figma.ts or .figma.js files.
Citée depuis le SKILL.md au commit 33bd952 . Le dossier contient aussi 2 fichiers annexes (references/).
Le SKILL.md compte 522 lignes et 26 sections principales :
- Overview
- Prerequisites
- Step 1: Parse the Figma URL
- Step 2: Discover Unmapped Components
- Step 3: Fetch Component Properties
- Step 4: Identify the Code Component
- Step 5: Create the Template File (.figma.ts)
- File location
- Template structure
- Property mapping
- Exhaustive variant handling
- Interpolation in tagged templates
- Finding descendant layers
- Nested configurable instances
- Nested component example
- Conditional props
- Step 6: Validate
- Inline Quick Reference
- `instance.*` Methods
- InstanceHandle Methods
- TextHandle Properties
- SelectorOptions
- Export Structure
- Rules and Pitfalls
- Complete Worked Example
- Additional Reference
Licence : Conditions Figma Developer Terms
Vérifiée le 10 novembre 2026 sur : fichier de licence d’un dossier parent (plugins/figma/LICENSE.txt) .
Conditions Figma Developer Terms, pas une licence open source standard : extrait court cité uniquement. Pour le texte complet, consultez la source.
Commentaires.
Un retour d’expérience, une question, une précision sur cette skill ? Les commentaires sont relus avant publication.
Commentaires publiés
Chargement des commentaires…
Laisser un commentaire
Charte de modération. Chaque commentaire est relu avant publication. Sont refusés : l’incitation à la haine, les propos injurieux ou discriminatoires, la publicité, le spam et les liens promotionnels, le hors-sujet et les données personnelles d’autrui.