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

🚧 Actualmente, el servidor MCP en Dev Mode está en fase beta abierta. Es posible que algunas funciones y configuraciones aún no estén disponibles. La función puede cambiar y podrías experimentar errores o problemas de rendimiento durante la versión beta.

Antes de empezar

Quién puede utilizar esta función

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

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

Debes usar un editor de código o una aplicación que admite servidores MCP (por ejemplo, VS Code, Cursor, Windsurf, Claude Code).

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

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

Los servidores MCP son parte de una interfaz estandarizada para que los agentes de IA interactúen con fuentes de datos utilizando el Protocolo de contexto de modelo.

Con el servidor habilitado, puedes hacer lo siguiente:

Generar código a partir de marcos seleccionados.

Selecciona un marco de Figma y conviértelo en código. Ideal para equipos de producto que desarrollan nuevos flujos o iteran en las funciones de la aplicación.
Extrae el contexto de diseño

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

Mejora la calidad del resultado reutilizando tus componentes actuales. Code Connect mantiene tu código generado consistente con tu base de código.

Obtén más información sobre Code Connect →

Paso 1: Habilita el Servidor MCP

Abre la aplicación de Figma para escritorio y asegúrate de haber 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 informe que el servidor está habilitado y operativo.

El servidor se ejecuta localmente en http://127.0.0.1:3845/sse. Ten 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 Figma para escritorio, los clientes MCP podrán conectarse a tu servidor. Para hacer esto, 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 para tu cliente específico para añadir el servidor MCP en Dev Mode.

Ve a Código → Configuración → Configuración o usa el atajo ⌘ ,
En la barra de búsqueda, escribe “MCP”.
Selecciona Edit in settings.json.

Agrega 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": true

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

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

Para más detalles, 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.

Ingresa la siguiente configuración y guárdala:

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

Para más detalles, consulta la documentación oficial de Cursor.

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

Para más detalles, 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

Utiliza los siguientes comandos para verificar la configuración de MCP y administrar servidores:
- Enumera todos los servidores configurados
```
claude mcp list
```
- Obtener detalles de un servidor específico
```
claude mcp get my-server
```
- Eliminar un servidor
```
claude mcp remove my-server
```

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

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

Paso 3: Indica a tu cliente MCP

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

Hay dos maneras de proporcionar contexto de diseño de Figma a tu cliente de IA:

Basado en la selección

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

Basado en los 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á el ID de nodo que el servidor MCP necesita para identificar sobre qué objeto debe devolver información.

A medida que uses el servidor MCP en Dev Mode, es posible que veas una ventana emergente dentro de Figma que te solicita feedback. Para brindarlo, usa este formulario.