4 formas en que usamos nuestro servidor MCP en Figma

Dos meses después de abrir el lienzo a los agentes, el servidor Figma MCP ya funciona en Figma Slides, FigJam, Figma Make y el nuevo agente de Figma. Eso significa que las presentaciones, los tableros de FigJam y los prototipos de Make pueden crearse o actualizarse a partir de una indicación. El servidor MCP también admite fuentes personalizadas y te permite descargar imágenes e íconos —como SVG, PDF, JPG o PNG— desde archivos de diseño mediante la nueva herramienta download_assets.

Estos son cuatro flujos de trabajo que los Figmates están utilizando actualmente con estas nuevas capacidades.

1. Crear y actualizar presentaciones en Figma Slides

Mallory Dean, impulsora de diseñadores de Figma, mantiene una presentación permanente sobre los lanzamientos de productos de IA de Figma. Se trata de una presentación viva que actualiza cada pocas semanas para que el contenido que presenta en charlas de diseño y reuniones con clientes se mantenga al día a medida que lanzamos novedades.

Después del lanzamiento del agente de Figma, escribió esta indicación en su editor de código: "Actualiza mi presentación de Figma AI para incluir nuestro nuevo agente de Figma. Extrae contenido de Slack, Google Drive, nuestro blog Shortcut y la página de Release Notes. Dame sugerencias sobre qué actualizar, además de ideas para nuevas diapositivas". El agente recopiló conversaciones, briefs y mensajes de lanzamiento relevantes, y luego utilizó la herramienta use_figma, junto con laskill /figma-use-slides en Figma Slides, para actualizar la presentación según su plantilla.

Las nuevas diapositivas todavía requerían una revisión final, reemplazar imágenes de marcadores de posición y editar algunos textos, pero el 80 % del trabajo de contenido ya estaba hecho cuando ella comenzó a trabajar. Con nuestra nueva compatibilidad con fuentes personalizadas, el agente renderizó los textos utilizando las fuentes personalizadas cargadas por ella, en lugar de aproximaciones seguras para la web, de modo que la presentación mantuviera la identidad de la marca.

Esta misma configuración aparece en todo el proceso de desarrollo de productos, tanto si estás creando algo desde cero como si estás actualizando un documento existente. Un PM creando una presentación de lanzamiento. Un diseñador presentando una exploración de diseño. El equipo de marketing elaborando un plan de GTM para una funcionalidad. El equipo de ventas actualizando una presentación orientada al cliente con los últimos cambios del producto. El trabajo no solo es más rápido: también mantiene la identidad de la marca y se construye a partir del sistema de diseño del equipo.

2. Generar tableros de FigJam a partir de datos en vivo

Como gerente de producto en Figma, Prasant Lokinendi organiza con frecuencia talleres de lanzamiento de funcionalidades. Preparar un FigJam atractivo para estos talleres —recopilar contexto de toda la empresa y dar formato a las secciones para adaptarlas a la sesión— lleva tiempo. Por eso creó /figjam-builder, una skill personalizada que conserva esas instrucciones para no tener que volver a escribirlas cada vez.

Para el lanzamiento de Make Voice to Text a principios de este año, le pidió a su agente que generara un tablero de FigJam utilizando contexto obtenido de Slack, Asana y Notion para la estructura del proyecto, así como de Hex para la analítica. En lugar de partir de un FigJam vacío, comenzó con la información más actualizada, incluida la visión del producto, el insight sobre los clientes y las decisiones clave.

3. Mueve diseños entre el código y el lienzo con Figma Make

El servidor MCP ahora también funciona en Figma Make, cerrando el ciclo desde las ediciones de diseño hasta la PR de producción sin salir de Figma. Iris Lin, una diseñadora de productos en Figma, utiliza este flujo de trabajo en proyectos reales.

Por ejemplo, cuando Iris y un compañero de equipo crearon recientemente un editor de audio de muestra como archivo de demostración, su compañero entregó una primera versión, pero Iris quería actualizar los diseños. Las interacciones son difíciles de mostrar en un archivo estático, por lo que creó una rama del código y desarrolló la experiencia real en Figma Make: clips de audio que se pueden arrastrar y reordenar, una ventana emergente con controles de nivel y un cabezal de reproducción que se desplaza por la pista.

Como Iris quería aplicar cambios de su sistema de diseño al archivo de demostración, llevó la vista previa de Make al lienzo mediante una indicación en Make: "¿Puedes traer esta vista previa aquí, a Figma, como capas de diseño?". La pantalla apareció en el lienzo, reconstruida con los componentes correspondientes de su biblioteca. Iris modificó el componente del clip de audio siguiendo sus patrones de diseño habituales en el lienzo, dándole estados claros de predeterminado, hover y arrastre. Luego lo envió en la otra dirección: "Devuelve esos nuevos estados al código". El agente leyó sus cambios de diseño e incorporó los tres al componente, listo para enviarlo a GitHub como una PR.

Este flujo de trabajo te permite controlar lo que se lanza, todo desde Figma. El agente lee y escribe tus componentes reales en ambos extremos, del mismo modo en que Code Connect vincula tu biblioteca con el código de producción. Las decisiones de diseño que antes perdían fidelidad entre la entrega y la revisión ahora llegan intactas hasta la PR.

4. Divide el trabajo con el agente de Figma

Como gerente de producto responsable del servidor Figma MCP, Yarden Katz sabe cómo llevar nuestro MCP al límite. Un caso al que vuelve una y otra vez es una pantalla que solo existe en el código, sin ninguna representación en el lienzo. El objetivo es llevarla a Figma, asociarla al sistema de diseño adecuado y permitir que los diseñadores trabajen con ella.

Trabajando a partir de una aplicación de ejemplo con un flujo de inicio de sesión y un panel, escribió esta indicación desde su editor de código: "Empuja este panel y el flujo de inicio de sesión a Figma. Reutiliza mis componentes y variables existentes siempre que sea posible, y genera los conjuntos de componentes y las variantes adecuados cuando no existan". El plugin de Figma incluye skills que proporcionan al agente contexto sobre cómo utilizar Figma, por lo que pudo leer su biblioteca tanto en Figma como en su base de código y decidir qué reutilizar y qué crear, en lugar de duplicar trabajo que ella ya había realizado.

Le dio una primera versión sólida, no un resultado terminado. La disposición automática, las fuentes y algunos colores sin asignar todavía requerían trabajo. Ahí fue donde intervino el agente de Figma: trabajando junto a ella en el lienzo y con un conocimiento profundo de su sistema de diseño. Le pidió que corrigiera la disposición, ajustara la tipografía y asignara cada color a la variable correspondiente. Cuando quedó como ella quería, lo devolvió al código a través del servidor MCP. Si era necesario, también podía obtener imágenes fuente e íconos directamente desde el agente mediante nuestra nueva herramienta download_assets, sin necesidad de exportarlos por separado.

En este caso de uso, el servidor MCP y el agente de Figma trabajan en equipo para llegar a los diseños finales. El servidor conecta Figma con el agente que ya estás utilizando y lleva una pantalla basada únicamente en código al lienzo, construida a partir de componentes reales. A partir de ahí, el agente de Figma toma el relevo. Al ser nativo del lienzo, explora distintas direcciones mientras se mantiene basado en tus componentes y tokens, justo donde tú y tu equipo diseñan.

El agente de Figma y la integración con la base de código de producción de Figma Make se encuentran actualmente en beta cerrada. Las capacidades de escritura del servidor Figma MCP están disponibles en beta abierta. Consulta nuestra guía de configuración para empezar; nos encantaría ver lo que creas.