Skip to main content
Glama
enesjakoptzh

FigmaMind MCP Server

by joao-loker
GitHub
TypeScript
OverviewInspectNewSchemaRelated ServersReviewsScore
Need Help?View Source CodeReport Issue

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

  1. Clonar el repositorio:
git clone https://github.com/seu-usuario/figmamind.git cd figmamind
  1. Instalar dependencias:
npm install
  1. Crea un archivo .env en la raíz del proyecto con tu token de Figma:
FIGMA_TOKEN=seu_token_aqui PORT=3000
  1. 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

This server cannot be installed

-
security - not tested
F
license - not found
-
quality - not tested

How are these scores calculated?

remote-capable server

The server can be hosted and run remotely because it primarily relies on remote services or has no dependency on the local environment.

Extrae componentes de los diseños de Figma y los transforma en formato JSON estandarizado para facilitar su consumo por parte de maquetas y herramientas de IA para la reconstrucción de la interfaz.

  1. Acerca del proyecto
    1. Características principales
      1. Requisitos
        1. Instalación
          1. Usar
            1. Iniciar el servidor
            2. Ejemplos de uso
          2. Estructura del proyecto
            1. Pruebas
              1. Documentación
                1. Conversión a TypeScript
                  1. Licencia

                    Related MCP Servers

                    • Figma MCP Server

                      MatthewDailey
                      A
                      security
                      F
                      license
                      A
                      quality
                      Enables AI assistants to interact with Figma files through the ModelContextProtocol, allowing viewing, commenting, and analyzing Figma designs directly in chat interfaces.
                      Last updated -
                      5
                      997
                      173
                      TypeScript
                      • Apple

                    • Talk to Figma MCP

                      yhc984
                      -
                      security
                      F
                      license
                      -
                      quality
                      Enables Cursor AI to interact with Figma designs, allowing users to read design information and programmatically modify elements through natural language commands.
                      Last updated -
                      TypeScript

                    • 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
                      • Linux
                      • Apple

                    • Figma MCP Server

                      rlagudals95
                      -
                      security
                      A
                      license
                      -
                      quality
                      Gives AI-powered coding tools like Cursor, Windsurf, and Cline access to Figma design files, enabling more accurate code generation directly from Figma designs.
                      Last updated -
                      44,047
                      TypeScript
                      MIT License

                    View all related MCP servers

                    Appeared in Searches

                    New MCP Servers

                    MCP directory API

                    We provide all the information about MCP servers via our MCP API.

                    curl -X GET 'https://glama.ai/api/mcp/v1/servers/joao-loker/FigmaMind'

                    If you have feedback or need assistance with the MCP directory API, please join our Discord server