figma-mcp-server

ScrabbleScratch/figma-mcp-server

3.1

If you are the rightful owner of figma-mcp-server and would like to certify it and/or have it hosted online, please leave a comment on the right or send an email to dayong@mcphub.com.

A Model Context Protocol (MCP) server designed for seamless integration with the Figma API, providing a suite of tools for managing files, teams, comments, and user information.

Tools
11
Resources
0
Prompts
0

Figma MCP Server

Un servidor MCP (Model Context Protocol) para integración con la API de Figma.

Funcionalidades

Este servidor MCP proporciona herramientas para:

  • Gestión de archivos: Obtener archivos de Figma, nodos específicos e imágenes renderizadas
  • Gestión de equipos: Acceder a proyectos, componentes y estilos de equipos
  • Comentarios: Leer y escribir comentarios en archivos de Figma
  • Información de usuario: Obtener datos del usuario actual

Configuración

Prerrequisitos

  1. Node.js v18 o superior
  2. Token de acceso personal de Figma

Instalación

npm install
npm run build

Obtener un Token de Acceso Personal de Figma

  1. Ve a tu configuración de cuenta de Figma
  2. Navega a la sección "Personal access tokens"
  3. Genera un nuevo token con los permisos necesarios
  4. Guarda el token de forma segura

Uso

Ejecutar el servidor

npm start

Configurar el cliente MCP

Primero, configura el acceso a la API de Figma:

{
  "name": "configure_figma",
  "arguments": {
    "personalAccessToken": "tu-token-de-figma"
  }
}

Herramientas disponibles

1. configure_figma

Configura el acceso a la API de Figma con tu token de acceso personal.

Parámetros:

  • personalAccessToken (requerido): Tu token de acceso personal de Figma
  • baseUrl (opcional): URL base de la API de Figma (por defecto: https://api.figma.com/v1)
2. get_file

Obtiene un archivo de Figma por su clave.

Parámetros:

  • fileKey (requerido): La clave que identifica el archivo de Figma
  • version (opcional): ID de versión específica
  • ids (opcional): Lista de IDs de nodos a recuperar
  • depth (opcional): Profundidad del árbol de documentos a atravesar
  • geometry (opcional): "paths" para exportar datos vectoriales
  • plugin_data (opcional): Lista de IDs de plugins
  • branch_data (opcional): Devuelve metadatos de rama
3. get_file_nodes

Obtiene nodos específicos de un archivo de Figma.

Parámetros:

  • fileKey (requerido): La clave del archivo de Figma
  • ids (requerido): Lista de IDs de nodos a recuperar
  • version, depth, geometry, plugin_data (opcionales)
4. get_images

Obtiene imágenes renderizadas de nodos específicos.

Parámetros:

  • fileKey (requerido): La clave del archivo de Figma
  • ids (requerido): Lista de IDs de nodos a renderizar
  • scale (opcional): Factor de escala (0.01-4)
  • format (opcional): Formato de salida (jpg, png, svg, pdf)
  • version (opcional): ID de versión específica
  • Opciones adicionales para SVG
5. get_team_projects

Obtiene proyectos de un equipo específico.

Parámetros:

  • teamId (requerido): ID del equipo
6. get_project_files

Obtiene archivos de un proyecto específico.

Parámetros:

  • projectId (requerido): ID del proyecto
  • branch_data (opcional): Devuelve metadatos de rama
7. get_comments

Obtiene comentarios de un archivo de Figma.

Parámetros:

  • fileKey (requerido): La clave del archivo de Figma
8. post_comment

Publica un comentario en un archivo de Figma.

Parámetros:

  • fileKey (requerido): La clave del archivo de Figma
  • message (requerido): Contenido del comentario
  • client_meta (opcional): Posición donde colocar el comentario
9. get_user

Obtiene información del usuario actual.

10. get_team_components

Obtiene componentes de un equipo específico.

Parámetros:

  • teamId (requerido): ID del equipo
  • page_size (opcional): Número de elementos por página
  • after (opcional): Cursor para paginación
11. get_team_styles

Obtiene estilos de un equipo específico.

Parámetros:

  • teamId (requerido): ID del equipo
  • page_size (opcional): Número de elementos por página
  • after (opcional): Cursor para paginación

Ejemplo de uso

// Configurar Figma
await callTool("configure_figma", {
  personalAccessToken: "figd_..."
});

// Obtener información de un archivo
await callTool("get_file", {
  fileKey: "abc123def456"
});

// Obtener nodos específicos
await callTool("get_file_nodes", {
  fileKey: "abc123def456",
  ids: ["1:2", "1:3"]
});

// Renderizar imágenes
await callTool("get_images", {
  fileKey: "abc123def456",
  ids: ["1:2"],
  format: "png",
  scale: 2
});

Desarrollo

# Modo desarrollo
npm run dev

# Compilar
npm run build

# Ejecutar
npm start

Estructura del proyecto

src/
├── index.ts           # Servidor MCP principal
├── figma-client.ts    # Cliente de la API de Figma
└── types.ts          # Esquemas de tipos y validación

Manejo de errores

El servidor incluye validación de parámetros usando Zod y manejo robusto de errores. Todos los errores se devuelven como errores MCP estándar con códigos y mensajes descriptivos.

📄 Licencia

Este proyecto está licenciado bajo la Licencia MIT - ver el archivo para más detalles.

¿Qué significa esto?

  • ✅ Puedes usar este código comercialmente
  • ✅ Puedes modificar y distribuir el código
  • ✅ Puedes crear proyectos derivados
  • ❌ Sin garantías (úsalo bajo tu propio riesgo)

🤝 Contribuciones

Las contribuciones son bienvenidas. Por favor:

  1. Fork el proyecto
  2. Crea una rama para tu feature (git checkout -b feature/AmazingFeature)
  3. Commit tus cambios (git commit -m 'Add some AmazingFeature')
  4. Push a la rama (git push origin feature/AmazingFeature)
  5. Abre un Pull Request

🐛 Reportar Issues

Si encuentras bugs o tienes sugerencias, por favor abre un issue.

⭐ Agradecimientos

  • Anthropic por el protocolo MCP
  • Figma por su excelente API
  • Comunidad open source por las librerías utilizadas