Servidor MCP de Figma

Un servidor de Protocolo de Contexto de Modelo (MCP) que se integra con la API de Figma a través de Claude y otros clientes compatibles con MCP. Actualmente admite acceso de solo lectura a archivos y proyectos de Figma, con una arquitectura del lado del servidor que admite funciones más avanzadas de gestión de tokens de diseño y temas (pendiente de mejoras en la API de Figma o desarrollo de plugins).

Estado del proyecto

Progreso actual

✅ Implementación principal : se construyó con éxito un servidor TypeScript siguiendo el Protocolo de contexto de modelo (MCP)
✅ Integración con Claude Desktop : probada y funcional con Claude Desktop
✅ Operaciones de lectura : herramientas get-file y list-files que funcionan para acceder a archivos de Figma
✅ Arquitectura del servidor : Se implementó un sistema de almacenamiento en caché, manejo de errores y monitoreo de estadísticas.
✅ Protocolos de transporte : Se admiten mecanismos de transporte stdio y SSE

Funcionalidad potencial completa

El servidor ha sido diseñado con código para admitir estas funciones (actualmente limitadas por restricciones de API):

Gestión de variables : crear, leer, actualizar y eliminar tokens de diseño (variables)
Manejo de referencias : crear y validar relaciones entre tokens
Gestión de temas : crea temas con múltiples modos (por ejemplo, claro/oscuro)
Análisis de dependencia : detectar y prevenir referencias circulares
Operaciones por lotes : realice acciones masivas sobre variables y temas

Con el desarrollo del complemento Figma o un acceso API ampliado, estas funciones podrían habilitarse por completo.

Características

🔑 Autenticación segura con la API de Figma
📁 Operaciones con archivos (leer, listar)
🎨 Gestión de sistemas de diseño
- Creación y gestión de variables
- Creación y configuración de temas
- Manejo y validación de referencias
🚀 Rendimiento optimizado
- Almacenamiento en caché de LRU
- Manejo del límite de velocidad
- Agrupación de conexiones
📊 Monitoreo integral
- controles de salud
- Estadísticas de uso
- Seguimiento de errores

Prerrequisitos

Node.js 18.x o superior
Token de acceso de Figma con los permisos adecuados
Comprensión básica del MCP (Protocolo de Contexto Modelo)

Instalación

npm install figma-mcp-server

Configuración

Cree un archivo .env basado en .env.example :

# Figma API Access Token
FIGMA_ACCESS_TOKEN=your_figma_token

# Server Configuration
MCP_SERVER_PORT=3000

# Debug Configuration
DEBUG=figma-mcp:*

Para la integración de Claude Desktop:

El servidor se puede configurar en el archivo de configuración de Claude Desktop:

macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
Ventanas: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "figma": {
      "command": "node",
      "args": ["/ABSOLUTE/PATH/TO/figma-mcp-server/dist/index.js"],
      "env": {
        "FIGMA_ACCESS_TOKEN": "your_token_here"
      }
    }
  }
}

Notas importantes:

Utilice rutas ABSOLUTAS, no relativas
En Windows, utilice barras invertidas dobles (\\) en las rutas
Reinicie Claude Desktop después de realizar cambios de configuración

Uso

Uso básico

import { startServer } from 'figma-mcp-server';

const server = await startServer(process.env.FIGMA_ACCESS_TOKEN);

Herramientas disponibles

obtener archivo
- Recuperar detalles del archivo Figma GXP5
archivos de lista
- Lista de archivos en un proyecto de Figma GXP6
crear variables
- Crear variables del sistema de diseño GXP7
crear tema
- Crear y configurar temas GXP8

Documentación de la API

Métodos de servidor

startServer(figmaToken: string, debug?: boolean, port?: number)
- Inicializa e inicia el servidor MCP
- Devoluciones: Promesa

Esquemas de herramientas

Todas las entradas de la herramienta se validan utilizando esquemas Zod:

const CreateVariablesSchema = z.object({
  fileKey: z.string(),
  variables: z.array(z.object({
    name: z.string(),
    type: z.enum(['COLOR', 'FLOAT', 'STRING']),
    value: z.string(),
    scope: z.enum(['LOCAL', 'ALL_FRAMES'])
  }))
});

Manejo de errores

El servidor proporciona mensajes de error detallados y códigos de error adecuados:

Token no válido: 403 con mensaje de error específico
Limitación de velocidad: 429 con tiempo de reinicio
Errores de validación: 400 con detalles específicos del campo
Errores del servidor: 500 con seguimiento de errores

Limitaciones y problemas conocidos

Restricciones de la API

Operaciones de solo lectura
- Limitado a operaciones de solo lectura debido a las restricciones de la API de Figma
- Los tokens de acceso personal solo admiten operaciones de lectura, no de escritura.
- No se pueden modificar variables, componentes o estilos a través de la API REST con tokens personales
- Las operaciones de escritura requerirían el desarrollo del complemento Figma.
Limitación de velocidad
- Sigue los límites de velocidad de la API de Figma
- Implementar un retroceso exponencial para un mejor manejo
Gestión de caché
- TTL predeterminado de 5 minutos
- Limitado a 500 entradas
- Considere implementar ganchos de invalidación de caché
Autenticación
- Solo admite tokens de acceso personal
- No hay soporte para permisos a nivel de equipo ni edición colaborativa
- Implementación de OAuth planificada para el futuro
Implementación técnica
- Requiere rutas absolutas en la configuración
- Debe compilar archivos TypeScript antes de la ejecución
- Requiere el manejo de la resolución del módulo tanto local como global

Contribuyendo

Bifurcar el repositorio
Crear una rama de características
Realiza tus cambios con pruebas
Enviar una solicitud de extracción

Por favor, siga nuestros estándares de codificación:

Modo estricto de TypeScript
Configuración de ESLint
Broma para probar
Manejo integral de errores

Licencia

Licencia MIT: consulte el archivo LICENCIA para obtener más detalles

Solución de problemas

Consulte TROUBLESHOOTING.md para obtener una guía completa de solución de problemas.

Problemas comunes

Errores de conexión JSON
- Usar rutas absolutas en la configuración de Claude Desktop
- Asegúrese de que el servidor esté compilado ( npm run build )
- Verifique que todas las variables de entorno estén configuradas
Problemas de autenticación
- Verifique que su token de acceso de Figma sea válido
- Compruebe que el token tenga los permisos necesarios
- Asegúrese de que el token esté configurado correctamente
El servidor no se inicia
- Verifique la versión de Node.js (se requiere 18.x+)
- Verificar que la compilación exista ( dist/index.js )
- Consulte los registros de Claude Desktop:
  - macOS: ~/Library/Logs/Claude/mcp*.log
  - Ventanas: %APPDATA%\Claude\logs\mcp*.log

Para obtener pasos de depuración y soluciones más detallados, consulte la guía de solución de problemas.

Apoyo

Problemas de GitHub: Informar un error
Documentación: Wiki
Discord: Únete a nuestra comunidad

You must be authenticated.

security – no known vulnerabilities

license - not found

quality - confirmed to work

hybrid server

The server is able to function both locally and remotely, depending on the configuration or use case.

Tools

Permite una interacción fluida con Figma a través del Protocolo de contexto de modelo, lo que permite que las aplicaciones LLM accedan, manipulen y rastreen archivos, componentes y variables de Figma.

Related Resources

Reddit Discussion about this server

Related MCP Servers

Figma MCP Server
GLips
-
security
A
license
-
quality
Enables Cursor to access Figma files through the Model Context Protocol, enhancing its ability to accurately interpret and utilize design data for code generation.
Last updated -
5
38,870
7,757
TypeScript
MIT License
mcp-figma
smithery-ai
A
security
F
license
A
quality
A Model Context Protocol server that provides access to Figma API functionality, allowing AI assistants like Claude to interact with Figma files, comments, components, and team resources.
Last updated -
18
34
1
MCP Toolbox
ai-zerolab
-
security
A
license
-
quality
A comprehensive toolkit that enhances LLM capabilities through the Model Context Protocol, allowing LLMs to interact with external services including command-line operations, file management, Figma integration, and audio processing.
Last updated -
17
Python
Apache 2.0
Figma MCP Server
1yhy
-
security
A
license
-
quality
A Model Context Protocol server that integrates Figma design files with AI coding tools like Cursor, Windsurf, and Cline, allowing AI tools to access and understand Figma design data for generating more accurate code.
Last updated -
124
6
TypeScript
MIT License

View all related MCP servers

Figma MCP Server