Guía para el servidor MCP de Figma

El servidor MCP de Figma ayuda a los desarrolladores a explorar e implementar diseños de manera rápida y precisa:

• Obtén contexto de diseño y código a partir de tus diseños de Figma, FigJam y archivos Make
• Captura tu IU en tiempo real como capas de diseño, llevando las interfaces renderizadas por tu código a los archivos de Figma Design
• Mejora tu forma de trabajar con componentes de diseño y Code Connect

Las herramientas del servidor MCP de Figma aportan contexto adicional de Figma a tu flujo de trabajo, de modo que tu código no solo se adapta a los sistemas existentes, sino también a tu diseño.

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.

Consulta nuestra colección MCP de Figma para obtener más información sobre el servidor MCP y cómo integrar Figma a tu flujo de trabajo →

Con el servidor habilitado, puedes:

• Genera diseños de tus aplicaciones y sitios web a partir de la IU en tiempo real

  Convierte la IU en tiempo real de tu navegador (producción, entorno de pruebas o localhost) en capas de diseño editables en Figma. Envía páginas, elementos o flujos completos a Figma Design para su exploración, alineación y perfeccionamiento.

  Nota: Esta función requiere el servidor MCP de Figma remoto y actualmente solo es compatible con Claude Code, Codex de OpenAI y VS Code.

  Esta característica se está mejorando continuamente. Si surge algún problema, puedes informarnos mediante Fig, nuestro chatbot de asistencia, o enviando un correo electrónico al servicio de asistencia (planes de pago).

  Más información sobre cómo generar diseños a partir de tus interfaces

• 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.

• Recuperar recursos de FigJam

  Accede al contenido de tus diagramas de FigJam y utilízalo en tu flujo de trabajo de generación de código. Incorpora ideas en fase inicial, flujos o mapas de arquitectura directamente en el desarrollo.

• Recuperar recursos de Make

  Recopila recursos de código de los archivos de Make y proporciónaselos al LLM como contexto. Esto puede resultarte útil a medida que pasas del prototipo a la aplicación de producción.

• Mantén la coherencia de los componentes de tu sistema de diseño 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

Configurar el servidor MCP

Puedes conectar el servidor MCP de Figma de dos maneras:

• Servidor MCP remoto: se conecta directamente al terminal alojado de Figma en https://mcp.figma.com/mcp. Aprende a instalar el servidor MCP remoto.
• Servidor MCP de escritorio: se ejecuta localmente a través de la aplicación de escritorio de Figma. Aprende a instalar el servidor MCP de escritorio.

Conecta el servidor MCP a tu editor

Sigue las instrucciones de tu editor específico para conectarte al servidor MCP de Figma, ya sea de forma local o remota. Algunos clientes también son compatibles con Skills, que añaden instrucciones a nivel de agente para ayudar a las herramientas de IA a funcionar de forma más eficaz con los diseños de Figma:

Acerca de Skills

Skills proporcionan orientación sobre cómo un agente debería completar tareas específicas, usando una combinación de llamadas a herramientas MCP e instrucciones detalladas.

Mientras que el servidor MCP de Figma expone herramientas individuales, Skills ayudan a los agentes a comprender qué herramientas utilizar, cómo secuenciarlas y cómo aplicar los resultados cuando se trabaja con diseños de Figma.

Skills pueden guiar a los agentes a través de flujos de trabajo como:

• Conecta componentes de Figma Design a componentes de código usando Code Connect
• Generar reglas del sistema de diseño alineadas con tu base de código 
• Traduce diseños en código listo para producción 

Skills no reemplazan las conexiones MCP ni añaden nuevas capacidades MCP. Reducen la configuración y las conjeturas al agrupar los flujos de trabajo recomendados en instrucciones reutilizables.

Indica a tu cliente MCP

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

Para una lista completa de herramientas y ejemplos, consulta Herramientas e indicaciones.

Primero, sigue las instrucciones para instalar el servidor MCP de Figma para tu cliente MCP preferido. Proporcionamos instrucciones para:

• Claude Code
• Codex de OpenAI
• Cursor
• VS Code

Para otros clientes MCP, sigue las instrucciones que figuran en la documentación de tu cliente para añadir servidores MCP. Consulta la tabla en Conectar el servidor MCP a tu editor para obtener los enlaces.

Ejemplo: Obtener contexto de diseño

Para obtener el contexto del diseño y el código de los archivos se utiliza un enlace. Para obtener contexto de diseño:

1. En Figma Design, selecciona la capa para la que deseas obtener contexto de diseño.
2. En la barra de direcciones de tu navegador, copie el enlace a un marco o capa en Figma.

3. En tu cliente MCP, pega la URL y solicita a tu cliente que te ayude a implementar el diseño.

   

Ejemplo: Enviar la IU a Figma

Para enviar la IU en tiempo real de tu aplicación web o sitio web a Figma, debes ponerte en contacto con tu cliente MCP:

1. Indica a tu cliente MCP: “Inicia un servidor local para mi aplicación y captura la IU en un nuevo archivo Figma“.
2. Sigue los pasos que te indique tu cliente. Tu cliente abrirá una ventana del navegador para ti o te proporcionará un enlace que deberás seguir.
3. Utilice la barra de herramientas de captura para capturar páginas, elementos y estados de tu aplicación web o sitio web.
4. Informa a tu cliente cuando hayas terminado. Tu cliente te proporcionará un enlace para abrir el archivo Figma que se ha creado.

Mejorar el rendimiento del servidor MCP

Para obtener el mejor resultado, recomendamos establecer reglas que sirvan de guía al agente. Para empezar, tenemos algunas reglas de ejemplo útiles.