Figma

Guide du serveur MCP Figma

Le serveur MCP Figma intègre Figma directement dans votre flux de travail en fournissant des informations de conception importantes et du contexte aux agents IA qui génèrent du code à partir de fichiers de conception Figma.

[!NOTE] Des limites de débit s'appliquent aux outils du serveur MCP Figma qui lisent des données depuis Figma. Certains outils, comme ceux qui écrivent dans les fichiers Figma, sont exemptés de ces limites.

Les utilisateurs du plan Starter ou disposant de sièges View ou Collab sur les plans payants seront limités à 6 appels d'outils par mois.

Les utilisateurs disposant d'un siège Dev ou Full sur les plans Professional, Organization ou Enterprise bénéficient de limites de débit par minute, qui suivent les mêmes limites que l'API REST Figma de niveau 1. Comme pour l'API REST de Figma, Figma se réserve le droit de modifier les limites de débit.

Pour l'ensemble complet de la documentation du serveur MCP Figma, consultez notre documentation développeur. En utilisant le serveur MCP Figma et les ressources associées (y compris ces compétences), vous acceptez les Conditions d'utilisation développeur Figma. Ces compétences sont actuellement disponibles en version bêta.

Fonctionnalités

• Écrire sur le canevas (serveur distant uniquement) : Créez et modifiez du contenu natif Figma directement depuis votre client MCP. Avec les bonnes compétences, les agents peuvent créer et mettre à jour des cadres, des composants, des variables et des mises en page automatiques dans vos fichiers Figma en utilisant votre système de conception comme source de vérité.

  Remarque : Nous améliorons rapidement la façon dont Figma prend en charge les agents IA. La fonctionnalité d'écriture sur le canevas deviendra éventuellement une fonctionnalité payante basée sur l'utilisation, mais elle est actuellement gratuite pendant la période bêta.

• Générer du code à partir de cadres sélectionnés

  Sélectionnez un cadre Figma et transformez-le en code. Idéal pour les équipes produit qui créent de nouveaux flux ou itèrent sur des fonctionnalités d'application.

• Extraire le contexte de conception

  Importez des variables, des composants et des données de mise en page directement dans votre IDE. C'est particulièrement utile pour les systèmes de conception et les flux de travail basés sur les composants.

• Coder plus intelligemment avec Code Connect

  Améliorez la qualité de la sortie en réutilisant vos composants réels. Code Connect maintient la cohérence entre votre code généré et votre base de code.

  En savoir plus sur Code Connect →

• Générer des conceptions Figma à partir de pages web (déploiement progressif)

  Capturez, importez ou convertissez une page web en conception Figma directement depuis votre agent de codage IA.

Installation et configuration

Se connecter au serveur MCP Figma

Différents clients MCP nécessitent des configurations légèrement différentes. Suivez les instructions ci-dessous pour votre client spécifique afin de vous connecter au serveur MCP Figma.

VS Code

1. Utilisez le raccourci ⌘ Shift P pour rechercher MCP:Add Server.
2. Sélectionnez HTTP.
3. Collez l'URL du serveur https://mcp.figma.com/mcp dans la barre de recherche. Appuyez ensuite sur Enter.
4. Lorsque vous êtes invité à saisir un identifiant de serveur, entrez figma.
5. Choisissez d'ajouter ce serveur globalement ou uniquement pour l'espace de travail actuel. Une fois confirmé, vous verrez une configuration comme celle-ci dans votre fichier mcp.json :

{
  "servers": {
    "figma": {
      "type": "http",
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

6. Ouvrez la barre d'outils de discussion à l'aide de ⌥⌘B ou ⌃⌘I et passez en mode Agent.
7. La discussion étant ouverte, saisissez #get_design_context pour confirmer que les outils du serveur MCP Figma sont disponibles. Si aucun outil n'est répertorié, redémarrez VS Code.

[!NOTE] Vous devez avoir GitHub Copilot activé sur votre compte pour utiliser MCP dans VS Code.

Pour plus d'informations, consultez la documentation officielle de VS Code.

Cursor

La méthode recommandée pour configurer le serveur MCP Figma dans Cursor consiste à installer le plugin Figma, qui inclut les paramètres du serveur MCP ainsi que les compétences d'agent pour les flux de travail courants.

Installez le plugin en saisissant la commande suivante dans la discussion d'agent de Cursor :

/add-plugin figma

Le plugin comprend :

• La configuration du serveur MCP pour le serveur MCP Figma
• Des compétences pour implémenter des conceptions, connecter des composants via Code Connect et créer des règles de système de conception
• Des règles pour une gestion appropriée des ressources depuis le serveur MCP Figma

{
  "mcpServers": {
    "figma": {
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

Claude Code

La méthode recommandée pour configurer le serveur MCP Figma dans Claude Code consiste à installer le plugin Figma, qui inclut les paramètres du serveur MCP ainsi que les compétences d'agent pour les flux de travail courants.

Exécutez la commande suivante pour installer le plugin depuis la place de marché officielle des plugins d'Anthropic.

claude plugin install figma@claude-plugins-official

En savoir plus sur les plugins Claude Code et les compétences d'agent d'Anthropic.

claude mcp add --transport http figma https://mcp.figma.com/mcp

Gemini CLI

Installez l'extension Figma pour Gemini CLI en exécutant la commande suivante :

gemini extensions install https://github.com/figma/mcp-server-guide

Une fois installée, authentifiez-vous auprès de Figma en exécutant gemini puis en exécutant la commande suivante dans le CLI :

/mcp auth figma

Pour désinstaller l'extension :

gemini extensions uninstall figma

Autres éditeurs

D'autres éditeurs de code et outils prenant en charge Streamable HTTP peuvent également se connecter au serveur MCP Figma.

Si vous utilisez un éditeur ou un outil différent, consultez sa documentation pour confirmer qu'il prend en charge la communication basée sur Streamable HTTP. Si c'est le cas, vous pouvez ajouter manuellement le serveur MCP Figma en utilisant cette configuration :

{
  "mcpServers": {
    "figma": {
      "url": "https://mcp.figma.com/mcp"
    }
  }
}

Inviter votre client MCP

Le serveur MCP Figma introduit un ensemble d'outils qui aident les LLM à traduire les conceptions dans Figma. Une fois connecté, vous pouvez inviter votre client MCP à accéder à un nœud de conception spécifique.

Pour fournir le contexte de conception Figma à votre client IA :

1. Copiez le lien vers un cadre ou un calque dans Figma.
2. Invitez votre client à vous aider à implémenter la conception à l'URL sélectionnée.

[!NOTE] Votre client ne pourra pas naviguer vers l'URL sélectionnée, mais il extraira le node-id requis pour que le serveur MCP identifie quel objet doit renvoyer des informations.

Outils et compétences

Figma maintient une liste des outils fournis par le serveur MCP Figma dans la documentation développeur.

Vous pouvez également en savoir plus sur les compétences incluses avec le plugin Figma pour les agents pris en charge dans le centre d'aide Figma. Selon l'agent, vous pouvez également voir les termes connector, extension ou power ; ceux-ci incluent le même ensemble de compétences.

Ce dépôt contient également des compétences de flux de travail autonomes qui ne sont pas incluses avec le plugin Figma :

• workflow-skills/video-interaction-mapper : Transforme les enregistrements d'interface utilisateur en storyboards Figma annotés
• workflow-skills/generate-project-plan : Transforme un PRD (plus un ancrage facultatif dans la base de code) en tableau de plan de projet FigJam

Bonnes pratiques MCP

La qualité du code généré dépend de plusieurs facteurs. Certains sont contrôlés par vous, d'autres par les outils que vous utilisez. Voici quelques suggestions pour une sortie propre et cohérente.

Structurez votre fichier Figma pour un meilleur code

Fournissez le meilleur contexte pour votre intention de conception, afin que le MCP et votre assistant IA puissent générer un code clair, cohérent et aligné sur votre système.

• Utilisez des composants pour tout élément réutilisé (boutons, cartes, champs de saisie, etc.)
• Reliez les composants à votre base de code via Code Connect. C'est la meilleure façon d'obtenir une réutilisation cohérente des composants dans le code. Sans cela, le modèle devine.
• Utilisez des variables pour l'espacement, la couleur, le rayon et la typographie.
• Nommez les calques de manière sémantique (par exemple CardContainer, pas Group 5)
• Utilisez la mise en page automatique pour communiquer l'intention réactive.

[!TIP] Redimensionnez le cadre dans Figma pour vérifier qu'il se comporte comme prévu avant de générer le code.

• Utilisez des annotations et des ressources de développement pour transmettre l'intention de conception difficile à capturer à partir des seuls visuels, comme la façon dont quelque chose doit se comporter, s'aligner ou répondre.

Rédigez des invites efficaces pour guider l'IA

MCP fournit à votre assistant IA des données Figma structurées, mais votre invite pilote le résultat. De bonnes invites peuvent :

• Aligner le résultat avec votre framework ou votre système de style
• Suivre la structure des fichiers et les conventions de nommage
• Ajouter du code à des chemins spécifiques (par exemple src/components/ui)
• Ajouter ou modifier du code dans des fichiers existants au lieu d'en créer de nouveaux
• Suivre des systèmes de mise en page spécifiques (par exemple grille, flexbox, absolu)

Exemples :

• « Générer du code iOS SwiftUI à partir de ce cadre »
• « Utiliser Chakra UI pour cette mise en page »
• « Utiliser les composants src/components/ui »
• « Ajouter ceci à src/components/marketing/PricingCard.tsx »
• « Utiliser notre composant de mise en page Stack »

Considérez les invites comme un brief à un coéquipier. Une intention claire mène à de meilleurs résultats.

Déclenchez des outils spécifiques si nécessaire

MCP prend en charge différents outils, et chacun fournit à votre assistant IA un type différent de contexte structuré. Parfois, l'assistant ne sélectionne pas automatiquement le bon outil, surtout à mesure que davantage d'outils deviennent disponibles. Si les résultats ne sont pas bons, essayez d'être explicite dans votre invite.

• get_design_context fournit une représentation structurée React + Tailwind de votre sélection Figma. C'est un point de départ que votre assistant IA peut traduire dans n'importe quel framework ou style de code, selon votre invite.
• get_variable_defs extrait les variables et les styles utilisés dans votre sélection (couleur, espacement, typographie, etc.). Cela aide le modèle à référencer vos jetons directement dans le code généré.

Par exemple, si vous obtenez du code brut au lieu de jetons, essayez quelque chose comme :

• « Obtenir les noms et valeurs des variables utilisées dans ce cadre. »

Ajoutez des règles personnalisées

Définissez des directives au niveau du projet pour maintenir une sortie cohérente, comme des notes d'intégration pour un nouveau développeur. Il s'agit par exemple de :

• Primitives de mise en page préférées
• Organisation des fichiers
• Modèles de nommage
• Ce qu'il ne faut pas coder en dur

Vous pouvez fournir ces informations dans le format que votre client MCP utilise pour les fichiers d'instructions.

Exemples :

Garantir une sortie constamment bonne

## Figma MCP Integration Rules
These rules define how to translate Figma inputs into code for this project and must be followed for every Figma-driven change.

### Required flow (do not skip)
1. Run get_design_context first to fetch the structured representation for the exact node(s).
2. If the response is too large or truncated, run get_metadata to get the high‑level node map and then re‑fetch only the required node(s) with get_design_context.
3. Run get_screenshot for a visual reference of the node variant being implemented.
4. Only after you have both get_design_context and get_screenshot, download any assets needed and start implementation.
5. Translate the output (usually React + Tailwind) into this project's conventions, styles and framework.  Reuse the project's color tokens, components, and typography wherever possible.
6. Validate against Figma for 1:1 look and behavior before marking complete.

### Implementation rules
- Treat the Figma MCP output (React + Tailwind) as a representation of design and behavior, not as final code style.
- Replace Tailwind utility classes with the project's preferred utilities/design‑system tokens when applicable.
- Reuse existing components (e.g., buttons, inputs, typography, icon wrappers) instead of duplicating functionality.
- Use the project's color system, typography scale, and spacing tokens consistently.
- Respect existing routing, state management, and data‑fetch patterns already adopted in the repo.
- Strive for 1:1 visual parity with the Figma design. When conflicts arise, prefer design‑system tokens and adjust spacing or sizes minimally to match visuals.
- Validate the final UI against the Figma screenshot for both look and behavior.

Cursor

---
description: Figma MCP server rules
globs:
alwaysApply: true
---
- The Figma MCP server provides an assets endpoint which can serve image and SVG assets
- IMPORTANT: If the Figma MCP server returns a localhost source for an image or an SVG, use that image or SVG source directly
- IMPORTANT: DO NOT import/add new icon packages, all the assets should be in the Figma payload
- IMPORTANT: do NOT use or create placeholders if a localhost source is provided

Claude Code

# MCP Servers

## Figma MCP server rules

- The Figma MCP server provides an assets endpoint which can serve image and SVG assets
- IMPORTANT: If the Figma MCP server returns a localhost source for an image or an SVG, use that image or SVG source directly
- IMPORTANT: DO NOT import/add new icon packages, all the assets should be in the Figma payload
- IMPORTANT: do NOT use or create placeholders if a localhost source is provided

Règles générales de qualité

- IMPORTANT: Always use components from `/path_to_your_design_system` when possible
- Prioritize Figma fidelity to match designs exactly
- Avoid hardcoded values, use design tokens from Figma where available
- Follow WCAG requirements for accessibility
- Add component documentation
- Place UI components in `/path_to_your_design_system`; avoid inline styles unless truly necessary

Ajouter ces éléments une fois peut réduire considérablement le besoin d'invites répétitives et garantir que les coéquipiers ou les agents suivent systématiquement les mêmes attentes.

Assurez-vous de consulter la documentation de votre IDE ou de votre client MCP pour savoir comment structurer les règles, et expérimentez pour trouver ce qui fonctionne le mieux pour votre équipe. Des directives claires et cohérentes mènent souvent à un code meilleur et plus réutilisable avec moins d'allers-retours.

Décomposez les grandes sélections

Décomposez les écrans en parties plus petites (comme des composants ou des blocs logiques) pour des résultats plus rapides et plus fiables.

Les grandes sélections peuvent ralentir les outils, provoquer des erreurs ou entraîner des réponses incomplètes, surtout lorsqu'il y a trop de contexte à traiter pour le modèle. Au lieu de cela :

1. Générez du code pour des sections plus petites ou des composants individuels (par exemple Carte, En-tête, Barre latérale)
2. Si cela semble lent ou bloqué, réduisez la taille de votre sélection

Cela aide à garder le contexte gérable et les résultats plus prévisibles, à la fois pour vous et pour le modèle.

Si quelque chose dans la sortie ne semble pas tout à fait correct, il est généralement utile de revenir aux bases : comment le fichier Figma est structuré, comment l'invite est rédigée et quel contexte est envoyé. Suivre les bonnes pratiques ci-dessus peut faire une grande différence et mène souvent à un code plus cohérent et réutilisable.

Apporter le contexte Make à votre agent

L'intégration Make + MCP facilite le passage des prototypes de la conception à la production. En connectant les projets Make directement à votre agent via MCP, vous pouvez extraire des ressources et les réutiliser dans votre base de code. Cela réduit les frictions lors de l'extension des prototypes en applications réelles et garantit que l'intention de conception est fidèlement transmise à l'implémentation.

Avec cette intégration, vous pouvez :

• Récupérer le contexte du projet directement depuis Make (fichiers individuels ou projet entier)
• Demander d'utiliser des composants de code existants au lieu de partir de zéro
• Étendre les prototypes avec des données réelles pour valider et industrialiser les conceptions plus rapidement

Comment cela fonctionne

[!NOTE] Cette intégration exploite la capacité de ressources MCP, qui permet à votre agent de récupérer du contexte directement depuis les projets Make. Elle n'est disponible que sur les clients prenant en charge les ressources MCP.

Étapes pour récupérer des ressources depuis Make

1. Demandez à votre agent de récupérer le contexte en fournissant un lien Make valide
2. Recevez une liste des fichiers disponibles depuis votre projet Make
3. Téléchargez les fichiers que vous souhaitez récupérer lorsque vous y êtes invité

Exemple de flux de travail

Objectif : Implémenter un composant popup dans votre base de code de production qui correspond à la conception et au comportement définis dans Make.

1. Partagez le lien de votre projet Make avec votre agent.
2. Demandez à l'agent : "Je veux obtenir le comportement et les styles du composant popup de ce fichier Make et l'implémenter en utilisant mon composant popup."

Votre agent récupérera le contexte pertinent depuis Make et vous guidera dans l'extension de votre composant popup existant avec les fonctionnalités et les styles du prototype.

Directives relatives aux icônes

Consultez les Directives d'utilisation de la marque Figma pour afficher toutes les icônes contenues dans ce dépôt.