-
securityA
license-
qualityEnables 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 -
79,532
10,969
MIT License
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
.envy 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_dataLas propiedades de los vectores complejos no se conservan por completo
Los gradientes y efectos complejos pueden requerir procesamiento adicional
Licencia
Licencia MIT
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
- AsecurityAlicenseAqualityAn 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 -191,7565,344MIT License
- -securityAlicense-qualityA 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 -815MIT License
- AsecurityAlicenseAqualityImplements a Model Context Protocol integration between Cursor AI and Figma, allowing Cursor to programmatically read and modify Figma designs.Last updated -331,756MIT License