code-connect-components

Établir des liens bidirectionnels entre les composants de conception Figma et les implémentations de code à l’aide de Code Connect. Nécessite une connexion au serveur MCP Figma et des composants publiés sur les plans Organisation ou Entreprise. Identifie automatiquement les composants non mappés dans les sélections Figma, puis analyse votre base de code pour trouver des composants de code correspondants par nom, structure et props. Présente les composants correspondants pour examen avant de créer les mappages, permettant une acceptation ou un rejet sélectif. Prend en charge plusieurs...

npx skills add https://github.com/figma/mcp-server-guide --skill code-connect-components

Télécharger ZIP GitHub

Plus de skills de figma

video-interaction-mapper

Cette compétence doit être utilisée lorsque l'utilisateur demande d'analyser un enregistrement d'écran d'interface utilisateur et de mapper les états d'interaction dans Figma. Déclencheur pour des demandes telles que "mettre la vidéo…

figma-code-connect

Crée et maintient les fichiers de modèle Figma Code Connect qui associent les composants Figma à des extraits de code. À utiliser lorsque l'utilisateur mentionne Code Connect, composant Figma…

create-design-system-rules

Règles personnalisées de système de design pour une implémentation cohérente de Figma vers le code dans votre projet. Génère des conventions spécifiques au projet pour l'organisation des composants, le style, les jetons de design et la gestion des ressources, qui guident les agents IA pour produire un code cohérent. Prend en charge trois formats de fichiers de règles : CLAUDE.md pour Claude Code, AGENTS.md pour Codex CLI, et .cursor/rules/figma-design-system.mdc pour Cursor. Nécessite une connexion au serveur MCP Figma et une analyse du codebase pour découvrir les modèles existants avant les règles...

figma-implement-motion

Traduit les mouvements et animations Figma en code d'application prêt pour la production. À utiliser lors de l'implémentation d'animations/mouvements à partir d'un design Figma — l'utilisateur mentionne…

Traduction SwiftUI ↔ Figma. À utiliser chaque fois que l'utilisateur mentionne Swift, SwiftUI, iOS, iPhone ou iPad — dans les DEUX sens — pour traduire un design Figma en…

figma-use-motion

Motion / animation context for the `use_figma` MCP tool — animating Figma nodes via manual keyframes, animation styles, easing, and timeline duration. Load…

figma-use-slides

Cette compétence aide les agents à utiliser l'outil MCP use_figma de Figma dans le contexte des diapositives. Peut être utilisée conjointement avec figma-use qui fournit un contexte fondamental pour utiliser le…

figma-use-figjam

Cette compétence aide les agents à utiliser l'outil MCP use_figma de Figma dans le contexte FigJam. Peut être utilisée conjointement avec figma-use qui fournit le contexte fondamental pour utiliser le…