Figura MCP de Gravity Global Figma

Gravity Global Figma MCP es una herramienta que integra Figma con Cursor a través del Protocolo de Contexto de Modelo (MCP), lo que le permite recuperar y optimizar datos de diseño de Figma para la conversión de código.

Características principales

• Recuperación de datos de Figma : obtenga información de diseño de los archivos de Figma mediante URL o ID de archivo

• Optimización de datos : reduzca el tamaño de JSON eliminando propiedades innecesarias

• Conversión CSS : Divide y organiza automáticamente los estilos en grupos (tipografía, colores, diseños...)

• Generación de nombres de clase CSS : crea automáticamente nombres de clase significativos basados en propiedades

• Extracción de tokens de diseño : extrae tokens de tipografía y color de los diseños de Figma

Related MCP server: Talk to Figma MCP

Instalación

1. Clonar el repositorio:

git clone <repository-url>

2. Instalar dependencias:

npm install

3. Crea un archivo .env y agrega tu token de API de Figma:

FIGMA_API_KEY=your_figma_api_token_here

4. Ejecute el servidor MCP:

node index.js

Uso

En el chat del cursor

Puede utilizar las siguientes herramientas a través de Cursor Chat:

1. Recuperar datos de Figma

Get data from Figma URL https://www.figma.com/file/abc123/my-design?node-id=123-456

Resultado: el MCP devolverá datos de Figma optimizados.

2. Extraer tokens de diseño

Extract typography and color tokens from Figma URL https://www.figma.com/file/abc123/my-design

Resultado: El MCP devolverá un objeto JSON que contiene tokens de tipografía y color extraídos del diseño de Figma.

Ejemplo de respuesta:

{
  "typography": {
    "opensans-600-32": {
      "fontFamily": "Open Sans",
      "fontSize": "32px",
      "fontWeight": 600,
      "lineHeight": "48px"
    },
    "avenirnext-400-16": {
      "fontFamily": "Avenir Next",
      "fontSize": "16px",
      "fontWeight": 400,
      "lineHeight": "24px"
    }
  },
  "colors": {
    "bg-ffffff": "#ffffff",
    "text-030e12": "#030e12"
  }
}

3. Opciones

• Herramienta de diseño figma :

  • fullJson=true : Devuelve datos JSON completos sin comprimir

  • cleanData=true : elimina propiedades innecesarias para la representación HTML/CSS

• Herramienta figmaTokens :

  • tokenTypes=["typography"] : Extrae solo tokens de tipografía

  • tokenTypes=["colors"] : Extrae solo tokens de color

  • tokenTypes=["typography", "colors"] : Extraer ambos (predeterminado)

Ejemplo:

Extract only color tokens from Figma URL https://www.figma.com/file/abc123/my-design

Estructura de datos

Los datos de Figma convertidos tienen la siguiente estructura:

{
  "nodes": {
    "nodeId": {
      "id": "nodeId",
      "name": "Node Name",
      "type": "FRAME",
      "fillStyleId": "style123",
      "layoutStyleId": "style456",
      "children": [...]
    }
  },
  "styles": {
    "style123": {
      "backgroundColor": "#ffffff",
      "opacity": 1,
      "categories": { "colors": "color1" }
    }
  },
  "optimizedStyles": {
    "typography": {...},
    "colors": {...},
    "layout": {...},
    "spacing": {...},
    "sizing": {...}
  },
  "classNames": {
    "style123": "bg-1",
    "style456": "flex-row-1"
  }
}

Detalles técnicos

Recuperación de datos de Figma

La herramienta utiliza la API REST de Figma para obtener datos de diseño. Admite URL tanto de archivos estándar como de nuevos diseños. Puedes especificar un nodo específico mediante node-id .

Optimización de datos

El proceso de optimización incluye estos pasos:

1. Eliminando propiedades innecesarias

2. Dividir los estilos en grupos (tipografía, colores, maquetación...)

3. Fusionar estilos similares para reducir la duplicación

4. Generación automática de nombres de clases CSS

Extracción de tokens

El proceso de extracción de tokens:

1. Identifica la tipografía y los estilos de color utilizados en el diseño.

2. Crea convenciones de nombres estandarizadas para cada token

3. Agrupa tokens por tipo (tipografía o colores)

4. Elimina duplicados y los organiza para una fácil integración con los sistemas de diseño.

Limitaciones

• MCP tiene limitaciones en el tamaño de los datos devueltos; los archivos grandes se guardarán en el directorio figma_data

• Las propiedades de los vectores complejos no se conservan por completo

• Los gradientes y efectos complejos pueden requerir procesamiento adicional

Licencia

Licencia MIT