Connecter Claude à Figma grâce au MCP

1 avril 2026
|By Stéphane Munnier

En tant que designers, nous passons notre temps à jongler entre nos outils de création et les agents IA pour générer du contenu, itérer sur des composants ou documenter nos systèmes. Le MCP change la donne en permettant à Claude de « voir » et d’interagir directement avec vos fichiers Figma.

1. Qu’est-ce que le MCP (Model Context Protocol) ?

Le MCP est un standard ouvert introduit par Anthropic. Considérez-le comme une « prise universelle » :

  • Avant : Chaque développeur devait créer une intégration spécifique pour que Claude puisse parler à un outil.

  • Avec MCP : On installe un « serveur » (une petite application passerelle) qui expose les données de Figma à Claude de manière sécurisée et structurée.

L’avantage majeur : Claude n’est plus limité à ce que vous lui donnez par écrit ; il peut interroger directement l’arborescence de votre fichier, lire les propriétés des calques et même comprendre vos variables de design.

2. Les prérequis

Avant de commencer, assurez-vous d’avoir :

  1. Claude Desktop installé (la version Web ne supporte pas encore le MCP local).

  2. Un compte Figma avec un accès aux fichiers.

  3. Node.js installé sur votre ordinateur (nécessaire pour faire tourner le serveur de connexion).

3. Le Pas à Pas : Configuration

Étape A : Récupérer votre clé d’accès Figma

  1. Allez dans vos Settings sur Figma.

  2. Cherchez la section Personal Access Tokens.

  3. Générez un nouveau jeton (nommez-le « Claude MCP ») et copiez-le précieusement.

Étape B : Configurer Claude Desktop

Claude a besoin d’un fichier de configuration pour savoir où chercher Figma.

  1. Ouvrez Claude Desktop.

  2. Allez dans les réglages (icône engrenage) ou ouvrez manuellement le fichier de configuration :

    • Mac : ~/Library/Application Support/Claude/claude_desktop_config.json

    • Windows : %APPDATA%\Claude\claude_desktop_config.json

  3. Ajoutez le bloc suivant dans la section mcpServers :

JSON

{
  "mcpServers": {
    "figma": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-figma"
      ],
      "env": {
        "FIGMA_PERSONAL_ACCESS_TOKEN": "VOTRE_TOKEN_ICI"
      }
    }
  }
}

Étape C : Relancer Claude

Redémarrez complètement l’application Claude Desktop. Si tout fonctionne, une petite icône de prise électrique (plug) apparaîtra en bas à droite de la zone de saisie.

4. Comment l’utiliser concrètement ?

Une fois connecté, vous n’avez plus besoin d’importer des captures d’écran. Copiez simplement l’URL de votre fichier Figma et demandez à Claude :

  • « Peux-tu me lister toutes les couleurs utilisées dans ce fichier [Lien Figma] ? »

  • « Analyse la hiérarchie de ce composant et suggère-moi des améliorations d’accessibilité. »

  • « Génère du contenu textuel réel pour remplacer les ‘Lorem Ipsum’ dans la frame ‘Hero Section’. »

Conclusion : Un workflow « IA-Native »

Connecter Claude à Figma via MCP transforme l’IA : elle ne se contente plus de deviner, elle collabore sur la base de votre travail réel.

Les bénéfices clés :

  • Précision : Plus d’erreurs d’interprétation sur vos structures de calques.

  • Rapidité : Plus d’exports/imports manuels.

  • Cohérence : L’IA respecte votre Design System car elle peut le lire directement.

C’est la première étape vers un futur où nos outils de design ne seront plus de simples canevas statiques, mais des environnements vivants assistés par l’intelligence artificielle.

Des questions sur l’installation ou des idées d’usage ? N’hésitez pas à les poser en commentaire !