4 formas de usar nuestro servidor MCP en Figma

Dos meses después de abrir el lienzo a los agentes, el servidor MCP de Figma ya funciona en Figma Slides, FigJam, Figma Make y el nuevo agente de Figma. Esto significa que las presentaciones, las pizarras de FigJam y los prototipos de Make se pueden crear o actualizar con una simple indicación. El servidor MCP también admite fuentes personalizadas y te permite descargar imágenes e iconos —en formato SVG, PDF, JPG o PNG— desde los archivos de diseño mediante la nueva herramienta download_assets.

Aquí tienes cuatro flujos de trabajo que los Figmates están utilizando ahora mismo gracias a estas nuevas capacidades.

1. Crear y actualizar presentaciones en Figma Slides

Mallory Dean, impulsora de diseñadores en Figma, tiene una presentación siempre actualizada sobre los lanzamientos de productos de IA de Figma. Es una presentación en constante evolución que actualiza cada pocas semanas para que lo que presenta en charlas de diseño y reuniones con clientes esté siempre al día a medida que lanzamos novedades.

Después de que lanzamos el agente de Figma, ella 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 de Shortcut y la página web de Release Notes. Dame sugerencias sobre qué actualizar, además de ideas para nuevas diapositivas“. El agente extrajo conversaciones, resúmenes y mensajes de lanzamiento relevantes, y después usó la herramienta use_figma, así como la habilidad /figma-use-slides en Figma Slides para actualizar la presentación según su plantilla.

Las nuevas diapositivas aún necesitaban una revisión, imágenes para sustituir los marcadores y correcciones de texto, pero el 80 % del trabajo de contenido ya estaba hecho cuando ella entró en escena. Gracias a nuestra nueva compatibilidad con fuentes personalizadas, el agente renderizó el texto con las fuentes que ella había subido —en lugar de aproximaciones aptas para la web—, por lo que la presentación se mantuvo fiel a la imagen de marca.

Esta misma configuración se repite a lo largo de todo el proceso de desarrollo del producto, tanto si estás creando algo desde cero como si estás actualizando un documento ya existente. Un gerente de producto creando una presentación inicial. Un diseñador presentando una exploración de diseños. El equipo de marketing elaborando un plan de lanzamiento al mercado para una función. El equipo de ventas actualizando una presentación para los clientes con los últimos cambios del producto. El trabajo no solo es más rápido, sino que además se ajusta a la imagen de marca, ya que se basa en el sistema de diseño de tu equipo.

2. Generar pizarras FigJam a partir de datos en tiempo real

Como gerente de producto en Figma, Prasant Lokinendi suele organizar talleres de lanzamiento de nuevas funciones. Preparar un FigJam atractivo para estos talleres —recopilando información de toda la empresa y adaptando las secciones al formato de la sesión— lleva tiempo. Por eso creó /figjam-builder, una habilidad personalizada que guarda esas instrucciones para que no tenga que volver a introducirlas cada vez.

Para nuestro lanzamiento de la función de voz a texto de Make a principios de este año, le indicó a su agente que creara un tablero de FigJam a partir del contexto extraído de Slack, Asana y Notion para la estructura del proyecto, y de Hex para los análisis. En lugar de empezar con un FigJam en blanco, partió de los datos más actualizados, incluyendo la visión del producto, los datos sobre los clientes y las decisiones clave.

3. Pasar diseños del código al 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 solicitud de extracción de producción sin salir nunca de Figma. Este flujo de trabajo te permite controlar lo que se envía, todo desde dentro de Figma.

Por ejemplo, cuando Iris y un compañero de equipo crearon hace poco un editor de audio de muestra como archivo de demostración, su compañero lanzó una primera versión, pero Iris quería actualizar los diseños. Las interacciones son difíciles de mostrar en un archivo estático, así que creó una rama del código y desarrolló el proyecto real en Figma Make: clips de audio que puedes arrastrar y reordenar, una ventana emergente con controles de nivel y un indicador de reproducción que se desplaza.

Dado que Iris quería hacer cambios en su sistema de diseño para su archivo de demostración, incorporó la vista previa de Make al lienzo escribiendo lo siguiente en el cuadro de indicaciones de Make: “¿Puedes volver a traer la vista previa aquí, a Figma, como capas de diseño?” La pantalla apareció en el lienzo, reconstruida con los componentes pertinentes de su biblioteca. Iris modificó el componente del clip de audio siguiendo sus patrones de diseño habituales en el lienzo, dotándolo de un estado bien definido: predeterminado, al pasar el cursor y al arrastrar. A continuación, lo envió en la otra dirección: “Extrae esos nuevos estados y vuelve a incorporarlos al código”. La agente revisó los cambios de diseño e incorporó los tres al componente, listo para subirlo a GitHub como una solicitud de extracción.

Este flujo de trabajo te da control sobre lo que se envía, todo desde dentro de Figma. El agente lee y escribe tus componentes reales en ambos extremos, de la misma forma que Code Connect asigna tu biblioteca al código de producción. Las decisiones de diseño que antes perdían fidelidad entre el traspaso y la revisión ahora llegan hasta la solicitud de extracción.

4. Repartir el trabajo con el agente de Figma

Como gerente de producto detrás del servidor MCP de Figma, Yarden Katz sabe sabe cómo llevar nuestro MCP al límite. Un caso al que siempre vuelve es el de una pantalla que existe únicamente en código, sin ninguna representación en el lienzo. El objetivo es incorporarla a Figma, vinculada al sistema de diseño adecuado, para que los diseñadores puedan trabajar con ella.

Partiendo de una aplicación de ejemplo con un flujo de inicio de sesión y un panel, indicó desde su editor de código: “Incorpora este panel y el flujo de inicio de sesión a Figma. Reutiliza mis componentes y variables existentes cuando los haya, y genera los conjuntos de componentes y variables adecuados cuando no los haya“. El plugin de Figma incluye habilidades que proporcionan al agente contexto sobre cómo usar Figma, así que leyó su biblioteca tanto en Figma como en su base de código y decidió qué componentes reutilizar y qué crear desde cero, en lugar de duplicar el trabajo que ella ya había hecho.

Esto le permitió conseguir un primer borrador sólido, aunque no definitivo. La disposición automática, las fuentes y algunos colores sin asignar aún necesitaban trabajo. Ahí es donde entró en acción el agente de Figma: trabajando a su lado en el lienzo con un profundo conocimiento de su sistema de diseño. Ella le indicó que arreglara el diseño, corrigiera la tipografía y asignara cada color a la variable correcta. Cuando quedó como ella quería, lo volvió a enviar al código a través del servidor MCP. Si fuera necesario, también podría descargar imágenes e iconos directamente desde el agente con nuestra nueva herramienta download_assets sin tener que 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 con el que ya estás trabajando y lleva al lienzo una pantalla compuesta únicamente por código, creada a partir de componentes reales. A partir de ahí, el agente de Figma se encarga del resto. Al ser nativo del lienzo, explora diferentes opciones sin perder de vista tus componentes y tokens, justo donde tú y tu equipo diseñáis.

El agente de Figma y la integración de la base de código de producción de Figma Make se encuentran actualmente en fase beta cerrada. Las capacidades de escritura en el servidor MCP de Figma están en fase beta abierta; consulta nuestra guía de configuración para empezar y estaremos encantados de ver tus creaciones.