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

Instalación

Clonar el repositorio:

git clone <repository-url>

Instalar dependencias:

npm install

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

FIGMA_API_KEY=your_figma_api_token_here

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:

Eliminando propiedades innecesarias
Dividir los estilos en grupos (tipografía, colores, maquetación...)
Fusionar estilos similares para reducir la duplicación
Generación automática de nombres de clases CSS

Extracción de tokens

El proceso de extracción de tokens:

Identifica la tipografía y los estilos de color utilizados en el diseño.
Crea convenciones de nombres estandarizadas para cada token
Agrupa tokens por tipo (tipografía o colores)
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

Install Server

HTTP connection URL

security – no known vulnerabilities

license - not found

quality - confirmed to work

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.

Una herramienta que integra Figma con Cursor a través del Protocolo de Contexto de Modelo, permitiendo a los usuarios recuperar, optimizar y convertir datos de diseño de archivos Figma en CSS estructurados y tokens de diseño.

Related MCP Servers

Figma MCP Server
GLips
-
security
A
license
-
quality
Enables Cursor to access Figma files through the Model Context Protocol, enhancing its ability to accurately interpret and utilize design data for code generation.
Last updated -
5
60,738
8,062
TypeScript
MIT License
Talk to Figma MCP
sonnylazuardi
A
security
A
license
A
quality
An MCP server integration that enables Cursor AI to communicate with Figma, allowing users to read designs and modify them programmatically through natural language commands.
Last updated -
19
2,514
3,528
JavaScript
MIT License
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
Cursor Talk to Figma MCP
paragdesai1
-
security
-
license
-
quality
Implements a Model Context Protocol integration between Cursor AI and Figma, allowing Cursor to programmatically read and modify Figma designs.
Last updated -
JavaScript
MIT License

View all related MCP servers

Gravity Global Figma MCP