Servidor MCP de Figma

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

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:

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:

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

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)

Install Server

HTTP connection URL

security – no known vulnerabilities

license - not found

quality - confirmed to work

How are these scores calculated?

hybrid server

The server is able to function both locally and remotely, depending on the configuration or use case.

Tools

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.

Related MCP Servers

Talk to Figma MCP
sonnylazuardi
A
security
A
license
A
quality
An 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 -
19
2,514
3,528
JavaScript
MIT License
Cursor Talk To Figma MCP
toiletmadarchut
A
security
F
license
A
quality
Enables users to control the cursor in Figma through verbal commands using an agentic AI agent, streamlining the design process with a new interaction method.
Last updated -
19
2,514
1
JavaScript
Talk to Figma MCP
yhc984
-
security
F
license
-
quality
Enables Cursor AI to interact with Figma designs, allowing users to read design information and programmatically modify elements through natural language commands.
Last updated -
TypeScript
Figma MCP Server
1yhy
-
security
A
license
-
quality
A 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 -
124
6
TypeScript
MIT License

View all related MCP servers

Figma MCP Server