Colección MCP de Figma: Cómo configurar el servidor MCP de escritorio de Figma

El servidor MCP de Figma incorpora el contexto de tus archivos de Figma y tu diseño en tus herramientas de desarrollo agénticas favoritas, como VS Code, Claude Code y Cursor, para mantener tu código alineado con tus especificaciones de diseño.

En esta lección, te explicaremos los pasos para configurar el servidor MCP de escritorio de Figma.

Para utilizar el servidor MCP de escritorio de Figma, necesitarás la app de Figma para escritorio. Así que adelante, descarga la app de escritorio si aún no lo has hecho. Y si ya la tienes, asegúrate de que es la última versión.

Figma también tiene un servidor MCP remoto si prefieres utilizar Figma en el navegador. En cualquier caso, tendrás las herramientas que necesitas para alinear tu código con tus diseños.

¡Ahora aprendamos cómo configurar el servidor MCP!

Configuración del servidor MCP de escritorio

Para comenzar a configurar el servidor MCP de escritorio, sigue estos pasos en Figma:

1. Instala y abre la app de Figma para escritorio.
2. Abre un archivo de Figma Design.
3. Sin seleccionar nada en el lienzo, haz clic en el botón de la barra de herramientas para cambiar a Dev Mode.
4. Luego, haz clic para habilitar el servidor MCP en la barra lateral derecha.
5. Figma mostrará un mensaje de confirmación en la parte inferior de la pantalla para indicarte que el servidor está habilitado y en funcionamiento, y verás un botón para copiar la dirección del servidor.
6. Haz clic en Copiar URL y guárdala para utilizarla en la configuración del siguiente paso.

Ahora, veamos cómo agregar el servidor MCP de Figma a algunas herramientas de desarrollo, como Cursor, VS Code y Claude Code. Asegúrate de instalar las herramientas en tu computadora antes de la configuración. Puedes pasar directamente a la herramienta que vayas a utilizar.

Cursor

Para configurar el servidor MCP de escritorio de Figma con Cursor:

1. Abre la paleta de comandos.
   • macOS: Shift Command P
   • Windows: Shift Ctrl P
2. Busca "Configuración de Cursor".
3. Haz clic en la pestaña MCP.
4. Haz clic en Agregar MCP personalizado.
5. Copia la configuración que aparece a continuación.
6. Luego guarda el archivo y regresa a la configuración.

{
  "mcpServers": {
    "figma-desktop": {
      "url": "http://127.0.0.1:3845/mcp"
    }
  }
}

Verás la herramienta MCP de Figma habilitada en Cursor. Eso significa que ya está todo configurado y listo para comenzar a utilizar el servidor MCP.

Descarga Cursor →

VS Code

Para configurar el servidor MCP de escritorio de Figma en VS Code:

1. Asegúrate de tener habilitado GitHub Copilot. Esto es necesario para utilizar el servidor MCP de Figma.
2. Abre la paleta de comandos y busca "Agregar servidor".
   • macOS: Shift Command P
   • Windows: Shift Ctrl P
3. Selecciona HTTP.
4. Pega la URL del servidor `http://127.0.0.1:3845/mcp en la barra de búsqueda y luego presiona Enter.
5. Escribe "Figma MCP” cuando te pidan un ID de servidor y, luego, presiona Enter.
6. Si tienes un espacio de trabajo abierto, selecciona si deseas agregar el servidor de forma global o solo para el espacio de trabajo. 
7. Una vez confirmado, verás una configuración como esta en tu archivo mcp.json.

Descarga VS Code →

Claude Code

Para configurar el servidor MCP de escritorio de Figma en Claude Code:

1. Abre tu terminal y ejecuta el comando MCP add para Claude CLI claude mcp add --transport http figma-desktop http://127.0.0.1:3845/mcp.
2. Reinicia Claude Code para asegurarte de que se apliquen los cambios de configuración.
3. A continuación, al ejecutar el comando /mcp, verás los nuevos comandos Figma disponibles, así como el servidor MCP de Figma.

Desde aquí, puedes comenzar a crear indicaciones o utilizar herramientas directamente desde Claude Code.

Descarga Claude Code →

Cómo utilizar el servidor MCP de escritorio

Ahora que ya configuraste el servidor MCP de escritorio, aquí tienes algunos consejos sobre cómo funciona.

El servidor MCP funciona según la selección. Esto significa que puede entender qué capas has seleccionado dentro de un archivo de Figma.

Intenta seleccionar una capa en tu archivo de diseño desde la app de escritorio y escribe una indicación para pedirle a la herramienta que genere un componente React basado en la selección. La herramienta de desarrollo agéntica leerá tu selección en el archivo de Figma y generará código basado en el diseño.

Si acabas de empezar y no tienes archivos de diseño para utilizar con las herramientas disponibles, puedes encontrar archivos de ejemplo en la comunidad de Figma o conseguir una copia del sistema de diseño simple oficial de Figma para probar más herramientas.

Conclusión

Una vez configurado el servidor MCP de escritorio de Figma, podrás incorporar el contexto de todos tus diseños directamente en tus herramientas de desarrollo.

¿Deseas configurar el servidor MCP de Figma para editores de código que no se abordan en este video? Consulta el catálogo completo de clientes compatibles aquí.

¿Y sabías que los servidores MCP de Figma funcionan mejor con Code Connect? Code Connect conecta tu código base y Dev Mode, y permite mostrar el código real de los componentes del sistema de diseño en Figma. Encontrarás mucha información sobre Code Connect en la documentación para desarrolladores de Figma.