Figma MCP Server

Se conecta a la API de Figma, permitiendo que herramientas de IA accedan e interactúen con tus diseños de Figma.

Documentación

Figma MCP Server

Un servidor de Model Context Protocol (MCP) que se conecta a la API de Figma, permitiendo que las herramientas de IA y los LLMs accedan y trabajen con tus diseños de Figma.

Características

Extracción de datos de diseño: Extrae componentes, estilos y texto de tus diseños de Figma
Análisis de sistemas de diseño: Analiza la consistencia y los patrones del sistema de diseño
Gestión de contenido de UI: Extrae y organiza todo el texto de la interfaz de usuario de los diseños
Transferencia al desarrollo: Genera documentación completa para desarrolladores
Integración perfecta con IA: Conecta tus diseños con herramientas de IA como Claude, Cursor y otros clientes compatibles con MCP

Primeros pasos

Requisitos previos

Node.js 16 o superior
Token de acceso personal de Figma (Obténlo desde la configuración de tu cuenta de Figma)

Instalación

Clona el repositorio:

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

Instala las dependencias:
```
npm install
```

Crea 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

Compila el servidor:
```
npm run build
```
Inicia el servidor:
```
npm start
```

Conexión a clientes

Claude for Desktop

Abre o crea el archivo de configuración de Claude for Desktop:
- macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
- Windows: %APPDATA%\Claude\claude_desktop_config.json

Agrega 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"
      }
    }
  }
}

Reinicia Claude for Desktop

Cursor

Configuración global

Crea o edita el archivo de configuración MCP de Cursor:

macOS: ~/Library/Application Support/Cursor/mcp.json
Windows: %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

Crea un directorio .cursor en la raíz de tu proyecto:
```
mkdir -p .cursor
```

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

Herramienta	Descripción
`get-file-info`	Obtiene información básica sobre un archivo de Figma
`get-nodes`	Obtiene nodos específicos de un archivo de Figma
`get-components`	Obtiene información de componentes de un archivo de Figma
`get-styles`	Obtiene información de estilos de un archivo de Figma
`get-comments`	Obtiene comentarios de un archivo de Figma
`search-file`	Busca elementos en un archivo de Figma por tipo, nombre, etc.
`extract-text`	Extrae todos los elementos de texto de un archivo de Figma

Prompts disponibles

analyze-design-system - Analiza los componentes y estilos del sistema de diseño para verificar consistencia
extract-ui-copy - Extrae y organiza todo el texto de la interfaz de usuario de los diseños
generate-dev-handoff - Genera documentación de transferencia al desarrollo basada en los diseños

Ejemplos de uso

Uso con Claude:

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

Uso con Cursor:

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

Variables de entorno

Variable	Descripción	Valor por defecto
`FIGMA_API_TOKEN`	Tu token de acceso personal de Figma	(Requerido)
`API_KEY`	Clave de seguridad para la autenticación de la API	(Requerido)
`TRANSPORT_TYPE`	Método de transporte (`stdio` o `sse`)	`stdio`
`PORT`	Puerto para transporte SSE	`3000`

Arquitectura

Este servidor MCP:

Se conecta a la API de Figma usando tu token de acceso personal
Expone una interfaz estandarizada siguiendo el Model Context Protocol
Proporciona herramientas, recursos y prompts que los LLMs pueden usar para interactuar con tus diseños de Figma
Soporta tanto transporte stdio (conexiones locales) como transporte SSE (conexiones remotas)

Contribuciones

¡Las contribuciones son bienvenidas! No dudes en enviar un Pull Request.