Guía para el servidor MCP de Figma

El servidor MCP de Figma ayuda a los desarrolladores a explorar e implementar diseños con rapidez y precisión:

• Obtén contexto del diseño y el código a partir de tus diseños de Figma, FigJam y archivos de Make
• Captura tu UI en tiempo real como capas de diseño, llevando las interfaces que renderiza tu código a 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 para que los agentes de IA interactúen con 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 incorporar Figma en tu flujo de trabajo →

Con el servidor habilitado, puedes hacer lo siguiente:

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

  Convierte la UI 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 remoto de Figma y actualmente solo es compatible con Claude Code, Codex de OpenAI y VS Code.

  Esta función se mejora continuamente. Si surge algún problema, puedes informarnos mediante Fig, nuestro chatbot de soporte, o enviando un correo electrónico al servicio de soporte (planes de pago).

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

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

• Recuperación de 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.

• Recuperación de recursos de Make

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

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

Configuración del servidor MCP

Puede conectar el servidor Figma MCP de dos maneras:

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

Conexión del servidor MCP con 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 agregan 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 proporciona orientación sobre cómo un agente debería completar tareas específicas, utilizando una combinación de llamadas a herramientas MCP e instrucciones detalladas.

Mientras que el servidor MCP de Figma expone herramientas individuales, Skills ayuda 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 puede guiar a los agentes a través de flujos de trabajo como:

• Conectar componentes de diseño de Figma a componentes de código utilizando Code Connect
• Generar reglas de sistema de diseño alineadas con tu base de código 
• Convertir diseños en código listo para producción 

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

Indicación a tu cliente MCP

El servidor MCP de Figma presenta 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.

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

En primer lugar, sigue las instrucciones para instalar el servidor MCP de Figma para tu cliente MCP preferido. Proporcionamos instrucciones para: Proporcionamos instrucciones para lo siguiente:

• 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 agregar servidores MCP. Consulta la tabla en Conectar el servidor MCP a tu editor para obtener los enlaces.

Ejemplo: Obtener el contexto del diseño

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

1. En Figma Design, selecciona la capa para la que deseas obtener el contexto del diseño.
2. En la barra de direcciones de tu navegador, copia 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 UI a Figma

Para enviar la UI en tiempo real de tu app 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 app y captura la UI 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 app web o sitio.
4. Informa a tu cliente cuando hayas terminado. Tu cliente te proporcionará un enlace para abrir el archivo Figma que se creó.

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.