FigmaMind

Aplicación que extrae componentes y patrones de Figma utilizando la API oficial, con implementación del Model Calling Protocol (MCP).

Acerca del proyecto

FigmaMind es una herramienta que analiza los diseños de Figma y los transforma en representaciones JSON estandarizadas. Identifica componentes como botones, campos de entrada, encabezados y más, extrayendo sus propiedades y relaciones.

La aplicación expone dos tipos de API:

API REST : Para uso tradicional a través de HTTP
MCP (Protocolo de llamada de modelo) : para la integración con LLM y otros sistemas compatibles con MCP

Características principales

Extracción de componentes de Figma mediante la API oficial
Identificación automática de tipos de componentes (botones, entradas, encabezados, etc.)
Estandarización de posicionamiento y propiedades
Extracción de activos (imágenes e iconos)
Implementación del Protocolo de Llamada Modelo (MCP)
Escrito íntegramente en TypeScript

Requisitos

Node.js 18.0.0 o superior
Token de API de Figma

Instalación

Clonar el repositorio:

git clone https://github.com/seu-usuario/figmamind.git
cd figmamind

Instalar dependencias:

npm install

Crea un archivo .env en la raíz del proyecto con tu token de Figma:

FIGMA_TOKEN=seu_token_aqui
PORT=3000

Compilar el proyecto:

npm run build

Usar

Iniciar el servidor

npm start

Para desarrollo con recarga automática:

npm run dev

Ejemplos de uso

A través de API REST

Transformando un diseño de Figma:

curl -X POST -H "Content-Type: application/json" \
  --data '{"figmaUrl": "https://www.figma.com/file/FILE_KEY/FILE_NAME?node-id=NODE_ID"}' \
  http://localhost:3000/api/transform

Vía MCP

Lista de herramientas disponibles:

curl -X POST -H "Content-Type: application/json" \
  --data '{"jsonrpc": "2.0", "method": "tools.list", "id": 1}' \
  http://localhost:3000/tools/list

Ejecutar una herramienta:

curl -X POST -H "Content-Type: application/json" \
  --data '{"jsonrpc": "2.0", "method": "run", "id": 2, "params": {"name": "figmamind.transform", "arguments": {"figmaUrl": "https://www.figma.com/file/FILE_KEY/FILE_NAME?node-id=NODE_ID"}}}' \
  http://localhost:3000/run

Estructura del proyecto

figmamind/
├── docs/                     # Documentação detalhada
├── examples/                 # Exemplos de uso
│   ├── input/                # Dados de exemplo para entrada 
│   └── output/               # Dados de exemplo de saída
├── src/                      # Código-fonte
│   ├── mcp/                  # Implementação do MCP
│   ├── processor/            # Processamento de componentes
│   ├── services/             # Serviços (Figma API)
│   ├── transformers/         # Transformadores específicos
│   ├── types/                # Definições de tipos TypeScript
│   └── utils/                # Utilitários
├── tests/                    # Testes automatizados
└── scripts/                  # Scripts utilitários

Pruebas

Ejecute las pruebas automatizadas:

# Teste da transformação do Figma
npm run test:transform

# Teste dos endpoints MCP
npm run test:mcp

# Teste da API REST de transformação
npm run test:api

# Executa o teste principal
npm test

Documentación

Consulte la carpeta docs/ para obtener documentación detallada sobre:

Conversión a TypeScript

Este proyecto se convirtió de JavaScript a TypeScript para mejorar la tipificación, la solidez del código y la facilidad de mantenimiento. La conversión incluyó:

Agregar interfaces y tipos para todas las estructuras de datos
Conversión de todos los archivos .js a .ts
Implementación de tipificación fuerte para parámetros de función y retornos
Creación de pruebas automatizadas con TypeScript

Licencia

Instituto Tecnológico de Massachusetts (MIT)

Desarrollado por João Pereira

FigmaMind MCP Server

Integrations