code-connect-components
✓Connecte les composants de conception Figma aux composants de code à l'aide de Code Connect. À utiliser lorsque l'utilisateur dit "code connecter", "connecter ce composant au code", "connecter Figma au code", "mapper ce composant", "lier le composant au code", "créer un mappage de connexion de code", "ajouter une connexion de code", "connecter la conception au code", ou souhaite établir des mappages entre les conceptions Figma et les implémentations de code. Nécessite une connexion au serveur Figma MCP.
Installation
SKILL.md
This skill helps you connect Figma design components to their corresponding code implementations using Figma's Code Connect feature. It analyzes the Figma design structure, searches your codebase for matching components, and establishes mappings that maintain design-code consistency.
When the user provides a Figma URL with file key and node ID, first run getmetadata to fetch the node structure and identify all Figma components.
IMPORTANT: When extracting the node ID from a Figma URL, convert the format:
Connecte les composants de conception Figma aux composants de code à l'aide de Code Connect. À utiliser lorsque l'utilisateur dit "code connecter", "connecter ce composant au code", "connecter Figma au code", "mapper ce composant", "lier le composant au code", "créer un mappage de connexion de code", "ajouter une connexion de code", "connecter la conception au code", ou souhaite établir des mappages entre les conceptions Figma et les implémentations de code. Nécessite une connexion au serveur Figma MCP. Source : figma/mcp-server-guide.
Faits (prêts à citer)
Champs et commandes stables pour les citations IA/recherche.
- Commande d'installation
npx skills add https://github.com/figma/mcp-server-guide --skill code-connect-components- Source
- figma/mcp-server-guide
- Catégorie
- *Créativité
- Vérifié
- ✓
- Première apparition
- 2026-02-01
- Mis à jour
- 2026-02-18
Réponses rapides
Qu'est-ce que code-connect-components ?
Connecte les composants de conception Figma aux composants de code à l'aide de Code Connect. À utiliser lorsque l'utilisateur dit "code connecter", "connecter ce composant au code", "connecter Figma au code", "mapper ce composant", "lier le composant au code", "créer un mappage de connexion de code", "ajouter une connexion de code", "connecter la conception au code", ou souhaite établir des mappages entre les conceptions Figma et les implémentations de code. Nécessite une connexion au serveur Figma MCP. Source : figma/mcp-server-guide.
Comment installer code-connect-components ?
Ouvrez votre terminal ou outil de ligne de commande (Terminal, iTerm, Windows Terminal, etc.) Copiez et exécutez cette commande : npx skills add https://github.com/figma/mcp-server-guide --skill code-connect-components Une fois installé, le skill sera automatiquement configuré dans votre environnement de programmation IA et prêt à être utilisé dans Claude Code ou Cursor
Où se trouve le dépôt source ?
https://github.com/figma/mcp-server-guide
Détails
- Catégorie
- *Créativité
- Source
- skills.sh
- Première apparition
- 2026-02-01