Protocolo de contexto del modelo (MCP) de Figma

Una solución completa para crear y modificar diseños de Figma a través de Cursor Agent usando el Protocolo de Contexto de Modelo.

Blog: https://xflux.us/2025/04/06/diseño-automatizado-con-ai-construyendo-una-figma-mcp-con-cursor/

Descripción general

Este proyecto permite la creación de diseños con IA en Figma mediante indicaciones en lenguaje natural a través del Agente Cursor. Consta de dos componentes principales:

1. Servidor MCP : un servidor Bun + TypeScript que implementa el Protocolo de contexto de modelo y se comunica con el complemento Figma a través de WebSockets.

2. Complemento de Figma : un complemento que se ejecuta en Figma y ejecuta operaciones de diseño según las instrucciones del servidor MCP.

Con esta integración, puedes utilizar lenguaje natural para:

• Crear elementos de diseño básicos (formas, texto, etc.)

• Diseña diseños de página completos con múltiples secciones

• Modificar diseños existentes

Related MCP server: Figma MCP Server

Estructura del repositorio

• figma-mcp-server/ : La implementación del servidor MCP

• figma-plugin/ : El complemento de Figma para ejecutar operaciones de diseño

Inicio rápido

1. Configurar el servidor MCP

2. Configurar el complemento Figma

Luego importa el complemento a Figma:

1. Abrir Figma

2. Vaya a Complementos > Desarrollo > Importar complemento desde el manifiesto

3. Seleccione el archivo figma-plugin/manifest.json

3. Conectarse al Agente Cursor

En el cursor:

1. Vaya a Configuración > Agente > Servidores MCP

2. Agregue un nuevo servidor con URL: http://localhost:3000/api/mcp/schema

Documentación detallada

Para obtener instrucciones más detalladas, consulte:

• README del servidor MCP

• Guía de configuración del complemento Figma

Ejemplo de uso

Una vez que todo esté configurado, puedes usar Cursor Agent para crear diseños con indicaciones como:

Cómo funciona

1. Cursor Agent recibe un mensaje en lenguaje natural

2. Envía una solicitud MCP estructurada al servidor MCP

3. El servidor MCP procesa la solicitud y envía instrucciones al complemento Figma a través de WebSocket

4. El complemento Figma ejecuta las operaciones de diseño en Figma

Licencia

Instituto Tecnológico de Massachusetts (MIT)