Guía del servidor MCP en Dev Mode – Figma Learn - Centro de ayuda

🚧 El servidor MCP en Dev Mode está actualmente en beta abierta. Es posible que algunas funciones y configuraciones aún no estén disponibles. La función puede cambiar y podrías experimentar bugs o problemas de rendimiento durante el período beta.

Antes de empezar

Quién puede utilizar esta función

El servidor MCP en Dev Mode está en beta abierta.

Disponible en un puesto Dev o Full en los planes Profesional, Organización o Empresa

DebeS utilizar un editor de código o una aplicación que admita Servidores MCP (es decir, VS Code, Cursor, Windsurf, Claude Code)

Solo puedes usar el servidor MCP de Dev Mode desde la aplicación de escritorio de Figma. Descargar la aplicación de escritorio de Figma →

El servidor MCP de Dev Mode integra Figma directamente en tu flujo de trabajo proporcionando información y contexto de diseño cruciales a los agentes de IA que generan código a partir de los archivos de diseño de Figma.

Los servidores MCP son parte de una interfaz estandarizada que permite a los agentes de IA interactuar con las fuentes de datos utilizando el Protocolo de contexto de modelo.

Con el servidor habilitado, puedes:

Generar código desde los marcos seleccionados

Selecciona un marco de Figma y conviértelo en código. Ideal para los equipos de productos que crean nuevos flujos o repiten las funciones de la aplicación.
Extraer contexto de diseño

Introduce variables, componentes y datos de disposición directamente en tu IDE. Esto es especialmente útil para los sistemas de diseño y los flujos de trabajo basados en componentes.
Programa de manera más inteligente con Code Connect

Aumenta la calidad de salida reutilizando tus componentes reales. Code Connect mantiene la coherencia del código generado con el código base.

Más información sobre Code Connect →

Paso 1: activar el Servidor MCP

Abre la aplicación de escritorio de Figma y asegúrate de haberla actualizado a la última versión.
Crea o abre un archivo de Figma Design.
En la esquina superior izquierda, abre el menú de Figma.
En Preferencias, selecciona Habilitar servidor MCP en Dev Mode.

Deberías ver un mensaje de confirmación en la parte inferior de la pantalla que te indique que el servidor está habilitado y funcionando.

El servidor se ejecuta localmente en http://127.0.0.1:3845/sse. Mantén esta dirección a mano para tu archivo de configuración en el siguiente paso.

Paso 2: configura tu cliente MCP

Una vez que el servidor esté funcionando localmente en la aplicación de escritorio de Figma, los clientes MCP podrán conectarse a tu servidor. Para ello, añade lo siguiente al archivo de configuración de tu servidor MCP:

{
  
    "mcpServers": {
    
      "Figma": {

        "url": "http://127.0.0.1:3845/sse"

    }

  }

}

Sigue las instrucciones de tu cliente para añadir el servidor MCP en Dev Mode.

Ve a Code → Configuración → Ajustes o usa el atajo ⌘ ,
En la barra de búsqueda, escribe «MCP».
Selecciona Editar en settings.json.

Añade la siguiente configuración:

"chat.mcp.discovery.enabled": true,
 "mcp": {
   "servers": {
     "Figma Dev Mode MCP": {
       "type": "sse",
       "url": "http://127.0.0.1:3845/sse"
     }
   }
 },
 "chat.agent.enabled": verdadero

Abre la barra de herramientas de chat ⌥⌘B y cambia al modo Agente.
Abre el menú herramienta de selección y busca una sección etiquetada: Servidor MCP: Figma Dev Mode MCP. Si no aparece una lista de herramientas, reinicia la aplicación de escritorio de Figma y VS Code.

Nota: debes tener GitHub Copilot habilitado en tu cuenta para usar MCP en VS Code.

Para obtener más información, consulta la documentación oficial de VS Code.

Abre Cursor → Configuración → Configuración del cursor.
Ve a la pestaña MCP.
Haz clic en + Añadir nuevo servidor MCP global.

Introduce la siguiente configuración y guárdala:

{
  "mcpServers": {
    "Figma": {
      "url": "http://127.0.0.1:3845/sse"
    }
  }
}

Para más información, consulta la documentación oficial del cursor.

Abre Windsurf → Configuración → Configuración de Windsurf o usa el atajo ⌘ ,.
Ve a configuración de Cascade y selecciona Abrir tienda de plugins.
Busca Figma e instala el complemento.
Abra Cascade: deberías ver el servidor MCP de Figma y las herramientas disponibles.

Para obtener más información, consulta la documentación oficial de Windsurf.

Nota: para Windsurf, cambia la propiedad de url en el archivo de configuración a serverUrl para evitar errores.

Abre tu terminal y ejecuta:

claude mcp add --transport sse figma-dev-mode-mcp-server http://127.0.0.1:3845/sse

Usa los siguientes comandos para comprobar la configuración de MCP y administrar servidores:
- Enumera todos los servidores configurados
```
lista de claude mcp
```
- Obtén detalles de un servidor específico
```
claude mcp obtener mi-servidor
```
- Eliminar un servidor
```
claude mcp eliminar mi-servidor
```

Para más información, consulta la documentación oficial de Anthropic.

Una vez configurado, actualiza o inicia el servidor. Debería ver una conexión correcta y las herramientas disponibles. Si la conexión falla o no ves ninguna herramienta, verifica que el servidor esté activo en la aplicación de escritorio de Figma.

Paso 3: indica a tu cliente MCP

El servidor MCP de Dev Mode introduce un conjunto de herramientas que ayudan a los LLMs a traducir diseños en Figma. Una vez conectado, puedes indicarle a su cliente MCP que acceda a un nodo de diseño específico.

Hay dos maneras de proporcionar el contexto de Figma Design a tu cliente de IA:

Basado en la selección

Selecciona un marco o una capa en Figma usando la aplicación de escritorio.
Solicita a tu cliente que te ayude a implementar tu selección actual.

Basado en enlaces

Copia el enlace a un marco o capa en Figma.
Solicita a tu cliente que te ayude a implementar el diseño en la URL seleccionada.

Nota: tu cliente no podrá navegar a la URL seleccionada, pero extraerá la identificación del nodo necesaria para que el servidor MCP identifique sobre qué objeto debe devolver información.

Al utilizar el servidor MCP en Dev Mode, es posible que aparezca una ventana emergente dentro de Figma pidiendo tus comentarios. Utiliza este formulario para compartir tu opinión con nosotros.