Figma to Code MCP

Ce qu'il fait

Ce serveur fait le pont entre le design et le développement en convertissant les mises en page Figma en code React et Tailwind CSS de haute qualité. Il utilise un pipeline multiphase impliquant des transformations AST et une validation visuelle basée sur Puppeteer pour s'assurer que le résultat correspond au design original.

Outils

• figma-analyze : Extrait les métadonnées et les fragments de Figma et génère le code.
• figma-merge : Combine plusieurs écrans (Desktop, Tablette, Mobile) en un seul composant adaptatif (responsive).
• figma-reprocess : Régénère les fichiers pour un export existant sans nouveaux appels MCP.
• figma-validate : Effectue des vérifications de fidélité visuelle entre Figma et le rendu web.

Installation

Lancer via Docker Compose :

docker-compose up --build

Assurez-vous que Figma Desktop est exécuté sur le port 3845. Ajoutez à claude_desktop_config.json :

{
  "mcpServers": {
    "figma-to-code": {
      "command": "docker",
      "args": ["run", "-i", "--rm", "vincegx/figma-to-code"]
    }
  }
}

Hôtes supportés

• Claude Desktop