Servidor MCP de Figma

Un servidor de Protocolo de contexto de modelo (MCP) que se conecta a la API de Figma, lo que permite que las herramientas de IA y los LLM accedan y trabajen con sus diseños de Figma.

Características

• Extracción de datos de diseño : extraiga componentes, estilos y texto de sus diseños de Figma

• Análisis del sistema de diseño : analizar la consistencia y los patrones del sistema de diseño

• Gestión de contenido de UI : extraiga y organice toda la copia de UI de los diseños

• Entrega del desarrollo : generar documentación completa para desarrolladores

• Integración perfecta con IA : conecta tus diseños a herramientas de IA como Claude, Cursor y otros clientes compatibles con MCP

Related MCP server: Figma MCP Server

Empezando

Prerrequisitos

• Node.js 16 o superior

• Token de acceso personal de Figma (consíguelo en la configuración de tu cuenta de Figma)

Instalación

1. Clonar el repositorio:

   git clone https://github.com/yourusername/figma-mcp-server.git
   cd figma-mcp-server

2. Instalar dependencias:

   npm install

3. Cree un archivo .env en la raíz del proyecto:

   FIGMA_API_TOKEN=your_figma_personal_access_token
   API_KEY=your_secure_api_key
   TRANSPORT_TYPE=stdio

4. Construir el servidor:

   npm run build

5. Iniciar el servidor:

   npm start

Conexión con los clientes

Claude para escritorio

1. Abra o cree el archivo de configuración de Claude for Desktop:

   • macOS: ~/Library/Application Support/Claude/claude_desktop_config.json

   • Ventanas: %APPDATA%\Claude\claude_desktop_config.json

2. Agregue la siguiente configuración:

   {
     "mcpServers": {
       "figma": {
         "command": "node",
         "args": ["/absolute/path/to/figma-mcp-server/build/index.js"],
         "env": {
           "FIGMA_API_TOKEN": "your_figma_personal_access_token",
           "TRANSPORT_TYPE": "stdio"
         }
       }
     }
   }

3. Reiniciar Claude para escritorio

Cursor

Configuración global

Crear o editar el archivo de configuración MCP de Cursor:

• macOS: ~/Library/Application Support/Cursor/mcp.json

• Ventanas: %APPDATA%\Cursor\mcp.json

{
  "mcpServers": {
    "figma-mcp": {
      "url": "http://localhost:3000/sse",
      "env": {
        "API_KEY": "your_secure_api_key"
      }
    }
  }
}

Configuración específica del proyecto

1. Cree un directorio .cursor en la raíz de su proyecto:

   mkdir -p .cursor

2. Crea un archivo mcp.json dentro de ese directorio:

   {
     "mcpServers": {
       "figma-mcp": {
         "url": "http://localhost:3000/sse",
         "env": {
           "API_KEY": "your_secure_api_key"
         }
       }
     }
   }

Herramientas disponibles

Indicaciones disponibles

• analyze-design-system - Analizar los componentes y estilos del sistema de diseño para garantizar la coherencia

• extract-ui-copy : extrae y organiza toda la copia de la interfaz de usuario de los diseños

• generate-dev-handoff : genera documentación de entrega de desarrollo basada en diseños

Ejemplos de uso

Usando con Claude:

Can you analyze the design system in my Figma file with key abc123? Look for consistency in color usage and typography.

Usando con el cursor:

Generate React components for the buttons from my Figma file with key abc123, using tailwind CSS.

Variables de entorno

Arquitectura

Este servidor MCP:

1. Se conecta a la API de Figma usando su token de acceso personal

2. Expone una interfaz estandarizada siguiendo el Protocolo de Contexto de Modelo

3. Proporciona herramientas, recursos e indicaciones que los LLM pueden usar para interactuar con sus diseños de Figma.

4. Admite tanto el transporte stdio (conexiones locales) como el transporte SSE (conexiones remotas)

Contribuyendo

¡Agradecemos sus contribuciones! No dude en enviar una solicitud de incorporación de cambios.