Skip to main content
Glama
enesjakoptzh

FigmaMind MCP Server

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

FigmaMind

使用官方 API 从 Figma 中提取组件和模式的应用程序，并实现模型调用协议 (MCP)。

关于项目

FigmaMind 是一种分析 Figma 设计并将其转换为标准化 JSON 表示的工具。它可以识别按钮、输入字段、标题等组件，并提取它们的属性和关系。

该应用程序公开两种类型的 API：

  • REST API ：通过 HTTP 进行传统使用
  • MCP（模型调用协议） ：用于与 LLM 和其他 MCP 兼容系统集成

主要特点

  • 通过官方 API 提取 Figma 组件
  • 自动识别组件类型（按钮、输入、标题等）
  • 定位和属性标准化
  • 资产提取（图像和图标）
  • 模型调用协议（MCP）的实现
  • 完全用 TypeScript 编写

要求

  • Node.js 18.0.0 或更高版本
  • Figma API 令牌

安装

  1. 克隆存储库：
git clone https://github.com/seu-usuario/figmamind.git cd figmamind
  1. 安装依赖项：
npm install
  1. 使用您的 Figma 令牌在项目根目录中创建一个.env文件：
FIGMA_TOKEN=seu_token_aqui PORT=3000
  1. 编译项目：
npm run build

使用

启动服务器

npm start

对于自动重新加载的开发：

npm run dev

使用示例

通过 REST API

转换 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
通过 MCP

列出可用的工具：

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

运行工具：

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

项目结构

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

测试

运行自动化测试：

# 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

文档

请参阅docs/文件夹以获取有关以下内容的详细文档：

转换为 TypeScript

该项目从 JavaScript 转换为 TypeScript，以提高类型、代码稳健性和可维护性。转换包括：

  • 为所有数据结构添加接口和类型
  • 将所有.js文件转换为.ts
  • 实现函数参数和返回的强类型
  • 使用 TypeScript 创建自动化测试

执照

麻省理工学院

由 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.

从 Figma 设计中提取组件并将其转换为标准化的 JSON 格式，以便 AI 模型和工具轻松使用以进行界面重建。

  1. 关于项目
    1. 主要特点
      1. 要求
        1. 安装
          1. 使用
            1. 启动服务器
            2. 使用示例
          2. 项目结构
            1. 测试
              1. 文档
                1. 转换为 TypeScript
                  1. 执照

                    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 -
                      60,738
                      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