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

1. Ouvrez l'application de bureau Figma et assurez-vous d'avoir effectué la mise à jour vers la dernière version.
   
2. Créez ou ouvrez un fichier Figma Design.
3. Dans le coin supérieur gauche, ouvrez le menu Figma.
4. 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.

É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.

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

É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

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

Par lien

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

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.

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 de Group 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 :

1. Générez du code pour des sections plus petites ou des composants individuels (par ex. carte, en-tête, barre latérale)
2. 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.