đ§ 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.
Ă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. 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 MCP en Dev Mode Figma à vos serveurs :
"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 chat Ă l'aide de
â„âB
ouââI
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.
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
- Répertorier tous les serveurs configurés
D'autres éditeurs de code et outils prenant en charge les événements envoyés par le serveur (SSE) peuvent également se connecter au serveur MCP en Dev Mode.
Si vous utilisez un autre éditeur ou outil, vérifiez dans sa documentation qu'il prend en charge la communication SSE. Si c'est le cas, vous pouvez ajouter manuellement le serveur MCP en Dev Mode à l'aide de cette configuration :
{
"mcpServers": {
"Figma Dev Mode MCP": {
"url": "http://127.0.0.1:3845/sse"
}
}
}
Remarque : Le serveur MCP en Dev Mode communique en utilisant le protocole SSE. Suivez les étapes de votre éditeur pour configurer un serveur MCP compatible avec le SSE, et utilisez l'URL : http://localhost:3845/sse
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.
Outils et suggestions d'utilisation
get_code
Utilisez cette fonction pour générer du code pour votre sélection Figma à l'aide du serveur MCP. La sortie par défaut est React + Tailwind, mais vous pouvez la personnaliser avec vos invites :
-
Modifier le framework
- « Generate my Figma selection in Vue. »
- « Generate my Figma selection in plain HTML + CSS. »
- « Generate my Figma selection in iOS. »
-
Utiliser vos composants
- « Generate my Figma selection using components from src/components/ui »
- « Generate my Figma selection using components from src/ui and style with Tailwind »
Vous pouvez coller des liens ou sélectionner le frame ou le composant dans Figma avant d'exécuter l'invite.
DĂ©couvrez comment configurer Code Connect pour amĂ©liorer la rĂ©utilisation des composants â
get_variable_defs
Renvoie les variables et les styles utilisés dans votre sélection, comme les couleurs, l'espacement et la typographie.
- Répertorier tous les tokens utilisés
- « Get the variables used in my Figma selection. »
- Privilégier un type spécifique
- « What color and spacing variables are used in my Figma selection? »
- Obtenir Ă la fois les noms et les valeurs
- « List the variable names and their values used in my Figma selection. »
get_code_connect_map
RĂ©cupĂšre un mappage entre les identifiants de nĆuds Figma et leurs composants de code correspondants dans votre base de code. Plus prĂ©cisĂ©ment, cette fonction renvoie un objet dont chaque clĂ© est un identifiant de nĆud Figma, et la valeur contient :
-
codeConnectSrc
 : l'emplacement du composant dans votre base de code (par exemple, un chemin de fichier ou une URL). -
codeConnectName
 : le nom du composant dans votre base de code.
Ce mappage est utilisĂ© pour connecter directement les Ă©lĂ©ments Figma Design Ă leurs implĂ©mentations React (ou autre framework), afin de permettre des workflows fluides de la conception au code et de garantir que les bons composants sont utilisĂ©s pour chaque partie du design. Si un nĆud Figma est connectĂ© Ă un composant de code, cette fonction vous aide Ă identifier et Ă utiliser le bon composant dans votre projet.
get_image
Pour utiliser cet outil, accédez à Preferences > Dev Mode MCP Server Settings > Enable tool get_image
Cette option permet de faire une capture d'écran de votre sélection afin de préserver la fidélité de la mise en page. Laissez-la activée, sauf si vous gérez des limites de tokens.
ParamĂštres du serveur MCP en Dev Mode
Il s'agit de paramÚtres supplémentaires que vous pouvez activer dans les préférences et utiliser avec le client MCP
Activer l'outil get_image
- Utiliser des substituts : ignore l'extraction d'images et ajoute des substituts à la place. Cette fonction est utile si vous préférez les intervertir manuellement dans le code. Sinon, les images réelles sont extraites de votre fichier.
Activer Code Connect
Inclut les mappages Code Connect dans la réponse, afin que le code généré puisse réutiliser les composants de votre base de code connectée lorsque cela est possible.
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.
Bonnes pratiques MCP
La qualité du code généré dépend de plusieurs facteurs. Certains dépendent de vous, et d'autres des outils que vous utilisez. Voici quelques suggestions pour un rendu clair et cohérent.
Structurez votre fichier Figma pour améliorer le code
Fournissez le meilleur contexte pour votre intention de conception, afin que le MCP et votre assistant IA puissent générer un code clair, cohérent et adapté à votre systÚme.
-
Utilisez des composants pour tout élément réutilisé (boutons, cartes, champs de saisie, etc.)
-
Liez les composants à votre base de code avec Code Connect. C'est la meilleure maniÚre d'assurer une réutilisation cohérente des composants dans le code. Sans cela, le modÚle n'est qu'une supposition.
-
Utilisez des variables pour l'espacement, la couleur, le rayon et la typographie.
-
Nommez les calques de maniÚre sémantique (par ex.
CardContainer
au lieu deGroup 5
) -
Utilisez la disposition automatique pour transmettre une intention réactive.
Conseil : redimensionnez le frame dans Figma pour vérifier qu'il se comporte comme prévu avant de générer le code.
-
Utilisez les annotations et les ressources de développement pour transmettre une intention de conception difficile à saisir uniquement à partir de visuels, comme la maniÚre dont un élément doit se comporter, s'aligner ou réagir.
Rédigez des instructions efficaces pour guider l'IA
Le MCP fournit à votre assistant IA des données Figma structurées, mais c'est votre message qui détermine le résultat. Des invites de bonne qualité peuvent :
- Adapter le résultat à votre framework ou votre systÚme de style
- Respecter la structure des fichiers et les conventions de dénomination
- Ajouter du code à des chemins d'accÚs spécifiques (par ex.
src/components/ui
) - Ajouter ou modifier du code dans des fichiers existants au lieu d'en créer de nouveaux
- Suivre des systÚmes de layout spécifiques (par ex. grille, flexbox, position absolue)
Exemples :
- « Generate iOS SwiftUI code from this frame »
- « Use Chakra UI for this layout »
- « Use
src/components/ui
components » - « Add this to
src/components/marketing/PricingCard.tsx
 » - « Use our
Stack
layout component »
Considérez les invites comme un brief destiné à un collaborateur. Une intention claire permet d'obtenir de meilleurs résultats.
Déclenchez des outils spécifiques si nécessaire
Le MCP prend en charge divers outils, et chacun offre Ă votre assistant IA un type de contexte structurĂ© diffĂ©rent. Parfois, l'assistant ne choisit pas automatiquement le bon outil, d'autant plus que de nombreux outils sont disponibles. Si les rĂ©sultats ne sont pas satisfaisants, essayez d'ĂȘtre plus explicite dans votre invite.
- get_code fournit une représentation structurée React + Tailwind de votre sélection Figma. Il s'agit d'un point de départ que votre assistant IA peut traduire dans n'importe quel framework ou style de code, en fonction de votre demande.
- get_variable_defs extrait les variables et les styles utilisés dans votre sélection (couleur, espacement, typographie, etc.). Cela permet au modÚle de référencer vos tokens directement dans le code généré.
Par exemple, si vous obtenez du code brut au lieu de tokens, essayez ceci :
- « Get the variable names and values used in this frame. »
Ajoutez des rÚgles personnalisées
Définissez des orientations au niveau du projet afin de garantir la cohérence des résultats, à l'instar des notes d'intégration pour un nouveau développeur. Par exemple :
- ĂlĂ©ments de base de mise en page prĂ©fĂ©rĂ©s
- Organisation des fichiers
- ModÚles de dénomination
- Les éléments à ne pas coder en dur
Vous pouvez fournir ces orientations dans n'importe quel format utilisé par votre client MCP pour les fichiers d'instruction.
Exemples :
---
description: RĂšgles MCP du Dev Mode Figma
globs:
alwaysApply: true
---
 - Le serveur MCP du Dev Mode de Figma fournit un point de terminaison pour les ressources qui peut servir des images et des ressources SVG
- IMPORTANTÂ : si le serveur MCP du Dev Mode de Figma renvoie une source localhost pour une image ou un SVG, utilisez directement cette image ou cette source SVG
- IMPORTANT : n'importez pas/ne rajoutez pas de nouveaux paquets d'icĂŽnes ; toutes les ressources doivent ĂȘtre dans la charge utile Figma
- IMPORTANT : n'utilisez pas ou ne créez pas de substituts si une source localhost est fournie
# Serveurs MCP
## RĂšgles MCP du Dev Mode Figma
 - Le serveur MCP du Dev Mode de Figma fournit un point de terminaison pour les ressources qui peut servir des images et des ressources SVG
- IMPORTANTÂ : si le serveur MCP du Dev Mode de Figma renvoie une source localhost pour une image ou un SVG, utilisez directement cette image ou cette source SVG
- IMPORTANT : n'importez pas/ne rajoutez pas de nouveaux paquets d'icĂŽnes ; toutes les ressources doivent ĂȘtre dans la charge utile Figma
- IMPORTANT : n'utilisez pas ou ne créez pas de substituts si une source localhost est fournie
- IMPORTANTÂ : utilisez toujours les composants de `/path_to_your_design_system` lorsque cela est possible
- Privilégiez la fidélité à Figma pour faire correspondre exactement les designs
- Ăvitez les valeurs codĂ©es en dur ; utilisez les tokens de design de Figma lorsqu'ils sont disponibles
- Respectez les exigences WCAG en matiÚre d'accessibilité
- Ajoutez la documentation des composants
- Placez les composants UI dans `/path_to_your_design_system` ; évitez les styles inline à moins que ce ne soit vraiment nécessaire
L'ajout de ces Ă©lĂ©ments une seule fois peut rĂ©duire considĂ©rablement la nĂ©cessitĂ© d'invites rĂ©pĂ©titives et permet de s'assurer que les collaborateurs ou les agents suivent toujours les mĂȘmes attentes.
Assurez-vous de consulter la documentation de votre IDE ou de votre client MCP pour savoir comment structurer les rÚgles, et faites des essais pour trouver ce qui convient le mieux à votre équipe. Des directives claires et cohérentes permettent souvent d'obtenir un code de meilleure qualité et plus réutilisable, avec moins de va-et-vient.
Décomposez les grandes sélections
Divisez les écrans en parties plus petites (comme des composants ou des segments logiques) pour obtenir des résultats plus rapides et plus fiables.
Les sélections volumineuses peuvent ralentir les outils, entraßner des erreurs ou aboutir à des réponses incomplÚtes, surtout lorsque le contexte est trop vaste pour que le modÚle puisse le traiter. Au lieu de cela :
- GĂ©nĂ©rez du code pour des sections plus petites ou des composants individuels (par ex. carte, en-tĂȘte, barre latĂ©rale)
- Si vous avez l'impression que le processus est lent ou bloqué, réduisez la taille de votre sélection
Cela permet de gérer le contexte et de rendre les résultats plus prévisibles, tant pour vous que pour le modÚle.
Si un Ă©lĂ©ment du rĂ©sultat ne semble pas tout Ă fait correct, il peut ĂȘtre utile de revoir les bases : comment le fichier Figma est structurĂ©, comment l'invite est Ă©crite et quel est le contexte transmis. Suivre ces conseils peut faire une grande diffĂ©rence et permet gĂ©nĂ©ralement d'obtenir un code plus cohĂ©rent et rĂ©utilisable.