Figma Context MCP — Cas d'usage, Installer & Démo en direct

Pourquoi l'utiliser

Fonctionnalités clés

Retourne les données Figma dans un format YAML/JSON efficace en tokens, pas le monstre API brut
Résout les instances de composants et leurs surcharges
Expose les tokens de design (couleurs, styles de texte, espacements) par nom
Export d'images des nœuds sélectionnés pour référence visuelle
Lecture seule — ne réécrit jamais dans votre fichier Figma

Démo en direct

Aperçu en pratique

figma.replay ▶ prêt

0/0

Installer

Choisissez votre client

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp"
      ]
    }
  }
}

Ouvrez Claude Desktop → Settings → Developer → Edit Config. Redémarrez après avoir enregistré.

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp"
      ]
    }
  }
}

Cursor utilise le même schéma mcpServers que Claude Desktop. La config projet l'emporte sur la globale.

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp"
      ]
    }
  }
}

Cliquez sur l'icône MCP Servers dans la barre latérale Cline, puis "Edit Configuration".

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp"
      ]
    }
  }
}

Même format que Claude Desktop. Redémarrez Windsurf pour appliquer.

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "figma",
      "command": "npx",
      "args": [
        "-y",
        "figma-developer-mcp"
      ]
    }
  ]
}

Continue utilise un tableau d'objets serveur plutôt qu'une map.

~/.config/zed/settings.json

{
  "context_servers": {
    "figma": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "figma-developer-mcp"
        ]
      }
    }
  }
}

Ajoutez dans context_servers. Zed recharge à chaud à la sauvegarde.

claude mcp add figma -- npx -y figma-developer-mcp

Une seule ligne. Vérifiez avec claude mcp list. Supprimez avec claude mcp remove.

Cas d'usage

Usages concrets : Figma Context

Générez du code React/SwiftUI/Tailwind à partir d'une frame Figma

👤 Développeurs frontend implémentant un écran conçu ⏱ ~30 min intermediate

Quand l'utiliser : Vous avez une frame Figma pour un écran/composant et voulez que les 80 % de code initiaux soient générés fidèlement.

Prérequis

Token d'accès personnel Figma — figma.com → Settings → Personal access tokens; portée file_read
URL du fichier Figma — Copiez l'URL du fichier Figma ; le MCP peut extraire la clé de fichier et l'ID de nœud

Déroulement

Récupérez les données de la frame

Obtenez le nœud Figma à <collage URL figma avec node-id>. Retournez sa mise en page, contenu de texte, couleurs et structure enfant.✓ Copié

→ Données de nœud hiérarchiques avec des valeurs réelles — pas « impossible de récupérer »
Générez du code basé sur les données

Générez un composant React + Tailwind qui correspond exactement à ceci. Utilisez les vraies couleurs hexadécimales et valeurs en pixels des données Figma, pas des approximations.✓ Copié

→ Code qui référence les vraies valeurs, par ex. bg-[#1A2B3C] et non bg-blue-500
Vérifiez par recoupement avec un export

Exportez la même frame en PNG. Comparez avec le rendu attendu de votre composant généré et signalez les différences.✓ Copié

→ Différences spécifiques (icône manquante, mauvais remplissage) plutôt que « ressemble »

Résultat : Un premier brouillon fidèle au pixel que vous pouvez affiner au lieu de reconstruire.

Pièges

La mise en page automatique vs le positionnement absolu se mappe différemment à flex/grid — Dites à Claude de préférer flexbox quand la frame Figma utilise la mise en page automatique ; absolu sinon
Les icônes vectorielles reviennent sous forme de chemins SVG que Claude insère textuellement — Faites-les extraire les icônes séparément vers /icons/*.svg et les référencer comme composants

Combiner avec : filesystem · github

Synchronisez les tokens de design Figma dans votre base de code

👤 Mainteneurs de système de design ⏱ ~20 min intermediate

Quand l'utiliser : Les designers ont mis à jour la palette/typographie dans Figma et vous devez mettre à jour le JSON des tokens pour correspondre.

Déroulement

Récupérez les styles publiés

À partir du fichier Figma <key>, listez tous les styles de couleur publiés, styles de texte et styles d'effet. Groupez par catégorie.✓ Copié

→ Liste complète des tokens avec noms et valeurs
Différence par rapport à la base de code

Lisez /design-tokens/tokens.json. Montrez-moi quels tokens ont changé dans Figma depuis la dernière synchronisation de ce fichier (ajoutés, supprimés, valeur modifiée).✓ Copié

→ Différence par token avec ancien/nouveau
Appliquez et ouvrez une PR

Mettez à jour tokens.json pour correspondre à Figma. Ouvrez une PR intitulée « sync: design tokens YYYY-MM-DD » avec la différence dans la description.✓ Copié

→ PR ouverte avec différence vérifiable

Résultat : Les tokens côté code restent synchronisés avec Figma ; plus de tickets « pourquoi la couleur de marque est légèrement décalée ».

Pièges

Les tokens renommés ressemblent à une suppression+ajout — Faites-le détecter le renommage heuristiquement (même valeur, nom similaire) et le signaler pour examen humain

Combiner avec : filesystem · github

Extrayez les spécifications de développement (espacements, dimensionnement, contenu) d'un fichier Figma

👤 Ingénieurs triant une remise Figma sans Dev Mode ⏱ ~15 min beginner

Quand l'utiliser : Vous n'avez pas Figma Dev Mode mais vous avez besoin de spécifications en pixels pour un écran.

Déroulement

Obtenez l'écran

Pour le nœud Figma <id>, donnez-moi une liste plate de tous les éléments feuille avec leur position absolue, taille et contenu textuel.✓ Copié

→ Vidage tabulaire des éléments avec x/y/l/h
Demandez un document de spécification

Transformez-le en spécification orientée développeur : section par section, avec des valeurs d'espacement (marge/remplissage) déduites des positions.✓ Copié

→ Document de spécification avec des valeurs équivalentes CSS concrètes
Vérifiez les cas limites

Que se passe-t-il quand un texte dépasse la largeur conçue ? Le design spécifie-t-il le comportement de retour à la ligne, la troncature ou la croissance ? Si non spécifié, signalez au designer.✓ Copié

→ Liste de questions ouvertes, pas des hypothèses silencieuses

Résultat : Une spécification constructible sans acheter une licence Dev Mode pour tout le monde.

Pièges

Le designer a utilisé des espacements arbitraires (13px, 17px) au lieu de valeurs de tokens — Demandez à Claude d'arrondir à la valeur de token la plus proche mais d'enregistrer l'écart, pour que les designers puissent nettoyer

Combiner avec : filesystem

Combinaisons

Associez-le à d'autres MCPs pour un effet X10

figma + filesystem

Générez du code à partir de Figma et écrivez-le directement dans votre fichier de composant

Récupérez le nœud Figma <id>. Générez un composant React le correspondant exactement, écrivez-le dans src/components/Card.tsx en utilisant le MCP filesystem.✓ Copié

figma + github

Ouvrez une PR avec le nouveau composant plus un lien Figma dans la description pour les relecteurs

Générez le composant Card à partir de Figma <url>, committez, poussez et ouvrez une PR avec à la fois la modification de code et le lien Figma source.✓ Copié

figma + chrome-devtools

Construisez, rendez dans le navigateur, prenez une capture d'écran et comparez visuellement à l'export Figma

Construisez le nouveau composant. Rendez-le à localhost:3000/preview/card. Prenez une capture d'écran. Comparez visuellement avec l'export PNG Figma et listez les différences visuelles.✓ Copié

Outils

Ce que ce MCP expose

Outil	Entrées	Quand appeler	Coût
get_figma_data	fileKey: str, nodeId?: str, depth?: int	Récupérez une frame ou un fichier complet sous une forme conviviale pour l'agent	1 appel API Figma (tier gratuit : 1500/min)
download_figma_images	fileKey: str, nodes: [{nodeId, fileName}], localPath: str, format?: 'png'\|'svg', scale?: number	Exportez les ressources de design (icônes, illustrations, captures d'écran) localement	1 appel de rendu Figma par nœud

Coût et limites

Coût d'exécution

Quota d'API: Plan gratuit Figma : 1 500 requêtes/min. Largement suffisant pour une utilisation interactive.
Tokens par appel: Le mode compact maintient les charges utiles à ~1-5k tokens par frame. Les fichiers complets peuvent gonfler — restreignez par nodeId.
Monétaire: MCP est gratuit. L'accès à l'API Figma est gratuit avec n'importe quel compte Figma.
Astuce: Passez toujours un nodeId quand vous le pouvez — récupérer un fichier complet est gaspilleur.

Sécurité

Permissions, secrets, portée

Portées minimales : file_read

Stockage des identifiants : Token d'accès personnel dans la variable d'environnement FIGMA_API_KEY. Ne committez jamais.

Sortie de données : Tous les appels à api.figma.com

Ne jamais accorder : file_write — le MCP n'en a pas besoin ; utiliser un token capable d'écrire risque des modifications accidentelles

Les tokens d'accès personnel sont puissants — utilisez un token limité à la lecture seule et faites-le pivoter périodiquement.
Le contenu du fichier Figma (vos designs) est envoyé à votre fournisseur LLM comme contexte. Si le fichier est sensible, préférez les récupérations limitées aux nœuds à celles du fichier complet.

Dépannage

Erreurs courantes et correctifs

403 Forbidden

Le token n'a pas accès à ce fichier. Vérifiez si le fichier se trouve dans une équipe/espace de travail que votre token peut voir. Pour les fichiers communautaires partagés, utilisez un token différent.

Vérifier : curl -H 'X-Figma-Token: $FIGMA_API_KEY' https://api.figma.com/v1/me

Could not extract file key from URL

Utilisez le format https://www.figma.com/file/<KEY>/... ou https://www.figma.com/design/<KEY>/.... Passez fileKey explicitement si l'analyse d'URL échoue.

Response is enormous and blows context

Passez nodeId pour limiter à une frame, ou depth: 2 pour limiter la traversée.

Image export fails with 'unsupported node type'

Certains types de nœud (sections, tranches) ne peuvent pas être exportés. Sélectionnez plutôt une frame ou un composant réel.

Alternatives

Figma Context vs autres

Alternative	Quand l'utiliser	Compromis
Figma official Dev Mode MCP (beta)	Vous avez Figma Dev Mode et voulez l'intégration officielle	Plus récent, nécessite un abonnement Dev Mode ; support des fonctionnalités Figma plus profond au fil du temps
Figma REST API directly via shell	Vous voulez la surface API complète (variables, branches, commentaires)	Les réponses API brutes sont énormes et difficiles à digérer pour un LLM

Plus

Ressources

📖 Lire le README officiel sur GitHub

🐙 Voir les issues ouvertes

🔍 Parcourir les 400+ serveurs MCP et Skills