figma-generate-designObjectif, utilisation et source

À quoi sert cette compétence ?

Utilisez cette compétence avec figma-use lorsque la tâche consiste à traduire une page d'application, une vue ou une mise en page à plusieurs sections dans Figma. Déclencheurs : « écrire dans Figma », « créer dans Figma à partir du code », « envoyer la page vers Figma », « prendre ceci ».app/pageet le créer dans Figma : « créer un écran », « créer une page d’accueil dans Figma », « mettre à jour l’écran Figma pour qu’il corresponde au code ». Il s’agit du flux de travail privilégié lorsque l’utilisateur souhaite créer ou mettre à jour une page, un écran ou une vue complète dans Figma à partir de code ou d’une description. Il détecte les composants, variables et styles du système de conception via la commande search_design_system, les importe et assemble les écrans progressivement, section par section, en utilisant les jetons du système de conception plutôt que des valeurs codées en dur.

Comment fonctionne le flux de travail en amont

const frame = figma.currentPage.findOne(n => n.name === "Existing Screen");
const uniqueSets = new Map();
frame.findAll(n => n.type === "INSTANCE").forEach(inst => {
  const mc = inst.mainComponent;
  const cs = mc?.parent?.type === "COMPONENT_SET" ? mc.parent : null;
  const key = cs ? cs.key : mc?.key;
  const name = cs ? cs.name : mc?.name;
  if (key && !uniqueSets.has(key)) {
    uniqueSets.set(key, { name, key, isSet: !!cs, sampleVariant: mc.name });
  }
});
return [...uniqueSets.values()];

Configuration requise

Limites et contrôles de qualité

Aucun passage de limite distinct n'a été sélectionné dans ce fichier. Cela ne signifie pas que la compétence est sûre pour toutes les entrées ou tous les environnements. Consultez le code source complet et validez vos résultats.

Commencez par un essai sans danger

1. Vérifiez l'hôte pris en charge et les instructions d'installation du dépôt. Conservez le répertoire Skill ainsi que ses scripts, ressources et documentation référencés ;SKILL.mdSeul, il peut omettre les dépendances.
2. Indiquez à l'agent vos paramètres d'entrée réels, le résultat souhaité et les critères d'acceptation. La syntaxe d'appel et les outils disponibles dépendent du système hôte ; ce site ne propose pas de commande d'installation universelle.
3. Testez le flux de travail source dans un projet temporaire ou sur une copie. Avant d'autoriser les opérations qui modifient des fichiers, des services distants ou des ressources facturables, examinez-les attentivement.
4. Vérifiez la conformité du résultat avec les contrôles qualité sources et vos propres exigences. Un déclenchement réussi ou un nombre élevé d'étoiles dans le dépôt ne garantissent pas un résultat correct.

Spécifications du format et du répertoire des compétences ↗

Pour en savoir plus, consultez la source.

• Créer/mettre à jour des écrans à partir du système de conception
• Limites des compétences
• Prérequis
• Flux de travail parallèle avec generate_figma_design (Applications Web uniquement)
• Flux de travail requis
• Étape1Comprendre l'écran
• Étape2Découvrez le système de conception : composants, variables et styles
• 2a: Découvrir les composants
• 2b : Découvrir les variables (couleurs, espacement, rayons)
• 2c: Découvrir les styles (styles de texte, styles d'effets)
• Étape3Commencez par créer le cadre d'encapsulation de la page.
• Étape4: Construisez chaque section à l'intérieur du conteneur
• Remplacez le texte de l'instance avec setProperties()
• Lisez attentivement les paramètres par défaut du code source.
• Que faut-il créer manuellement ou importer depuis le système de conception ?
• Étape5Valider le plein écran
• Étape6Mise à jour d'un écran existant
• Documents de référence
• Récupération d'erreurs
• Meilleures pratiques

Compétences connexes

• chatgpt-appsopenai/skills
• figmaopenai/skills
• figma-code-connect-componentsopenai/skills
• figma-create-design-system-rulesopenai/skills

Traduction et étendue

Ce guide de lecture sélectionne des passages de l'amont épingléSKILL.mdCette traduction est assistée. Elle ne constitue pas un manuel complet et ne garantit pas une compatibilité testée. Veuillez lire le document original et les fichiers auxquels il fait référence avant utilisation.

Cette introduction fait référence à la version épinglée ci-dessous ; l’activité actuelle du dépôt et la durée de la collecte sont indiquées séparément.

Source épinglée

Lire l'original ↗

Source récupérée

2026-10-29T09:32:23Z

Commit source

49f948faa9258a0c61caceaf225e179651397431

Source SHA-256

45d2b97103bdeb31cb2744fca2c79bcefb659c88faca626bea30ec2f9342dcc9