El servidor MCP remoto de Figma te permite conectarte directamente a un servidor MCP alojado por Figma. Luego, puedes utilizar el contexto de tus archivos de diseño de Figma para mejorar tus flujos de trabajo en tus herramientas de desarrollo de IA favoritas y crear más rápidamente.
El uso del servidor MCP remoto es una excelente opción si prefieres utilizar Figma en el navegador o si no puedes utilizar la app app de Figma para escritorio. Si prefieres utilizar la app de escritorio, consulta nuestra lección sobre cómo configurar el servidor MCP de escritorio .
No importa qué versión del servidor MCP elijas utilizar, tendrás acceso a las herramientas que necesitas para alinear tu código con tus especificaciones de diseño.
En esta lección, te explicaremos cómo configurar el servidor MCP remoto de Figma en estas herramientas de desarrollo. Luego, te mostraremos cómo utilizar el servidor MCP de Figma para pasar el contexto desde tus archivos de Figma Design. ¡Empecemos!
Configuración
Para configurar el servidor MCP remoto de Figma, es necesario que configures tus herramientas de desarrollo preferidas.
Independientemente de la herramienta que utilices, solo tendrás que configurar el servidor MCP utilizando esta URL: https://mcp.figma.com/mcp, donde Figma aloja el servidor MCP.
//La configuración correcta del servidor MCP remoto
{
"mcpServers": {
"FigmaRemoteMcp": {
"url": "<http://mcp.figma.com/mcp>"
}
}
}
Para comenzar:
- Crea o abre un archivo de Figma Design desde el navegador.
- Sin seleccionar nada en el lienzo, cambia a Dev Mode.
- En el panel de inspección derecho, haz clic en "Configurar un cliente MCP".
Aquí encontrarás las configuraciones para configurar diferentes herramientas de desarrollo, como VS Code, Claude Code y Cursor. Veremos cada uno de ellos en este video.
Puedes pasar directamente a la herramienta que vayas a utilizar. Y recuerda instalar VS Code o Cursor en tu computadora si decides utilizarlos como herramienta de desarrollo. Para Claude Claude, configuraremos el servidor MCP de Figma utilizando el terminal, pero asegúrate de ejecutar npm install para instalar Claude Code en tu computadora de antemano.
Cursor
Para configurar el servidor remoto MCP en Cursor:
- En el menú de configuración de MCP en Dev Mode selecciona Cursor en la barra lateral.
- Haz clic en el botón Agregar, que te llevará a la página de configuración de MCP en Cursor.
- Verifica que la URL sea correcta:
https://mcp.figma.com/mcp, luego haz clic en Instalar. - Haz clic en Conectar para pasar por el proceso de autenticación.
- Haz clic en Abrir si Cursor te pide confirmación.
Verás que el servidor MCP de Figma está habilitado en Cursor y listo para usar.
VS Code
Para configurar el servidor MCP remoto en VS Code:
- En el menú de configuración de MCP en Dev Mode, selecciona VS Code en la barra lateral.
- Haz clic en el botón Agregar, que te llevará a la página de instalación del servidor MCP de Figma para VS Code.
- Verifica que la URL sea correcta:
https://mcp.figma.com/mcp, luego haz clic en Instalar. - Completa el proceso de autenticación con tu cuenta de Figma para permitir que VS Code acceda a ella.
- Después de la autenticación, el servidor MCP de Figma se instala en VS Code.
- Abre la paleta de comandos y busca "MCP: Open User Configuration".
- Selecciónalo para abrir el archivo
mcp.jsony verás que el servidor ya se está ejecutando.
{
"inputs": [],
"servers": {
"figmaRemoteMcp": {
"url": "<https://mcp.figma.com/mcp>",
"type": "http"
}
}
}
Claude Code
Por último, configuraremos el servidor MCP en Claude Code.
Primero, abre la terminal y ejecuta este comando MCP add para agregar el MCP de Figma a Claude Code.
claude mcp add --transport http figma-remote-mcp <https://mcp.figma.com/mcp>
- Luego, reinicia Claude Code si estaba en ejecución.
- Puedes escribir
/mcpen Claude para administrar todos tus servidores MCP. - Presiona Enter para iniciar sesión en Figma si el servidor
figma-remote-mcpmuestra que actualmente está desconectado. - Presiona Enter y luego haz clic en Permitir acceso para autenticar y permitir que Claude Code acceda a tu cuenta de Figma.
- Una vez finalizada la autenticación, verás un mensaje de confirmación en Claude Code.
- Para confirmar que el servidor remoto MCP de Figma está conectado, utiliza el comando
/mcpde nuevo.
El servidor figma-remote-mcp aparecerá ahora como conectado. ¡Felicitaciones! Ya puedes comenzar a crear indicaciones en Claude Code.
Uso del servidor MCP
Para comenzar a utilizar el servidor MCP, necesitas:
- Un puesto Full o Dev (otros puestos pueden tener límites de uso con el servidor MCP)
- Un archivo de Figma Design, Figma Make o FigJam
- Editar o ver solo permisos para ese archivo. Si otra persona es propietaria del archivo que tu equipo desea utilizar, simplemente pídele que lo comparta contigo primero.
El servidor MCP remoto de Figma funciona mediante enlaces. Esto significa que debes proporcionar el contexto del enlace o la selección que deseas que utilice el servidor MCP, copiándolo de un archivo y pegándolo en la herramienta que elijas.
Para obtener el enlace de un objeto, selecciona una capa o un marco en cualquiera de tus archivos de Figma Design.
- Haz clic derecho en una capa.
- Elige copiar enlace a la selección. También puedes copiar la URL a esa capa desde la barra de direcciones de tu navegador. Esto incluirá el ID del nodo del objeto en tu archivo.
- Luego, pega la URL en tu herramienta de desarrollo para que tu indicación se limite a ese nodo.
También puedes utilizar la URL completa del archivo si no tienes nada seleccionado en el lienzo y copiar la URL desde la barra de direcciones. Esto te permite extraer el contexto de todo el archivo de Design. Si utilizas el servidor MCP con Figma Make, es probable que desees pasar la URL completa del archivo utilizando este método.
Conclusión
Ahora que ya tienes configurado el MCP remoto de Figma en tu editor de código, ya puedes comenzar a crear y codificar con contexto e información adicionales directamente desde tus archivos de Figma Design.
¿Deseas configurar el servidor MCP de Figma en otros editores de código? Consulta nuestra documentación para desarrolladores para obtener más información.
Los servidores MCP de Figma funcionan mejor con Code Connect para mantener tu código base consistente con tu sistema de diseño. Consulta nuestra documentación de Code Connect para obtener más información.