Figma lanza Specs: documentos Markdown para equipo y agentes

Figma lanza Specs: documentos Markdown para equipo y agentes
Fuente: figma.com

Figma ha lanzado Specs, un documento en Markdown que vive dentro del lienzo de Figma y FigJam y que leen tanto el equipo como los agentes de IA. Lo anunció el 15 de octubre en Config India, en Bengaluru, junto con la beta abierta de Specs para planes de pago, la beta abierta de las capas de código y la integración de Payload, el gestor de contenidos que compró el año pasado.

Markdown es el formato de texto plano con almohadillas para títulos y guiones para listas. Es el que usan casi todos los agentes de IA para recibir contexto: un CLAUDE.md, una guía de estilo, un documento de producto. Figma quiere que esos archivos dejen de vivir sueltos en el portátil de cada uno.

Puntos clave

  • Specs: documento Markdown colaborativo sobre el lienzo. Se crea pulsando la tecla D o desde el icono de Specs en la barra de herramientas. Beta abierta en planes de pago, en web, escritorio y móvil.
  • Capas de código: prototipos con código real dentro del lienzo, ahora en beta abierta. Crear y editar capas de código es gratis en planes de pago hasta el 4 de noviembre.
  • Payload en Figma Make: Make monta un backend con gestor de contenidos, base de datos, imágenes, API, usuarios y panel de administración. Para todos los planes.
  • Conexiones (MCP): el servidor MCP de Figma, que es la conexión estándar entre Figma y herramientas de IA como Claude Code, ChatGPT o Cursor, suma 20 integraciones nuevas y gasta menos tokens.

Qué es Specs y qué resuelve

La explicación de Figma es sencilla de seguir. Cada vez más gente trabaja con agentes, y con los agentes se trabaja en Markdown. El problema es que esos archivos son de una sola persona, viven en local, se relacionan mal entre sí y pierden el vínculo con el proyecto del que salieron.

Specs mete ese texto en el lienzo, al lado de los diseños que describe. Dentro de un spec se puede incrustar un tablero de FigJam, un frame, una capa de código o cualquier elemento del lienzo, de forma que el texto y el diseño están juntos en vez de en capturas o enlaces que caducan.

Para importar lo que ya tienes, basta con arrastrar cualquier archivo .md al lienzo y se convierte en un spec. También se puede duplicar un spec para que cada persona del equipo trabaje su versión antes de decidir.

El agente entra en la conversación

Lo más interesante es cómo trabaja el agente de Figma con estos documentos. Puede leer y contestar comentarios, igual que un compañero. Figma pone un ejemplo: pedirle que responda a todos los comentarios abiertos de un spec con una propuesta de arreglo, mientras el equipo opina en el mismo documento. Cada conversación va en su propio hilo y se pueden llevar varias en paralelo.

Specs también trae conectores para meter contexto de fuera. Con el de GitHub se redacta una especificación técnica a partir del código real del proyecto. Con el de Hex, una herramienta de análisis de datos, se selecciona una pregunta abierta del documento y el agente lanza el análisis y deja la respuesta como comentario, justo donde estaba la pregunta.

El viaje funciona en las dos direcciones. Un documento de producto se puede convertir en diseños, prototipos y código, y una capa de código se puede devolver a diseño editable con "Extract designs" para documentarla.

Del documento al agente de programación

La última pieza es la entrega. Cuando el equipo se pone de acuerdo, se copia el enlace del spec y se pega en el prompt del agente de programación. A través del servidor MCP de Figma, el agente (Codex, Claude Code, Cursor) recibe el Markdown y todo lo que el documento enlaza: frames, diagramas, capas de código y fragmentos de Code Connect.

Figma cuenta el caso de Noah Finer, ingeniero que construyó el propio Specs usándolo. Escribió el spec con los criterios para los casos raros, metió diagramas de FigJam con el flujo, lo pasó a los compañeros para comentarios y luego se lo dio a su agente con esos comentarios incluidos. Mientras programaba, el agente iba actualizando el spec original en el lienzo.

En Intuit, Mark Harvey, diseñador de producto, lo usa para documentar un set de iconos nuevo: nombre de archivo, categoría, etiquetas de búsqueda y descripción de cada icono, al lado de los propios iconos. Su argumento es que así el archivo lo entiende alguien que no es diseñador.

El resto de Config India

Specs llega con más piezas pensadas para que los agentes respeten el sistema de diseño de cada empresa:

  • Guidelines (beta abierta): archivos Markdown con reglas, buenas prácticas y errores a evitar, que se cuelgan de una librería de diseño publicada. El agente los lee cada vez que alguien le pide algo con esa librería activada.
  • Code sources (beta cerrada): importar código de repositorios de GitHub o paquetes de npm para que el agente construya componentes que se parezcan a los reales.
  • Sistemas de diseño centralizados (solo vista previa): juntar librerías de diseño, de código y guidelines en un único sistema.

El agente de Figma, por su parte, salió de beta la semana pasada.

Loredana Crisan, directora de diseño de Figma, dio a TechCrunch el dato que justifica toda la apuesta: hoy se produce 17 veces más código que antes, pero los lanzamientos solo han subido 1,3 veces. Buena parte de ese código sirve para descubrir qué producto construir, más que para salir a producción.

El escenario tampoco es casual. Config India tuvo más de 30.000 inscritos entre presencial y virtual, la mayor edición internacional de Figma. India es su segundo mercado por usuarios activos diarios y trabaja con más del 40% de las 100 empresas del índice BSE100 de Bombay. Figma anunció además una alianza con Sarvam, startup india de IA, que se suma a la lista de conexiones MCP.

Cómo crear un spec en Figma

Según el anuncio de Figma, con un plan de pago:

1. Abre un archivo de Figma o de FigJam. 2. Pulsa la tecla D o haz clic en el icono de Specs de la barra de herramientas. 3. Si ya tienes el documento en Markdown, arrastra el archivo .md al lienzo y se convierte en un spec. 4. Incrusta frames, diagramas o capas de código arrastrándolos al documento. 5. Para pasárselo a tu agente de programación, copia el enlace del spec y pégalo en el prompt. El agente tiene que estar conectado al servidor MCP de Figma.

Por qué importa

Si en tu empresa ya trabajáis con agentes, seguramente tenéis el contexto repartido en archivos Markdown: guías de estilo, reglas de marca, documentos de producto. Funcionan, pero suelen vivir en el ordenador de una persona y el resto del equipo no los edita.

Specs va a lo práctico: un sitio compartido donde diseño, producto y desarrollo editan el mismo contexto que luego lee el agente. Para equipos que ya pagan Figma, probarlo cuesta poco, porque está en beta abierta en los planes de pago. Yo empezaría por el documento que más se repite en vuestros prompts, el de marca o el del sistema de diseño, y lo convertiría en el primer spec con guidelines. Si el agente empieza a respetar vuestras reglas sin que haya que recordárselas en cada prompt, habréis recuperado horas de revisión.

Fuente original: figma.com


Relacionado