Figma MCP est une fonctionnalité avancée, accessible via le Dev Mode de Figma (payant), qui permet aux agents d’IA (MCP clients) comme Cursor, Claude Code, ou VS Code avec extension de lire le contexte visuel et structurel de votre design Figma en temps réel.
Grâce à cela, vous pouvez :
- Écrire un prompt dans votre éditeur de code (ex: “Crée-moi ce bouton en React, avec les mêmes couleurs et espacements que dans Figma”),
- L’agent IA lit les variables, les styles, les frames sélectionnées depuis Figma,
- Et génère du code précis, aligné avec votre design sans avoir à copier/coller manuellement les valeurs.
Comment ça marche ?
1. Activer MCP dans Figma
- Ouvrez le Dev Mode (
Shift + D). - Dans le panneau d’inspection, allez dans la section MCP.
- Cliquez sur “Enable desktop MCP server” → cela lance un serveur local qui expose les données de votre design.
Nécessite un plan Pro ou Enterprise (ou un compte Free avec accès bêta).
2. Connecter votre éditeur (VS Code, Cursor, etc.)
- Dans votre éditeur, allez dans les paramètres → Tools & MCP.
- Ajoutez un nouveau serveur MCP en collant l’URL fournie par Figma (ex:
https://mcp.figma.com/mcp). - Suivez les instructions spécifiques à votre éditeur.
Exemple avec Cursor :
Ouvrez Settings → Tools & Integrations → MCP Servers → Add Custom → Collez le snippet JSON fourni par Figma.
3. Sélectionner un frame et écrire un prompt
- Dans Figma, sélectionnez le frame ou le composant que vous voulez convertir en code.
- Dans votre éditeur (ex: Cursor), ouvrez une nouvelle conversation IA.
- Écrivez un prompt détaillé :“Crée un layout mobile en HTML + Tailwind CSS, utilisant le design de mon frame Figma. Ajoute un mode sombre et utilise exactement les variables de couleur et d’espacement de mon fichier.”
L’IA va lire les variables, les dimensions, les couleurs, les polices de votre design → et générer du code contextualisé et précis.
Avantages :
- Élimine les erreurs de transcription : plus besoin de copier les valeurs manuellement.
- Gagnez du temps : du design → au code fonctionnel en quelques secondes.
- Maintient la cohérence : les couleurs, espacements, typographies sont respectés.
- Idéal pour les prototypes rapides ou les équipes design-dev en étroite collaboration.
Figma MCP n’est pas gratuit.
C’est l’avenir du workflow design-dev mais encore en phase expérimentale.
Ce n’est pas une fonctionnalité native de base c’est une intégration avancée pour les professionnels.