Integrations
Extracts components from Figma designs and transforms them into a standardized JSON format that can be used to reconstruct interfaces programmatically. Supports organizing components into logical sections, normalizing positions, and extracting assets.
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:
- Install dependencies:
- Create a
.env
file in the project root with your Figma token:
- Compile the project:
Use
Start the server
For development with automatic reloading:
Usage examples
Via REST API
Transforming a Figma design:
Via MCP
List available tools:
Running a tool:
Project structure
Tests
Run the automated tests:
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
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.
Related MCP Servers
- AsecurityFlicenseAqualityEnables AI assistants to interact with Figma files through the ModelContextProtocol, allowing viewing, commenting, and analyzing Figma designs directly in chat interfaces.Last updated -51,816151TypeScript
- -securityFlicense-qualityEnables Cursor AI to interact with Figma designs, allowing users to read design information and programmatically modify elements through natural language commands.Last updated -TypeScript
- -securityAlicense-qualityA 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 -1246TypeScriptMIT License
- -securityAlicense-qualityGives 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 -14,596TypeScriptMIT License