Skills Figma

mcp-server-guide/skills/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...

mcp-server-guide/skills/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...

mcp-server-guide/skills/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…

mcp-server-guide/skills/figma-code-connect-components

Connects Figma design components to code components using Code Connect mapping tools. Use when user says "code connect", "connect this component to code", "map this component", "link component to code", "create code connect mapping", or wants to establish mappings between Figma designs and code implementations. For canvas writes via `use_figma`, use `figma-use`.

mcp-server-guide/skills/figma-create-design-system-rules

Génère des règles de système de design personnalisées pour la base de code de l'utilisateur. À utiliser lorsque l'utilisateur dit "créer des règles de système de design", "générer des règles pour mon projet", "configurer des règles de design", "personnaliser les directives du système de design", ou souhaite établir des conventions spécifiques au projet pour les workflows Figma-vers-code. Nécessite une connexion au serveur Figma MCP.

mcp-server-guide/skills/figma-create-new-file

Crée un nouveau fichier Figma vierge. À utiliser lorsque l'utilisateur souhaite créer un nouveau design Figma ou un fichier FigJam, ou lorsque vous avez besoin d'un nouveau fichier avant d'appeler use_figma. Gère la résolution du plan via whoami si nécessaire. Utilisation — /figma-create-new-file [editorType] [fileName] (ex. /figma-create-new-file figjam My Whiteboard)

mcp-server-guide/skills/figma-design-to-code

Utilisez cette compétence lors de l'implémentation d'un design Figma en code (design → code) — la direction lecture-DE-Figma. Déclencheurs : 'implémenter ce design Figma', 'construire ce…

mcp-server-guide/skills/figma-generate-design

Utilisez cette compétence avec figma-use lorsque la tâche consiste à traduire une page d’application, une vue ou une mise en page multi-section dans Figma. Déclencheurs : « écrire dans Figma », « créer dans Figma à partir du code », « pousser la page vers Figma », « prendre cette application/page et la construire dans Figma », « créer un écran », « construire une page d’atterrissage dans Figma », « mettre à jour l’écran Figma pour correspondre au code ». Il s’agit de la compétence de workflow privilégiée lorsque l’utilisateur souhaite construire ou mettre à jour une page, un écran ou une vue complète dans Figma à partir de code ou d’une description. Découvre les composants, variables et styles du système de conception via search_design_system, les importe et assemble les écrans de manière incrémentielle, section par section, en utilisant les

mcp-server-guide/skills/figma-generate-diagram

MANDATORY prerequisite — load this skill BEFORE every `generate_diagram` tool call. Routes to type-specific guidance (generic flowchart, architecture…

mcp-server-guide/skills/figma-generate-library

Build or update a professional-grade design system in Figma from a codebase. Use when the user wants to create variables/tokens, build component libraries, set up theming (light/dark modes), document foundations, or reconcile gaps between code and Figma. This skill teaches WHAT to build and in WHAT ORDER — it complements the `figma-use` skill which teaches HOW to call the Plugin API. Both skills should be loaded together.

mcp-server-guide/skills/figma-implement-design

Translates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions "implement design", "generate code", "implement component", provides Figma URLs, or asks to build components matching Figma specs. For Figma canvas writes via `use_figma`, use `figma-use`.

mcp-server-guide/skills/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…

mcp-server-guide/skills/figma-swiftui

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…

mcp-server-guide/skills/figma-use

**MANDATORY prerequisite** — you MUST invoke this skill BEFORE every `use_figma` tool call. NEVER call `use_figma` directly without loading this skill first. Skipping it causes common, hard-to-debug failures. Trigger whenever the user wants to perform a write action or a unique read action that requires JavaScript execution in the Figma file context — e.g. create/edit/delete nodes, set up variables or tokens, build components and variants, modify auto-layout or fills, bind variables to properties, or inspect file structure programmatically.

mcp-server-guide/skills/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…

mcp-server-guide/skills/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…

mcp-server-guide/skills/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…

mcp-server-guide/workflow-skills/generate-project-plan

Générer un tableau de plan de projet FigJam à partir d’un PRD et du contexte de la base de code. Flux interactif : recherche → proposition de sections → recherche approfondie par section → par section…

mcp-server-guide/skills/implement-design

Traduit les designs Figma en code prêt pour la production avec une fidélité visuelle pixel-perfect. Nécessite une connexion au serveur MCP Figma et une URL Figma avec clé de fichier et ID de nœud pour extraire le contexte de design, les captures d'écran et les assets. Workflow structuré en sept étapes : analyser l'URL, récupérer le contexte de design, capturer la référence visuelle, télécharger les assets, traduire selon les conventions du projet, atteindre une parité 1:1, et valider par rapport à Figma. Privilégie la réutilisation du système de design plutôt que la duplication ; mappe les tokens Figma au design du projet...

mcp-server-guide/workflow-skills/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…