Skip to main content
Glama
Sign In
enesjakoptzh

FigmaMind MCP Server

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

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

  1. Clone the repository:
git clone https://github.com/seu-usuario/figmamind.git cd figmamind
  1. Install dependencies:
npm install
  1. Create a .env file in the project root with your Figma token:
FIGMA_TOKEN=seu_token_aqui PORT=3000
  1. 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

This server cannot be installed

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

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.

Extracts components from Figma designs and transforms them into standardized JSON format for easy consumption by mockups and AI tools for interface reconstruction.

  1. About the project
    1. Main features
      1. Requirements
        1. Installation
          1. Use
            1. Start the server
            2. Usage examples
          2. Project structure
            1. Tests
              1. Documentation
                1. Conversion to TypeScript
                  1. License

                    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
                      1,284
                      151
                      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 -
                      43,659
                      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