cursor-talk-to-figma-mcp MCP — Cas d'usage, Installer & Démo en direct

Pourquoi l'utiliser

Fonctionnalités clés

Lire la sélection actuelle, les arbres de nœuds et les métadonnées du document
Mises à jour en masse du texte (scan_text_nodes + set_multiple_text_contents) pour la localisation
Outils d'auto-layout et d'espacement (set_layout_mode, set_padding, set_axis_align)
Créer des cadres, des rectangles et du texte; instancier des composants; définir des substitutions
Exporter n'importe quel nœud en PNG/SVG pour une utilisation ailleurs

Démo en direct

Aperçu en pratique

cursor-talk-to-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": {
    "cursor-talk-to-figma": {
      "command": "npx",
      "args": [
        "-y",
        "cursor-talk-to-figma-mcp"
      ],
      "_inferred": true
    }
  }
}

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

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

{
  "mcpServers": {
    "cursor-talk-to-figma": {
      "command": "npx",
      "args": [
        "-y",
        "cursor-talk-to-figma-mcp"
      ],
      "_inferred": true
    }
  }
}

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": {
    "cursor-talk-to-figma": {
      "command": "npx",
      "args": [
        "-y",
        "cursor-talk-to-figma-mcp"
      ],
      "_inferred": true
    }
  }
}

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

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "cursor-talk-to-figma": {
      "command": "npx",
      "args": [
        "-y",
        "cursor-talk-to-figma-mcp"
      ],
      "_inferred": true
    }
  }
}

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

~/.continue/config.json

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

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

~/.config/zed/settings.json

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

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

claude mcp add cursor-talk-to-figma -- npx -y cursor-talk-to-figma-mcp

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

Cas d'usage

Usages concrets : cursor-talk-to-figma-mcp

Comment mettre à jour chaque couche de texte dans un document Figma à partir d'une seule invite

👤 Concepteurs + PM exécutant des révisions de contenu ou de localisation ⏱ ~20 min intermediate

Quand l'utiliser : Vous avez une spécification qui renomme 50 chaînes et vous ne voulez pas cliquer 50 fois.

Prérequis

Bun installé — curl -fsSL https://bun.sh/install | bash
Figma Desktop ouvert avec le plugin lié — Plugins > Development > Link existing plugin > pointez vers src/cursor_mcp_plugin/manifest.json
Pont WebSocket en cours d'exécution — bun run start dans le référentiel cloné

Déroulement

Rejoindre le canal à partir du panneau du plugin

Rejoindre le canal Figma X7F2 et énumérer tous les nœuds de texte sur la page actuelle.✓ Copié

→ Liste des ID de nœuds avec texte actuel
Mapper l'ancien contenu au nouveau contenu

Voici un CSV de old_string,new_string. Pour chaque nœud de texte dont le contenu correspond à un old_string, remplacez par new_string en utilisant set_multiple_text_contents.✓ Copié

→ Nombre de mises à jour appliquées, aperçu de la différence
Vérifier visuellement

Exporter les trois cadres qui ont eu le plus de modifications en tant que PNG afin que je puisse les examiner.✓ Copié

→ URL PNG / chemins de fichiers

Résultat : Un fichier révisé avec chaque chaîne mise à jour et un export avant/après pour le prouver.

Pièges

Le plugin se déconnecte au cours de l'opération — set_multiple_text_contents est idempotent — réexécutez avec le même mappage; les nœuds déjà corrects sont ignorés
Le texte dans les composants par rapport aux instances confond les mises à jour — Utilisez d'abord get_instance_overrides pour voir quelles instances remplacent le texte de base

Combiner avec : filesystem

Comment annoter une spécification Figma à partir d'une PRD en un seul coup

👤 Concepteurs-ingénieurs associant des documents à des maquettes ⏱ ~25 min intermediate

Quand l'utiliser : Votre PRD indique « le CTA devrait dire X, incluez la copie d'infobulle Y » et vous voulez les transformer en annotations Figma.

Déroulement

Partager la PRD

Voici la PRD [coller]. Extrayez chaque exigence d'annotation UI.✓ Copié

→ Liste structurée de {node_hint, annotation_text}
Mapper les indices aux nœuds réels

Utilisez get_selection et scan_nodes_by_types pour faire correspondre chaque annotation à un ID de nœud concret sur la page actuelle.✓ Copié

→ Paires de node_id + annotation prêtes
Appliquer les annotations

Appliquez-les avec set_multiple_annotations.✓ Copié

→ Annotations visibles dans la superposition du plugin

Résultat : Un fichier Figma auto-documenté que les ingénieurs peuvent lire sans changer d'onglet.

Pièges

Claude correspond au mauvais nœud quand plusieurs partagent un nom — Incluez les noms de cadre parent comme indices de désambiguïsation

Combiner avec : notion · github

Comment générer des variantes de composants (mode sombre, tailles) par programmation

👤 Équipes de systèmes de conception ⏱ ~20 min advanced

Quand l'utiliser : Vous devez cloner un bouton de base en 12 variantes et ajuster les remplissages/contours.

Déroulement

Cloner le nœud de base

Clonez le cadre Button/Primary 4 fois et disposez-les horizontalement avec un écart de 16px.✓ Copié

→ 4 nouveaux nœuds dans le document
Teinter à nouveau les remplissages/contours

Pour chaque clone, set_fill_color aux nuances 500, 600, 700, 800 de #3B82F6.✓ Copié

→ Progression des couleurs visible
Convertir en variantes

Groupez-les en tant qu'ensemble de composants nommé 'Button / Intensity'.✓ Copié

→ Un nouvel ensemble de composants apparaît dans les actifs

Résultat : Un ensemble de variantes prêt à l'emploi dans votre système de conception.

Pièges

Les jetons de couleur diffèrent du hex brut — Si votre système utilise des variables, utilisez set_fill_color avec l'ID de variable et non le hex brut

Comment exporter chaque cadre marqué en tant que PNG pour la transmission au dev

👤 Concepteurs-ingénieurs préparant un document de transmission ⏱ ~10 min beginner

Quand l'utiliser : Avant un lancement de sprint ou un examen du client.

Déroulement

Trouver les cadres avec une balise de transmission

Analysez les nœuds de type FRAME sur la page actuelle dont le nom commence par '[HANDOFF]'.✓ Copié

→ Liste des cadres cibles
Exporter à 2x

Exportez chacun en tant que PNG à 2x et enregistrez dans /handoff/2026-04/.✓ Copié

→ Chemins de fichiers retournés

Résultat : Un dossier de transmission horodaté prêt à déposer dans Notion ou Linear.

Combiner avec : filesystem · notion

Combinaisons

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

cursor-talk-to-figma + notion

Synchroniser les annotations de conception dans une page de spécification Notion pour les ingénieurs

Extrayez chaque annotation sur la page Figma actuelle et reflétez-les dans le document Notion 'Checkout Spec v3' en tant que liste de contrôle.✓ Copié

cursor-talk-to-figma + filesystem

Exporter des cadres dans un dossier de transmission local versionnée par date

Exportez chaque cadre [HANDOFF] vers /design-handoff/2026-04/ en tant que PNG 2x.✓ Copié

cursor-talk-to-figma + github

Associer une modification de conception avec une référence PR de code

Ajoutez une annotation sur le bouton CTA reliant au PR #4421 dans le référentiel frontend.✓ Copié

Outils

Ce que ce MCP expose

Outil	Entrées	Quand appeler	Coût
get_document_info		Orientez-vous dans un nouveau fichier	gratuit
get_selection		Opérer sur ce que l'utilisateur vient de cliquer	gratuit
scan_text_nodes	root_id?: str	Avant les modifications de contenu en masse	gratuit
set_multiple_text_contents	updates: {id, text}[]	Remplacement de texte par lot	gratuit
set_fill_color	id: str, color: {r,g,b,a}	Remodeler un nœud	gratuit
set_layout_mode	id, mode: 'HORIZONTAL'\|'VERTICAL'\|'NONE'	Basculer l'auto-layout	gratuit
create_component_instance	component_key: str, parent_id: str, position?: {x,y}	Déposer un composant de bibliothèque sur le canevas	gratuit
set_multiple_annotations	annotations: {id, text}[]	Annotations de spécification par lot	gratuit
export_node_as_image	id: str, format: 'PNG'\|'SVG'\|'JPG', scale?: number	Transmission, examens, aperçus en ligne	gratuit
join_channel	channel: str	Premier appel après le lancement du plugin	gratuit

Coût et limites

Coût d'exécution

Quota d'API: Figma n'a pas de limite de débit publiée pour les actions du plugin; le plafond pratique est le débit WebSocket
Tokens par appel: Info nœud: 100-1500 jetons selon les enfants
Monétaire: Gratuit (compte Figma requis; plan gratuit fonctionne)
Astuce: Limitez toujours les analyses à un ID de nœud racine spécifique; les analyses à l'échelle de la page sur les gros fichiers gonflent le contexte.

Sécurité

Permissions, secrets, portée

Portées minimales : Plugin Figma s'exécutant dans l'application de bureau/web; aucun jeton API requis

Stockage des identifiants : Aucun — le plugin s'exécute en processus dans Figma; MCP communique via WebSocket localhost

Sortie de données : Les nœuds de document Figma s'écoulent du plugin à votre MCP local, puis à votre LLM choisi. Les conceptions sensibles quittent votre machine uniquement par l'appel LLM.

Ne jamais accorder : N'exposez pas le port WebSocket au-delà de localhost

Les éditions en masse ne sont pas transactionnelles — l'échec partiel laisse un état mixte. Validez les versions Figma avant les gros travaux.

Dépannage

Erreurs courantes et correctifs

Le plugin ne peut pas se connecter à WebSocket

Assurez-vous que bun run start est actif et que l'ID de canal du plugin correspond à celui que l'agent a rejoint.

Vérifier : bun --version && lsof -i :3055

set_multiple_text_contents met à jour uniquement certains nœuds

Les nœuds à l'intérieur des calques ou composants verrouillés sont ignorés. Déverrouillez ou ciblez la substitution d'instance.

Le plugin Figma affiche 'manifest not found'

Reliez via Plugins > Development > Link existing plugin > choisissez manifest.json dans src/cursor_mcp_plugin/.

Les exportations retournent des URL vides

Certains nœuds (groupes de masque, certains effets) ne peuvent pas être rendus côté serveur. Aplatissez d'abord ou exportez en SVG.

Alternatives

cursor-talk-to-figma-mcp vs autres

Alternative	Quand l'utiliser	Compromis
Official Figma Dev Mode MCP	Vous avez des sièges Figma Dev Mode payants et voulez un support officiel	Lecture seule; pas d'édition en masse
Framelink Figma MCP	Vous préférez un serveur basé sur l'API REST en lecture seule	Pas de mutation, pas de plugin WebSocket requis mais ne peut pas éditer

Plus

Ressources

📖 Lire le README officiel sur GitHub

🐙 Voir les issues ouvertes

🔍 Parcourir les 400+ serveurs MCP et Skills