Guide de lecture localisé
figma-code-connect-componentsObjectif, utilisation et source
Permet de connecter les composants de conception Figma aux composants de code à l'aide des outils de mappage Code Connect. À utiliser lorsque l'utilisateur dit « code connect », « connecter ce composant au code », « mapper ce composant », « lier le composant au code », « créer un mappage Code Connect » ou souhaite établir des correspondances entre les conceptions Figma et les implémentations de code. Pour les écritures sur le canevas viause_figma, utiliserfigma-use.
Source récupérée:
- Dépôt source
- openai/skills
- SKILL.md
skills/.curated/figma-code-connect-components/SKILL.md- Étoiles du dépôt
- 28,420
- Mise à jour du dépôt
- 2026-10-29
- Catégories de capacités
- Conception
- Dernière collecte
Licence : Non précisé
Les extraits de flux de travail sont des outils de lecture et non des instructions exécutables de Codez. Aucune compétence tierce n'a été utilisée pour générer cette page.
Les passages relatifs à l'objectif et au flux de travail ci-dessous constituent le contenu original, organisé et traduit pour la lecture. Ils sont distincts de l'analyse éditoriale de Codez, qui est étiquetée séparément.
À quoi sert cette compétence ?
Permet de connecter les composants de conception Figma aux composants de code à l'aide des outils de mappage Code Connect. À utiliser lorsque l'utilisateur dit « code connect », « connecter ce composant au code », « mapper ce composant », « lier le composant au code », « créer un mappage Code Connect » ou souhaite établir des correspondances entre les conceptions Figma et les implémentations de code. Pour les écritures sur le canevas viause_figma, utiliserfigma-use.
Comment fonctionne le flux de travail en amont
Flux de travail requis
Suivez ces étapes dans l'ordre. Ne sautez aucune étape.
passage en amont · L29 ↗Aperçu
Cette compétence vous permet de connecter les composants de conception Figma à leurs implémentations de code correspondantes grâce à la fonctionnalité Code Connect de Figma. Elle analyse la structure de conception Figma, recherche les composants correspondants dans votre code et établit des correspondances garantissant la cohérence entre la conception et le code.
passage en amont · L8 ↗Étape1: Suggestions de connexion au code
Appelget_code_connect_suggestionsPour identifier tous les composants non mappés en une seule opération, cet outil effectue automatiquement les opérations suivantes : récupération des informations des composants à partir du graphe de scène Figma ; identification des composants publiés dans la sélection ; vérification des mappages Code Connect existants et filtrage des composants déjà connectés.
get_code_connect_suggestions(fileKey=":fileKey", nodeId="1:2")Configuration requise
Prérequis
Le serveur Figma MCP doit être connecté et accessible. L'utilisateur doit fournir une URL Figma avec l'ID du nœud :https://figma.com/design/:fileKey/:fileName?node-id=1-2
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
- 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.
- 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.
- 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.
- 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.
Pour en savoir plus, consultez la source.
- Aperçu
- Limites des compétences
- Prérequis
- Flux de travail requis
- Étape1: Suggestions de connexion au code
- Option A : Utiliser
figma-desktopMCP (URL non fournie) - Option B : Lorsqu’une URL Figma est fournie
- Étape2: Analyser le code source à la recherche de composants correspondants
- Étape3Présenter les correspondances à l'utilisateur
- Étape4Créer des mappages Code Connect
- Exemple1: Connexion d'un composant bouton
- Exemple2: Composantes multiples avec sélection partielle
- Exemple3Création des besoins du composant
- Découverte proactive des composants
- Correspondance précise des structures
- Communication claire
- Gérer l'ambiguïté
- Dégradation gracieuse
- Problème : « Aucun composant publié n’a été trouvé dans cette sélection »
- Problème : « Code Connect est uniquement disponible avec les abonnements Organisation et Entreprise »
- Problème : Aucun composant correspondant n’a été trouvé dans le code source.
- Problème : « Composant publié introuvable » (CODE_CONNECT_ASSET_NOT_FOUND)
- Problème : « Le composant est déjà associé à du code » (CODE_CONNECT_MAPPING_ALREADY_EXISTS)
- Problème : « Autorisations insuffisantes pour créer le mappage » (CODE_CONNECT_INSUFFICIENT_PERMISSIONS)
- Problème : le mappage Code Connect échoue en raison d’erreurs d’URL.
- Problème : Plusieurs composants similaires ont été trouvés.
- Comprendre Code Connect
- Ressources supplémentaires
Compétences connexes
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
- Commit source
49f948faa9258a0c61caceaf225e179651397431- Source SHA-256
0f19edad8aed28063a3517c419fbcbef5421d024f189fd02a17fae25093ec69d