local-only server
The server can only run on the client’s local machine because it depends on local resources.
Integrations
The MCP server is built with Bun, providing the runtime environment for the server implementation.
Provides tools for creating and modifying Figma designs through natural language prompts, including capabilities to create basic design elements, design complete page layouts, and modify existing designs.
The server is implemented in TypeScript, providing type safety and modern language features for the implementation.
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:
- 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.
- 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
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:
- Abrir Figma
- Vaya a Complementos > Desarrollo > Importar complemento desde el manifiesto
- Seleccione el archivo
figma-plugin/manifest.json
3. Conectarse al Agente Cursor
En el cursor:
- Vaya a Configuración > Agente > Servidores MCP
- Agregue un nuevo servidor con URL:
http://localhost:3000/api/mcp/schema
Documentación detallada
Para obtener instrucciones más detalladas, consulte:
Ejemplo de uso
Una vez que todo esté configurado, puedes usar Cursor Agent para crear diseños con indicaciones como:
Cómo funciona
- Cursor Agent recibe un mensaje en lenguaje natural
- Envía una solicitud MCP estructurada al servidor MCP
- El servidor MCP procesa la solicitud y envía instrucciones al complemento Figma a través de WebSocket
- El complemento Figma ejecuta las operaciones de diseño en Figma
Licencia
Instituto Tecnológico de Massachusetts (MIT)
You must be authenticated.
Un servidor TypeScript que implementa el Protocolo de Contexto de Modelo, lo que permite la creación de diseños impulsados por IA en Figma utilizando indicaciones en lenguaje natural a través de Cursor Agent.