Figma Generate Librarypar OpenAI

Figma Generate Library Skill.

Commencez par le modèle de tokens, puis construisez des composants réutilisables dans un ordre maîtrisé.

Figma
Design systems
Bibliothèques de composants

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

Revue de la source · Figma Generate LibrarySKILL.md

Tâche Figma Produit • Collections de variables Figma, alias sémantiques et styles de texte ou d’effet • Composants réutilisables documentés avec des ensembles de variantes maîtrisés • Un registre d’état et une revue finale des liaisons, des noms et du rendu visuel Avant de commencer Figma MCP avec accès à un fichier modifiable, accès au dépôt et le Skill complémentaire figma-use ainsi que ses références d’aide.

Résumé éditorial · source examinée 2026-10-07 · pas un exemple généré

01 Fonctionnement

Construire une bibliothèque Figma à partir des fondations du code

Construisez les variables et styles Figma avant les composants, avec un registre d’état enregistré et une approbation à chaque phase.

Workflow fondé sur la sourcePas un benchmark d’exécution

L’approche de travail

Figma Generate Library est un workflow de design system en plusieurs phases, et non un générateur d’écran en une seule fois. Il compare le code, le fichier Figma existant et les bibliothèques auxquelles vous êtes abonné, puis verrouille un périmètre défini de tokens et de composants avant toute écriture. Les variables et les styles précèdent les composants, de sorte que les propriétés visuelles puissent être liées à des fondations cohérentes.

La source accorde une attention particulière à l’état sur la durée : des ID créés, des noms déterministes et un registre enregistré permettent de reprendre sans dupliquer de nœuds. Le travail sur les composants inclut la disposition des variantes, les propriétés de texte et booléennes, les échanges d’icônes et la documentation. Des points de contrôle humains font partie du workflow, notamment lorsque le code et Figma divergent ; le Skill ne décide pas silencieusement quel système doit faire autorité.

Livrables attendus

Collections de variables Figma, alias sémantiques et styles de texte ou d’effet
Composants réutilisables documentés avec des ensembles de variantes maîtrisés
Un registre d’état et une revue finale des liaisons, des noms et du rendu visuel

Voir l’exemple de brief

Du brief à la revue

01
Découvrir et verrouiller le périmètre
Inventoriez les ressources du code et de Figma, recherchez dans les bibliothèques et convenez de l’ensemble initial exact de tokens et de composants avant la création.
02
Créer les fondations
Construisez les variables primitives et sémantiques, les modes, les portées et la syntaxe de code, puis la typographie et les effets. Obtenez l’approbation des fondations, puis créez la structure des pages et la documentation des fondations, et obtenez une approbation distincte avant de commencer les composants.
03
Construire les composants progressivement
Créez un composant à la fois, avec ses liaisons de variables, ses propriétés et sa documentation. Validez la structure et l’apparence, montrez sa capture d’écran et obtenez l’approbation avant de commencer le composant suivant.
04
Réconcilier et auditer
Passez en revue les noms, les liaisons non résolues et les correspondances Code Connect facultatives, en utilisant les ID enregistrés plutôt que des suppositions ou un nettoyage étendu.

02 Cas d’usage

Quand l’utiliser

Figma MCP avec accès à un fichier modifiable, accès au dépôt et le Skill complémentaire figma-use ainsi que ses références d’aide.

Bon cas d’usage

Alignement du code et de la bibliothèqueUtile lorsque les tokens et composants implémentés ont besoin d’un équivalent Figma maintenable.
Réparation maîtrisée de bibliothèqueConvient à une analyse d’écarts où certaines ressources peuvent être réutilisées, d’autres encapsulées et quelques-unes reconstruites.

Limites à vérifier

Pas un générateur en un seul appelLa source exige explicitement un travail par étapes avec des points d’approbation. Une grande bibliothèque de composants ne doit pas être présentée comme créée en toute sécurité en une seule opération.
Les conflits exigent une décision de responsabilitéLorsque le code et Figma diffèrent, un responsable produit ou design doit décider quelle valeur ou quel contrat de composant l’emporte.

Apportez ces éléments

Inventaires du code et de FigmaFournissez le dépôt et le fichier cible modifiable, y compris les conventions de tokens existantes.
Périmètre initialNommez les collections de tokens, les modes et les familles de composants nécessaires à la première version utilisable.
Responsabilité de la revueIdentifiez qui peut approuver les fondations, les composants et les conflits entre systèmes existants.

03 Décisions importantes

Décisions importantes

Alias sémantiques
La source sépare les primitives brutes des tokens sémantiques sensibles aux modes, au lieu de dupliquer les valeurs brutes dans tous les composants.
Création reprenable
Un registre de nœuds enregistré et des noms déterministes facilitent la reprise d’un travail de bibliothèque interrompu sans créer de doublons.

04 Exemple de brief

Essayer un brief ciblé

L’exemple de brief ci-dessous n’a pas été testé. Vérifiez la configuration du skill avant de l’utiliser.

Vérifier la configuration

Utilisez le dossier sélectionné complet, y compris les scripts d’aide et les références de phase. Ces contenus Beta sont régis par les conditions pour développeurs de Figma. Considérez les écritures dans Figma et la publication de bibliothèques comme des opérations distinctes nécessitant une autorisation.

Fichier source amont

https://github.com/openai/skills/blob/49f948faa9258a0c61caceaf225e179651397431/skills/.curated/figma-generate-library/SKILL.md

Figma MCP avec accès à un fichier modifiable, accès au dépôt et le Skill complémentaire figma-use ainsi que ses références d’aide.

Commencer par un seul livrable

Adaptez le périmètre, les sources et les contraintes de ce brief avant d’exécuter le skill.

Exemple de brief

Utilise figma-generate-library pour planifier une petite bibliothèque correspondant à notre base de code : tokens de couleur avec modes clair et sombre, espacement, typographie, Button et Input. Commence par une découverte en lecture seule et montre les conflits entre le code et Figma. Attends l’approbation du périmètre avant toute écriture, construis d’abord les fondations et conserve un registre d’état afin que chaque composant puisse être examiné et repris indépendamment.

Examiner le résultat

Comparez le résultat réel à ces critères observables.

Les variables sémantiques sont des alias des primitives et portent les modes et portées prévus.
Les variantes de composants et les échanges d’icônes respectent le contrat convenu, sans combinaisons inutiles.
Les ID enregistrés, les captures d’écran et les vérifications de liaisons étayent chaque phase terminée.

OpenDesign fournit un espace de travail de design local pour les agents de code. Cette fiche ne signifie pas que le skill est fourni avec ses outils externes, ses identifiants et ses dépendances logicielles.

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

05 Source et licence

Source et licence

Cette page décrit la révision source figée liée ci-dessous. Le comportement et les exigences en amont peuvent changer.

Propriétaire de la source: OpenAI
Dépôt: openai/skills
Fichier du skill: skills/.curated/figma-generate-library/SKILL.md
Licence: Conditions Figma
Instantané examiné: 2026-10-07 · 49f948faa925

Résumé éditorial de la source

Construisez les variables et styles Figma avant les composants, avec un registre d’état enregistré et une approbation à chaque phase.

Résumé original par OpenDesign, fondé sur la source liée. Les étoiles du dépôt sont un signal de popularité daté, pas une mesure d’usage du skill ni une note de qualité.

06 Questions avant de commencer

Questions avant de commencer

En quoi est-ce différent de la génération d’un écran ?

Il construit les fondations et composants réutilisables qu’utilisent les écrans, y compris les collections de tokens, les variantes et la documentation.

Les écritures sur le canevas peuvent-elles s’exécuter en parallèle ?

La source exige explicitement des modifications Figma séquentielles afin que l’état et les ID de nœuds renvoyés restent fiables.

Remplace-t-il automatiquement une bibliothèque existante ?

Non. La découverte et l’approbation du périmètre précèdent la création, et la stratégie de réutilisation privilégie les ressources locales existantes avant les imports ou les nouveaux composants.

OpenDesign

Faites de la place à la prochaine itération de design.

Gardez votre brief, vos sources et votre travail de design ensemble dans un espace de travail local. Vérifiez la configuration propre au skill avant de l’ajouter à votre workflow.

Télécharger OpenDesign Parcourir les skills de design