Guide du serveur MCP en Dev Mode – Figma Learn - Centre d'aide

🚧 Le serveur MCP en Dev Mode est actuellement en version bêta ouverte. Il se peut que certaines fonctionnalités et certains paramètres ne soient pas encore disponibles. La fonctionnalité peut évoluer et il est possible que vous rencontriez des bugs ou des problèmes de performance pendant la phase bêta.

Avant de commencer

Qui peut utiliser cette fonctionnalité

Le serveur MCP en Dev Mode est en version bêta ouverte.

Disponible avec les Licences Full ou Dev pour les forfaits Professionnel, Organisation ou Entreprise

Vous devez utiliser un éditeur de code ou une application qui prend en charge les serveurs MCP (par ex. VS Code, Cursor, Windsurf, Claude Code).

Vous ne pouvez utiliser le serveur MCP en Dev Mode qu'à partir de l'application de bureau Figma. Télécharger l'application de bureau Figma →

Le serveur MCP en Dev Mode intègre Figma directement dans votre workflow en fournissant des informations de design et un contexte importants aux agents d'IA qui génèrent du code à partir des fichiers Figma Design.

Les serveurs MCP font partie d'une interface normalisée permettant aux agents d'IA d'interagir avec les sources de données à l'aide du protocole de contexte de modèle.

Lorsque le serveur est activé, vous pouvez :

Générer du code à partir des frames sélectionnées

Sélectionnez une frame Figma et transformez-la en code. Idéal pour les équipes produit qui conçoivent de nouveaux flux ou itèrent sur des fonctionnalités d'application.
Extraire le contexte de design

Insérez des variables, des composants et des données de mise en page directement dans votre IDE. Ceci est particulièrement utile pour les design systems et les workflows basés sur des composants.
Coder plus intelligemment avec Code Connect

Améliorez la qualité de votre production en réutilisant vos composants actuels. Code Connect assure la cohérence entre le code généré et votre base de code.

En savoir plus sur Code Connect →

Étape 1 : Activer le serveur MCP

Ouvrez l'application de bureau Figma et assurez-vous d'avoir effectué la mise à jour vers la dernière version.
Créez ou ouvrez un fichier Figma Design.
Dans le coin supérieur gauche, ouvrez le menu Figma.
Sous Preferences, sélectionnez Enable Dev Mode MCP Server.

Vous devriez voir un message de confirmation en bas de l'écran vous indiquant que le serveur est activé et en cours d'exécution.

Le serveur s'exécute localement à l'adresse http://127.0.0.1:3845/sse. Conservez cette adresse à portée de main pour votre fichier de configuration à l'étape suivante.

Étape 2 : Configurer votre client MCP

Une fois que le serveur fonctionne localement sur l'application de bureau Figma, les clients MCP pourront se connecter à votre serveur. Pour ce faire, ajoutez ce qui suit au fichier de configuration de votre serveur MCP :

{
  
    "mcpServers": {
    
      "Figma": {

        "url": "http://127.0.0.1:3845/sse"

    }

  }

}

Suivez les instructions pour votre client spécifique afin d'ajouter le serveur MCP en Dev Mode.

Accédez à Code → Settings → Settings ou utilisez le raccourci ⌘ ,
Dans la barre de recherche, tapez « MCP ».
Sélectionnez Edit in settings.json.

Ajoutez la configuration suivante :

"chat.mcp.discovery.enabled": true,
 "mcp": {
   "servers": {
     "Figma Dev Mode MCP": {
       "type": "sse",
       "url": "http://127.0.0.1:3845/sse"
     }
   }
 },
 "chat.agent.enabled": true

Ouvrez la barre d'outils de discussion ⌥⌘B et passez en mode Agent.
Ouvrez le menu d'outil de sélection et cherchez la section intitulée : MCP Server: Figma Dev Mode MCP. Si aucun outil n'est répertorié, redémarrez l'application de bureau Figma et l'application VS Code.

Remarque : GitHub Copilot doit être activé sur votre compte pour pouvoir utiliser MCP dans VS Code.

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

Ouvrez Cursor → Settings → Cursor Settings.
Allez à l'onglet MCP.
Cliquez sur + Add new global MCP server.

Saisissez la configuration suivante et sauvegardez :

{
  "mcpServers": {
    "Figma": {
      "url": "http://127.0.0.1:3845/sse"
    }
  }
}

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

Ouvrez Windsurf → Settings → Windsurf Settings ou utilisez le raccourci ⌘ ,.
Accédez à Cascade settings et sélectionnez Open plugin store.
Recherchez Figma et installez le plugin.
Ouvrez Cascade. Vous devriez voir le serveur MCP de Figma ainsi que les outils disponibles.

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

Remarque : pour Windsurf, remplacez la propriété url dans le fichier de configuration par serverUrl pour éviter les erreurs.

Ouvrez votre terminal et exécutez :

claude mcp add --transport sse figma-dev-mode-mcp-server http://127.0.0.1:3845/sse

Utilisez les commandes suivantes pour vérifier les paramètres MCP et gérer les serveurs :
- Répertorier tous les serveurs configurés
```
claude mcp list
```
- Obtenir les détails d'un serveur spécifique
```
claude mcp get my-server
```
- Supprimer un serveur
```
claude mcp remove my-server
```

Pour plus d'informations, consultez la documentation officielle d'Anthropic.

Une fois configuré, actualisez ou démarrez le serveur. Vous devriez voir la connexion établie et les outils disponibles. Si la connexion a échoué ou si vous ne voyez aucun outil, vérifiez que le serveur est actif dans l'application de bureau Figma.

Étape 3 : Inviter votre client MCP

Le serveur MCP en Dev Mode offre un ensemble d'outils qui aident les LLM à traduire les designs dans Figma. Une fois connecté, vous pouvez inviter votre client MCP à accéder à un nœud de design spécifique.

Il existe deux manières de fournir un contexte Figma Design à votre client IA :

Par sélection

Sélectionnez un frame ou un calque dans Figma à l'aide de l'application de bureau.
Invitez votre client à vous aider à mettre en œuvre votre sélection actuelle.

Par lien

Copiez le lien vers un frame ou un calque dans Figma.
Invitez votre client à vous aider à mettre en œuvre la conception vers l'URL sélectionnée.

Remarque : votre client ne pourra pas naviguer vers l'URL sélectionnée, mais il extraira l'identifiant de nœud requis pour que le serveur MCP identifie l'objet sur lequel renvoyer des informations.

Lorsque vous utilisez le serveur MCP en Dev Mode, vous pouvez voir une fenêtre contextuelle dans Figma vous invitant à donner votre avis. Pour nous faire part de vos commentaires, veuillez utiliser ce formulaire.