Le Model Context Protocol (MCP) d’Anthropic permet aux assistants IA d’interagir avec des outils externes de manière standardisée. Le serveur MCP pour Figma étend cette capacité au design, en donnant aux LLMs comme Claude un accès direct à vos fichiers, frames, composants et styles Figma.
À quoi ça sert ?
Le serveur MCP Figma transforme votre assistant IA en collaborateur design capable de :
- Inspecter vos designs : lire les propriétés des frames, composants, textes, couleurs et typographies
- Récupérer des informations : extraire les tokens de design, analyser la structure de vos fichiers
- Générer de la documentation : produire des specs détaillées à partir de vos maquettes
- Auditer la cohérence : vérifier l’application de votre design system dans les fichiers
Concrètement, vous pouvez demander à Claude “Quelles couleurs sont utilisées dans le fichier Homepage ?” ou “Liste tous les composants boutons et leurs variants” et obtenir une réponse précise sans quitter votre conversation.
Prérequis
Avant l’installation, assurez-vous d’avoir :
- Un compte Figma actif
- Un des clients MCP suivants installé : Claude Code CLI, VS Code, Cursor, ou Codex
Aucune installation locale de serveur n’est nécessaire : Figma héberge le serveur MCP sur mcp.figma.com.
Installation pas à pas
L’installation varie selon votre client MCP. Voici les étapes pour les trois clients principaux.
Claude Code CLI
Méthode recommandée (via plugin officiel) :
claude plugin install figma@claude-plugins-officialMéthode manuelle :
- Lancez la commande :
claude mcp add --scope user --transport http figma https://mcp.figma.com/mcp - Démarrez une nouvelle session Claude Code
- Tapez
/mcppour gérer les serveurs et sélectionnez figma - Choisissez Authenticate
- Cliquez Allow Access dans la fenêtre de navigateur qui s’ouvre
- Vérifiez la connexion avec
/mcp
VS Code
- Appuyez sur ⌘ Shift P (Mac) ou Ctrl Shift P (Windows/Linux)
- Sélectionnez “MCP: Open User Configuration”
- Collez cette configuration dans
mcp.json:
{
"servers": {
"figma": {
"url": "https://mcp.figma.com/mcp",
"type": "http"
}
}
}- Cliquez sur Start au-dessus du nom du serveur
- Accordez la permission Allow Access dans la fenêtre d’authentification
Cursor
Méthode recommandée (via plugin) :
Tapez dans le chat agent :
/add-plugin figmaMéthode manuelle :
- Cliquez sur le deep link Figma MCP pour ouvrir la configuration
- Sélectionnez Install
- Cliquez Connect à côté de Figma
- Cliquez Open pour lancer l’authentification
- Accordez la permission Allow access
Vérifier que ça fonctionne
Selon votre client, tapez une requête test comme :
“Liste les fichiers Figma de mon équipe”
ou
“Extrais les couleurs de ce fichier : [URL Figma]”
Si le serveur répond avec des informations de vos fichiers Figma, l’installation est réussie.
Cas d’usage concrets
Extraction de design tokens (lecture)
"Récupère toutes les couleurs utilisées dans ce fichier Figma :
https://www.figma.com/file/abc123/Design-System"Claude parcourt le fichier et génère une liste structurée des couleurs avec leurs codes hex.
Documentation de composants (lecture)
"Documente le composant Button avec tous ses variants,
propriétés et états"Utile pour synchroniser la doc technique avec l’état réel du design system.
Génération de code depuis une frame (lecture)
"Génère le code React pour cette frame :
https://www.figma.com/file/abc123/Homepage?node-id=42:156"Le serveur analyse la structure et les styles de la frame et produit du code correspondant.
Création de maquettes (écriture beta)
"Crée une card de profil utilisateur avec photo, nom,
titre et bouton CTA dans mon fichier Prototypes"Claude peut générer directement des frames et composants dans vos fichiers Figma (fonctionnalité gratuite en beta).
Capacités et limites
Le serveur MCP Figma distant offre à la fois des fonctions de lecture (inspection, extraction de tokens, documentation) et d’écriture sur le canvas (création de frames, modification de designs).
Les fonctionnalités d’écriture sont actuellement gratuites en beta, mais deviendront payantes à terme.
Les permissions respectent celles de votre compte Figma : vous ne pourrez interagir qu’avec les fichiers auxquels vous avez accès.
Pour aller plus loin
- Documentation officielle Figma MCP Server
- Guide d’installation serveur distant
- Documentation MCP (Model Context Protocol)
- Catalogue des plugins MCP Claude
Le serveur MCP Figma transforme votre assistant IA en véritable collaborateur design. Une fois configuré, il devient un gain de temps massif pour l’extraction de tokens, la génération de code, et même la création de maquettes (en beta).
