Figma MCP Server

Permite que asistentes de IA interactúen con Figma a través de WebSocket para leer datos y analizar diseños.

GitHub
21
Prueba este MCPPatrocinado

Documentación

Figma MCP Server (Python)

Servidor de Figma Model Context Protocol (MCP), implementado en Python usando FastMCP. Este servidor permite a los asistentes de IA interactuar con Figma a través de una conexión WebSocket para leer datos y analizar diseños.

🎯 Características

  • 📖 Lectura de datos: Obtención de información sobre documentos, nodos, componentes y estilos
  • 🔍 Búsqueda y análisis: Escaneo de nodos por tipos, búsqueda de contenido de texto
  • 📤 Exportación: Exportación de nodos como imágenes en varios formatos
  • 📋 Anotaciones: Visualización de anotaciones en documentos
  • 🧩 Componentes: Trabajo con componentes y sus instancias
  • 🔗 Prototipado: Obtención de información sobre reacciones y conexiones

🚫 Limitaciones

Por seguridad, este servidor NO admite:

  • Creación de nuevos elementos
  • Modificación de estilos, colores o texto (herramientas set_*)
  • Operaciones de modificación de nodos (mover, cambiar tamaño, eliminar, clonar)

📋 Herramientas disponibles (15 unidades)

🔗 Conexión

  • join_channel - Unirse a un canal para comunicarse con Figma

📖 Obtención de información

  • get_document_info - Obtener información sobre el documento actual de Figma
  • get_selection - Obtener información sobre la selección actual
  • read_my_design - Obtener información detallada sobre la selección, incluyendo todos los detalles de los nodos
  • get_node_info - Obtener información sobre un nodo específico por ID
  • get_nodes_info - Obtener información sobre varios nodos
  • get_node_children - Obtener los IDs de todos los nodos hijos con anidamiento recursivo completo
  • get_styles - Obtener todos los estilos del documento
  • get_local_components - Obtener todos los componentes locales

🧩 Componentes

  • get_instance_overrides - Obtener las anulaciones de la instancia del componente

🔍 Búsqueda y escaneo

  • scan_text_nodes - Escanear nodos de texto dentro de un nodo dado
  • scan_nodes_by_types - Escanear nodos de tipos específicos (TEXT, RECTANGLE, FRAME)

📤 Exportación

  • export_node_as_image - Exportar un nodo como imagen (PNG, JPG, SVG, PDF)

📋 Anotaciones

  • get_annotations - Obtener anotaciones para un nodo o todo el documento

🔗 Prototipado

  • get_reactions - Obtener reacciones (conexiones interactivas) para nodos

🏗️ Arquitectura

AI Client (Cursor) ←→ MCP Server ←→ WebSocket Server ←→ Figma Plugin
  1. MCP Server - Proporciona herramientas para IA
  2. WebSocket Server - Coordina conexiones y canales
  3. Figma Plugin - Ejecuta comandos en Figma

🚀 Inicio rápido

1. Instalación de dependencias

cd python-version
python -m venv venv
source venv/bin/activate  # Linux/Mac
# или venv\Scripts\activate  # Windows
pip install -r requirements.txt

2. Inicio del servidor WebSocket

python websocket_proxy.py --port 3055 --debug

3. Ejecución en Figma

  1. Abra Figma Desktop
  2. Vaya a Plugins → Development → Import plugin from manifest...
  3. Seleccione src/cursor_mcp_plugin/manifest.json
  4. Ejecute el plugin "Cursor MCP Plugin"
  5. Conéctese al servidor en el puerto 3055
  6. Recuerde el ID del canal (por ejemplo: abc123xyz)

4. Configuración de MCP en Cursor

Agregue la siguiente configuración en los ajustes de MCP de Cursor (.cursor/mcp.json):

{
  "mcpServers": {
    "figma-mcp": {
      "command": "python",
      "args": ["-m", "src.figma_mcp.server", "--server", "localhost:3055"],
      "cwd": "/path/to/your/figma_mcp"
    }
  }
}

Método alternativo (con entorno virtual):

{
  "mcpServers": {
    "figma-mcp": {
      "command": "/path/to/your/figma_mcp/venv/bin/python",
      "args": ["/path/to/your/figma_mcp/src/figma_mcp/server.py", "--server", "localhost:3055"]
    }
  }
}

Nota: Reemplace /path/to/your/figma_mcp con la ruta real al proyecto.

5. Inicio del servidor MCP

python -m src.figma_mcp.server --server localhost:3055

6. Conexión al canal

Use la herramienta join_channel con el ID del canal obtenido:

{
  "tool": "join_channel",
  "arguments": {
    "channel": "abc123xyz"
  }
}

🛠️ Ejemplos de uso

Obtención de información sobre el documento

{
  "tool": "get_document_info",
  "arguments": {}
}

Obtención de información sobre un nodo

{
  "tool": "get_node_info", 
  "arguments": {
    "node_id": "4472:98013"
  }
}

Obtención de todos los nodos hijos

{
  "tool": "get_node_children",
  "arguments": {
    "node_id": "4472:98012"
  }
}

Búsqueda de nodos de texto

{
  "tool": "scan_text_nodes",
  "arguments": {
    "node_id": "4472:98012",
    "use_chunking": true,
    "chunk_size": 50
  }
}

Exportación como imagen

{
  "tool": "export_node_as_image",
  "arguments": {
    "node_id": "4472:98013",
    "format": "PNG",
    "scale": 2.0
  }
}

🔧 Configuración

WebSocket Server

  • Puerto: 3055 (por defecto)
  • Host: localhost
  • Modo depuración: --debug

MCP Server

  • URL del servidor: localhost:3055 (por defecto)
  • Protocolo: MCP 2024-11-05
  • Transporte: stdio

Configuración de MCP en Cursor

Cree el archivo .cursor/mcp.json en la raíz de su proyecto o en su directorio personal:

{
  "$schema": "https://schema.cursor.com/mcp.json",
  "mcpServers": {
    "figma-mcp": {
      "command": "python",
      "args": ["-m", "src.figma_mcp.server", "--server", "localhost:3055"],
      "cwd": "/absolute/path/to/figma_mcp",
      "env": {
        "PYTHONPATH": "/absolute/path/to/figma_mcp"
      }
    }
  }
}

Parámetros principales:

  • command: Comando para ejecutar Python
  • args: Argumentos para ejecutar el servidor MCP
  • cwd: Directorio de trabajo (ruta absoluta al proyecto)
  • env: Variables de entorno (opcional)

📁 Estructura del proyecto

python-version/
├── src/figma_mcp/
│   ├── __init__.py
│   ├── server.py          # Главный MCP сервер
│   ├── websocket_client.py # WebSocket клиент
│   ├── types.py           # Типы Pydantic
│   └── utils.py           # Утилиты
├── tests/                 # Тесты (41 тест)
├── websocket_proxy.py     # WebSocket сервер
├── requirements.txt       # Зависимости
└── README.md             # Документация

🧪 Pruebas

Ejecución de todas las pruebas:

python -m pytest tests/ -v

Prueba de conexión:

python test_mcp.py

🔒 Seguridad

  • Filtrado de datos confidenciales de las respuestas de Figma
  • Validación de todos los parámetros con Pydantic
  • Manejo de errores y tiempos de espera
  • Registro en stderr para depuración

📦 Dependencias

  • fastmcp: 2.4.0 - Marco de trabajo del servidor MCP
  • websockets: 15.0.1 - Cliente/servidor WebSocket
  • pydantic: 2.11.5 - Validación de datos
  • pytest: 8.3.5 - Pruebas

🐛 Depuración

  1. Problemas de conexión: Verifique el estado del servidor WebSocket
  2. Tiempos de espera: Aumente el timeout en el cliente WebSocket
  3. Errores de canal: Asegúrese de usar el ID de canal correcto
  4. Registros: Consulte la salida en stderr para obtener información detallada

📝 Licencia

Licencia MIT

🤝 Contribuciones

  1. Haga un fork del repositorio
  2. Cree una rama para la función
  3. Agregue pruebas
  4. Envíe una solicitud de extracción (pull request)