Servicio MCP para leer y modificar diseños Figma utilizando Cursor.

Introducción general

Cursor Habla con Figma MCP es un proyecto de código abierto que se ha desarrollado a través del Modelo de Protocolo de Contexto (MCP) conecta la herramienta de programación de IA Cursor con el software de diseño Figma. Fue creado por el desarrollador Sonny Lazuardi, está alojado en GitHub y su fecha de lanzamiento es el 17 de marzo de 2025. La función principal de la herramienta es permitir a Cursor leer archivos de diseño Figma y generar código, o modificar directamente el contenido del diseño. Está escrita en TypeScript e incorpora la tecnología WebSocket para la comunicación en tiempo real. Tanto si se trata de convertir rápidamente un diseño en código como de manipular un archivo de diseño con IA, esta herramienta gratuita ayuda a los desarrolladores a ser más eficientes. Cualquiera puede descargar el código y participar en el desarrollo.

perno.nuevo Nueva función activada hace unos días:Convierta diseños Figma en aplicaciones completas con un solo clic

Lista de funciones

• Conexión de Cursor y FigmaComunicación bidireccional: la comunicación bidireccional se realiza mediante el protocolo MCP y WebSocket.
• Leer información sobre el diseño: Obtenga una visión general del archivo Figma, del contenido seleccionado o de los detalles específicos del nodo.
• Creación de elementos de diseño: Añade un rectángulo, marco o nodo de texto a Figma.
• Modificación de estilos y diseñosAjuste los colores, los bordes, las esquinas redondeadas o mueva, redimensione o elimine nodos.
• Generar código: Reduzca el tiempo de escritura manual convirtiendo los diseños Figma en código utilizable.
• Apoyo a la gestión de componentesLectura de componentes locales o de equipo para crear instancias de componentes.
• función de exportaciónExporta nodos de diseño a formato PNG, JPG, SVG o PDF.
• Código abierto y gratuitoEl código es público y los desarrolladores pueden modificarlo u optimizarlo libremente.

Utilizar la ayuda

Proceso de instalación

Para utilizar el MCP de Cursor Talk to Figma, es necesario instalar y configurar varias partes. A continuación se detallan los pasos:

1. Preparar el entorno

• Instalación Bun: Bun es una herramienta para ejecutar JavaScript rápidamente. Si no lo tienes instalado, abre un terminal y escríbelo:

curl -fsSL https://bun.sh/install | bash

• Instalación del cursorDescargue e instale la herramienta de programación Cursor AI desde el sitio web oficial (cursor.ai).
• Obtener ficha FigmaInicia sesión en Figma, genera un código de acceso personal en la configuración de tu cuenta y guárdalo.

2. Descargar el proyecto

• Ejecute el siguiente comando en el terminal para descargar el código del proyecto:

git clone https://github.com/sonnylazuardi/cursor-talk-to-figma-mcp.git

• Vaya al catálogo de proyectos:

cd cursor-talk-to-figma-mcp

3. Instalación de dependencias y configuración

• Ejecutar en el directorio del proyecto:

bun setup

• Esto instala todas las dependencias (incluyendo las librerías TypeScript y WebSocket) y configura automáticamente el servidor MCP en Cursor.

4. Inicie el servidor WebSocket

• Introdúcelo en el terminal:

bun start

• O ejecútelo manualmente:

bun run src/socket.ts

• Esto iniciará el servidor WebSocket para conectar el plugin Figma al MCP.

5. Instalar el plug-in Figma

• Abra la aplicación de escritorio Figma.
• Haga clic en el menú superior "Plugins" > "Desarrollo" > "Nuevo Plugin".
• Seleccione "Enlazar plugins existentes" y localice el plugin src/cursor_mcp_plugin/manifest.json Documentación.
• Tras la confirmación, el plugin aparecerá en la lista de plugins de desarrollo de Figma.

6. Configuración del servidor MCP de Cursor (modo manual)

• en caso de que bun setup No está automatizado, puede configurarse manualmente.
• espectáculo (una entrada) ~/.cursor/mcp.json añada lo siguiente:

{
"mcpServers": {
"TalkToFigma": {
"command": "bun",
"args": ["/path/to/cursor-talk-to-figma-mcp/src/talk_to_figma_mcp/server.ts"]
}
}
}

• intercambiabilidad /path/to/ La ruta real de su proyecto.

Cómo utilizar las principales funciones

Una vez finalizada la instalación, siga los pasos que se indican a continuación:

kit de inicio

1. Ejecutar un servidor WebSocket::
   • En el terminal, escriba bun startAsegúrese de que el servidor está funcionando.
2. Iniciar el plug-in Figma::
   • En Figma, haz clic con el botón derecho en el lienzo y selecciona "Plugins" > "Revelar" > Ejecuta el plugin que acabas de instalar.
   • Cuando se inicie el complemento, escriba join_channel Únete al canal de comunicación.
3. Conectar cursor::
   • Abra Cursor y asegúrese de que el servidor MCP está configurado y en funcionamiento.

Leer información sobre el diseño

• Abra un archivo de diseño en Figma y seleccione la sección que desea manipular.
• Introduzca comandos en el modo "Compositor" del Cursor, por ejemplo:
  • "Obtener información sobre el documento actual": llama a la función get_document_info.
  • "Ver contenido seleccionado": call get_selection.
• El cursor devuelve los datos de diseño, como el diseño, el estilo, etc., a través de MCP.

Creación y modificación de diseños

• Introduzca instrucciones específicas en el Cursor:
  • Crea un rectángulo:create_rectangleEspecifique la ubicación y el tamaño.
  • Añadir texto:create_text, establece el contenido y el tipo de letra.
  • Modifica el color:set_fill_colorSe introduce el valor RGBA.
• Los cambios se reflejan en los archivos Figma en tiempo real.

Generar código

• Pegue un enlace al archivo Figma en el Cursor (p. ej. https://www.figma.com/file/xxx/yyy).
• Introduzca el comando "Generar este diseño del Reaccione Código".
• Cursor leerá el diseño y emitirá el código correspondiente.

Exportar el diseño

• Entra en Cursor:export_node_as_imageEn la tabla siguiente se describe cómo seleccionar el formato (PNG, JPG, etc.).
• El archivo exportado se guarda localmente.

Precauciones de manipulación

• secuencia de conexión: Inicie WebSocket primero, luego ejecute el plugin, y finalmente use Cursor para enviar comandos.
• tratamiento de erroresSi el comando falla, compruebe los registros del terminal para confirmar que la red y los permisos están bien.
• Consejos de rendimiento: Cuando se trate de archivos de gran tamaño, utilice primero la función get_document_info Visualice la vista general y, a continuación, manipule nodos específicos.

El poder de esta herramienta es que hace que el diseño y la codificación sean fluidos. Puedes manipular Figma directamente con IA o generar código rápidamente, eliminando mucho trabajo repetitivo.

escenario de aplicación

1. Creación rápida de prototipos
   Descripción del escenario: Los jefes de producto necesitan validar una idea de diseño. Pueden utilizar Cursor para crear elementos en Figma y luego exportar el código para generar rápidamente un prototipo interactivo.
2. Sincronización de diseño y desarrollo
   Descripción del escenario: Después de que el diseñador ajusta el archivo Figma, el desarrollador lee el último diseño a través de Cursor y actualiza el código en tiempo real para reducir los costes de comunicación.
3. Ajuste automático del estilo
   Descripción del escenario: Los equipos necesitan modificar colores o diseños en bloque. Los desarrolladores pueden utilizar Cursor para introducir comandos y automatizar los ajustes.

CONTROL DE CALIDAD

1. ¿Tengo que pagar por esta herramienta?
   Respuesta: no es necesario. Es un proyecto de código abierto, de uso gratuito, y el código está disponible públicamente en GitHub.
2. ¿Qué lenguajes de programación se admiten para la salida?
   Respuesta: Depende de la capacidad de Cursor, actualmente soporta React, HTML, CSS y otro código front-end común, específico por la lógica de generación de Cursor.
3. ¿Puedo trabajar con más de un archivo Figma al mismo tiempo?
   Respuesta: Sí, pero es necesario añadir un canal diferente para cada archivo (utilizando la función join_channel), asegúrese de que el comando apunta al archivo correcto.