Servidor MCP de Figma

Un servidor de Protocolo de Contexto de Modelo (MCP) que conecta los diseños de Figma con las implementaciones de React. Este servidor permite la conversión con precisión de píxeles de diseños de Figma en aplicaciones de React procesando los datos de los archivos de Figma y proporcionándolos en un formato compatible con React.

🚀 Características

Integración de la API de Figma : conexión directa a la API de Figma para acceder a los archivos de diseño
Salida lista para React : procesa datos de Figma en un formato compatible con React
Procesamiento de estilos : convierte los estilos de Figma en CSS/componentes con estilo
Gestión de activos : gestiona activos de imagen y componentes SVG
Procesamiento de diseño : convierte el diseño automático de Figma a Flexbox
Seguridad de tipos : creado con TypeScript para una verificación de tipos confiable

🛠️ Herramientas proporcionadas

get_file_content :
- Obtiene y procesa el contenido del archivo Figma
- Convierte diseño, estilos y componentes.
- Devuelve la estructura del componente preparada para React GXP1
get_node_images :
- Recupera recursos de imagen de Figma
- Admite múltiples formatos (PNG, JPG, SVG)
- Opciones de escalado configurables GXP2

📦 Instalación

Clonar el repositorio:
git clone https://github.com/yourusername/figma-mcp.git cd figma-mcp
Instalar dependencias:
npm install
Configura tu token de acceso de Figma:
cp .env.example .env # Add your Figma access token to .env

Configuración del IDE del cursor

Crea el archivo .cursor/mcp.json en la raíz de tu proyecto:
mkdir -p .cursor touch .cursor/mcp.json
Para la configuración del servidor basada en Stdio:
{ "mcpServers": { "figma": { "command": "node", "args": ["d:/<folder>>/figma-mcp/build/index.js"], "env": { "FIGMA_ACCESS_TOKEN": "your figma token" }, "disabled": false, "alwaysAllow": [], "protocol": "stdio" } }

}

## 💻 Usage

1. Build the server:
 ```bash
 npm run build
 ```

2. Configure MCP settings based on your IDE:

- For VS Code (global settings):
  ```json
  // In settings.json
  {
    "mcpServers": {
      "figma": {
        "command": "node",
        "args": ["path/to/figma-mcp/build/index.js"],
        "env": {
          "FIGMA_ACCESS_TOKEN": "your-token-here"
        }
      }
    }
  }
  ```

- For Cursor IDE:
  Use the `.cursor/mcp.json` configuration as described in the "Cursor IDE Setup" section above.
  This configuration will take precedence over VS Code settings when using Cursor IDE.

3. Use the MCP tools in your application:
```typescript
// Example: Fetch processed Figma content
const result = await useMcpTool("figma", "get_file_content", {
  fileKey: "your-figma-file-key"
});

🧩 Proyecto de ejemplo

Consulta el directorio raccoon-game para ver un ejemplo completo del uso de este servidor MCP para crear una implementación React con píxeles perfectos de un diseño de Figma.

🔄 Tubería de procesamiento

Entrada : datos del archivo Figma a través de la API oficial
Procesando :
- Conversión de estilo (colores, tipografía, efectos)
- Transformación de diseño (absoluta a Flexbox)
- Mapeo de jerarquía de componentes
- Optimización de activos
Salida : Datos del componente listo para React

📝 Licencia

Licencia MIT

🤝 Contribuyendo

¡Se agradecen las contribuciones! Por favor, lea nuestras normas de contribución.

🙏 Agradecimientos

Equipo de API de Figma para la API integral
Protocolo de contexto de modelo para la especificación MCP

Hecho con ❤️ por [Tu nombre]

This server cannot be installed

security - not tested

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.

Un puente entre los diseños de Figma y las implementaciones de React que permite la conversión con precisión de píxeles de los diseños de Figma en aplicaciones React mediante el procesamiento de los datos de archivos de Figma en un formato compatible con React.

Related MCP Servers

mcp-figma
thirdstrandstudio
-
security
A
license
-
quality
Figma MCP with full API functionality
Last updated -
54
16
TypeScript
MIT License
Figma to React Native MCP
kailashAppDev
-
security
F
license
-
quality
Converts Figma designs to React Native components, allowing users to extract components from Figma designs and generate corresponding React Native components with proper typing and styling.
Last updated -
111
1
TypeScript
FigmaMind MCP Server
joao-loker
-
security
F
license
-
quality
Extracts components from Figma designs and transforms them into standardized JSON format for easy consumption by AI models and tools for interface reconstruction.
Last updated -
TypeScript
MCP Figma to React Converter
StudentOfJS
-
security
A
license
-
quality
Converts Figma designs into React components with TypeScript and Tailwind CSS by extracting components from Figma files and transforming them into ready-to-use code.
Last updated -
14
TypeScript
MIT License

View all related MCP servers

Figma MCP Server