Figma Console MCP (Obra Autodocs)

Ce que cela fait

Ce serveur MCP fait le pont entre le design et le développement en donnant aux assistants IA un accès complet à Figma. Il se spécialise dans l'extraction de systèmes de design, la création programmatique de composants UI et la gestion des tokens de design. Le fork Obra ajoute spécifiquement la capacité de générer une documentation des variantes de composants étiquetées (Autodocs) directement dans le canevas Figma.

Fonctionnalités clés

• Documentation automatisée : Générez des grilles de variantes étiquetées pour les ensembles de composants via figma_generate_autodocs.
• Synchronisation bidirectionnelle des tokens : Exportez les variables Figma vers DTCG JSON/CSS et renvoyez les modifications du code vers Figma.
• Création complète de design : Créez des cadres, des formes et des mises en page complexes à l'aide de l'API Figma Plugin.
• Audits d'accessibilité : Effectuez 14 vérifications de design WCAG avec marquage de conformité.
• Interface utilisateur interactive : Inclut un navigateur de tokens et un tableau de bord du système de design pour l'audit visuel.

Installation

Utilisez la commande suivante pour Claude Code :

claude mcp add figma-console -s user -e FIGMA_ACCESS_TOKEN=figd_VOTRE_TOKEN_ICI -e ENABLE_MCP_APPS=true -- npx -y @obra-studio/figma-console-mcp@latest

Pour Claude Desktop, ajoutez à claude_desktop_config.json :

{
  "mcpServers": {
    "figma-console": {
      "command": "npx",
      "args": ["-y", "@obra-studio/figma-console-mcp@latest"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "figd_VOTRE_TOKEN_ICI",
        "ENABLE_MCP_APPS": "true"
      }
    }
  }
}

Hôtes supportés

• claude
• vscode-copilot
• cursor
• windsurf