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

cd figma-mcp-server
cp .env.example .env  # Edit this file to add your Figma token
bun install
bun run index.ts

2. Configurar el complemento Figma

cd figma-plugin
npm install
npm run build

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:

Create a landing page with a header, hero section with heading "Our Product" and subheading "The best solution for your needs", 3 features in the features section, and a footer with contact information.

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)