FigmaMind

Application that extracts components and patterns from Figma using the official API, with implementation of the Model Calling Protocol (MCP).

About the project

FigmaMind is a tool that analyzes Figma designs and transforms them into standardized JSON representations. It identifies components like buttons, input fields, headers, and more, extracting their properties and relationships.

The application exposes two types of APIs:

REST API : For traditional use via HTTP
MCP (Model Calling Protocol) : For integration with LLMs and other MCP-compatible systems

Main features

Extracting Figma components via official API
Automatic identification of component types (buttons, inputs, headers, etc.)
Standardization of positioning and properties
Asset extraction (images and icons)
Implementation of the Model Calling Protocol (MCP)
Entirely written in TypeScript

Requirements

Node.js 18.0.0 or higher
Figma API Token

Installation

Clone the repository:

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

Install dependencies:

npm install

Create a .env file in the project root with your Figma token:

FIGMA_TOKEN=seu_token_aqui
PORT=3000

Compile the project:

npm run build

Use

Start the server

npm start

For development with automatic reloading:

npm run dev

Usage examples

Via REST API

Transforming a Figma design:

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

Via MCP

List available tools:

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

Running a tool:

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

Project structure

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

Tests

Run the automated tests:

# 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

Documentation

See the docs/ folder for detailed documentation on:

Conversion to TypeScript

This project was converted from JavaScript to TypeScript to improve typing, code robustness, and maintainability. The conversion included:

Adding interfaces and types for all data structures
Converting all .js files to .ts
Implementing strong typing for function parameters and returns
Creating automated tests with TypeScript

License

MIT

Developed by João Pereira

FigmaMind MCP Server

Integrations