local-only server

The server can only run on the client’s local machine because it depends on local resources.

Integrations

Allows Cursor AI to communicate with Figma for reading designs and modifying them programmatically, including creating elements (rectangles, frames, text), styling (colors, strokes, corner radius), manipulating layout, working with components, and exporting nodes as images.

Cursor Habla con Figma MCP

Este proyecto implementa una integración de Protocolo de Contexto de Modelo (MCP) entre Cursor AI y Figma, lo que permite que Cursor se comunique con Figma para leer diseños y modificarlos programáticamente.

https://github.com/user-attachments/assets/129a14d2-ed73-470f-9a4c-2240b2a4885c

Estructura del proyecto

src/talk_to_figma_mcp/ - Servidor MCP de TypeScript para la integración con Figma
src/cursor_mcp_plugin/ - Complemento de Figma para comunicarse con Cursor
src/socket.ts : servidor WebSocket que facilita la comunicación entre el servidor MCP y el complemento Figma

Empezar

Instala Bun si aún no lo has hecho:

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

Ejecute la instalación, esto también instalará MCP en el proyecto activo de su cursor

bun setup

Iniciar el servidor Websocket

bun start

Instalar el complemento Figma

Configuración e instalación manual

Servidor MCP: Integración con Cursor

Agregue el servidor a su configuración de Cursor MCP en ~/.cursor/mcp.json :

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

Servidor WebSocket

Inicie el servidor WebSocket:

bun run src/socket.ts

Complemento de Figma

En Figma, vaya a Complementos > Desarrollo > Nuevo complemento
Seleccione "Vincular complemento existente"
Seleccione el archivo src/cursor_mcp_plugin/manifest.json
El complemento ahora debería estar disponible en sus complementos de desarrollo de Figma

Uso

Iniciar el servidor WebSocket
Instalar el servidor MCP en Cursor
Abra Figma y ejecute el complemento Cursor MCP
Conecte el complemento al servidor WebSocket uniéndose a un canal usando join_channel
Utilice el cursor para comunicarse con Figma mediante las herramientas MCP

Herramientas MCP

El servidor MCP proporciona las siguientes herramientas para interactuar con Figma:

Documento y selección

get_document_info - Obtener información sobre el documento actual de Figma
get_selection - Obtener información sobre la selección actual
get_node_info - Obtener información detallada sobre un nodo específico

Creando elementos

create_rectangle - Crea un nuevo rectángulo con posición, tamaño y nombre opcional
create_frame - Crea un nuevo marco con posición, tamaño y nombre opcional
create_text - Crea un nuevo nodo de texto con propiedades de fuente personalizables

Estilo

set_fill_color - Establece el color de relleno de un nodo (RGBA)
set_stroke_color : establece el color y el grosor del trazo de un nodo
set_corner_radius : establece el radio de la esquina de un nodo con control opcional por esquina

Diseño y organización

move_node - Mover un nodo a una nueva posición
resize_node - Redimensiona un nodo con nuevas dimensiones
delete_node - Eliminar un nodo

Componentes y estilos

get_styles - Obtener información sobre estilos locales
get_local_components - Obtener información sobre los componentes locales
get_team_components - Obtener información sobre los componentes del equipo
create_component_instance - Crea una instancia de un componente

Exportación y Avanzado

export_node_as_image : exporta un nodo como imagen (PNG, JPG, SVG o PDF)
execute_figma_code - Ejecuta código JavaScript arbitrario en Figma (úselo con precaución)

Gestión de conexiones

join_channel - Únete a un canal específico para comunicarte con Figma

Desarrollo

Construyendo el complemento de Figma

Navegue hasta el directorio de complementos de Figma:
cd src/cursor_mcp_plugin
Editar code.js y ui.html

Mejores prácticas

Al trabajar con Figma MCP:

Únase siempre a un canal antes de enviar comandos
Obtenga la descripción general del documento usando get_document_info primero
Verifique la selección actual con get_selection antes de realizar modificaciones
Utilice herramientas de creación adecuadas según sus necesidades:
- create_frame para contenedores
- create_rectangle para formas básicas
- create_text para elementos de texto
Verificar cambios usando get_node_info
Utilice instancias de componentes cuando sea posible para mantener la coherencia
Maneje los errores apropiadamente ya que todos los comandos pueden generar excepciones

Licencia

Instituto Tecnológico de Massachusetts (MIT)

This server cannot be installed

-

security - not tested

F

license - not found

-

quality - not tested

Permite que Cursor AI interactúe con los diseños de Figma, lo que permite a los usuarios leer información de diseño y modificar elementos programáticamente a través de comandos de lenguaje natural.

Talk to Figma MCP