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]

Figma MCP Server

Integrations