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

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