Capas de código Figma y Specs: qué son, cómo funcionan y dónde terminan14 min read

Las capas de código Figma colocan código en ejecución en el lienzo, y Figma Specs coloca Markdown allí también. Ambos ingresaron a la versión beta abierta en Config India el 15 de octubre de 2026, por lo que un archivo de diseño ahora puede contener marcos, un prototipo funcional y el plan escrito a partir del cual construye un agente.

Esta guía está dirigida a diseñadores, PM e ingenieros de front-end que deciden si trasladar el prototipo y el trabajo de especificaciones a Figma. Cubre qué hace cada función, cómo comenzar, cuánto cuesta en créditos de IA y dónde debe dejar el trabajo Figma para los compañeros de equipo en Claude, ChatGPT o Cursor.

En la era de la IA, el diseño es código. Para diseñar directamente en código con IA, o para convertir sus diseños Figma en código, use Anima Playground: describe una pantalla o comienza desde un diseño Figma, luego continúa iterando en una aplicación editable que puedes obtener una vista previa y publicar.

Diseñe directamente en código con IA

Diseñe con IA: describa una pantalla o convierta los diseños Figma en código.

¿Qué lanzó Figma en Config India 2026?

Las capas de código y Specs fueron el titular, pero llegaron con un conjunto de características de agente a su alrededor. Aquí está el estado actual del centro de ayuda de Figma:

Ambas versiones beta se lanzan a lo largo de varias semanas, por lo que es posible que las veas antes o después que el resto de tu equipo.

¿Qué son las capas de código Figma?

Una capa de código es una capa que contiene código real en ejecución. En lugar de un prototipo que simula interacciones con enlaces de marcos, obtienes un prototipo funcional respaldado por código colocado en el lienzo junto a tus diseños. Los compañeros de equipo pueden hacer clic en él, comentarlo y duplicarlo para probar una dirección diferente uno al lado del otro.

Figma le ofrece cuatro formas de iniciar uno:

• De un diseño. Seleccione fotogramas y solicite al agente Figma que los convierta en una capa de código.
• Desde un sitio web en vivo. Capture una página con la extensión Figma Chrome y péguela en el lienzo.
• De un repositorio. Importe una base de código de prototipos liviano y compatible desde GitHub o una carpeta local. Una importación GitHub permanece conectada a ese repositorio.
• Desde cero. Agregue una capa de código vacía y solicite al agente que cree.

También puede incorporar al lienzo un prototipo que haya creado en una herramienta de codificación a través del servidor Figma MCP.

La edición ocurre de tres maneras. Le avisa al agente, anota marcos para mostrarle dónde pertenece un cambio, o abre el editor de código y cambia el código usted mismo. Cuando los detalles visuales importan más que el código, Extract designs convierte las pantallas de una capa de código nuevamente en marcos Figma editables. Cuando el código esté listo para los ingenieros, puede enviarlo a una rama y abrir una solicitud de extracción.

¿Qué es Figma Specs?

Figma llama a Specs «un hogar nativo para el contexto». En la práctica, es un documento colaborativo Markdown que se encuentra en el lienzo de un archivo Figma Design o en un tablero FigJam, o como su propio archivo Spec.

Comenzar es rápido:

1. Cree un Spec independiente desde el explorador de archivos o vaya a figma.com/spec/new.
2. Dentro de un archivo de diseño o tablero FigJam, haga clic en Spec en la barra de herramientas o presione re.
3. Ya tengo un .md archivo? Arrástrelo al lienzo y se convertirá en una especificación.
4. Escribe con el Markdown que ya conoces: # para encabezados, - para balas, [] para tareas pendientes, > para comillas, tres comillas invertidas para el código. Tipo / para imágenes, Figma incrustaciones y divisores.

Lo que hace que una especificación sea más que un archivo Markdown es lo que se encuentra alrededor del texto. Puede incrustar un marco, un tablero FigJam o cualquier nodo del lienzo, de modo que el requisito y el diseño que describe permanezcan uno al lado del otro. Los compañeros de equipo lo comentan y el agente Figma puede leer y responder esos comentarios.

Specs también funciona fuera de Figma. Los agentes de codificación conectados al servidor Figma MCP pueden leer, crear y actualizar especificaciones utilizando el figma-spec habilidad. Para entregar uno, copie el enlace de especificaciones en el mensaje de su agente de codificación, y los marcos, diagramas, capas de código y fragmentos de Code Connect vinculados lo acompañarán.

Por qué Markdown se convirtió en el formato de transferencia

La propia publicación de lanzamiento de Figma lo dice claramente: Markdown es ahora el formato de facto para compartir contexto con agentes. Todo agente codificador lo lee. La mayoría de los equipos de productos ya mantienen planes, PRD e instrucciones de agentes en .md archivos.

Mi lectura es que Specs es Figma aceptando que la transferencia a un agente es texto y luego haciendo que ese texto sea multijugador. un local AGENTS.md o PRD nunca falló debido al formato. Fracasó porque solo una persona lo editó, se alejó de los diseños y nadie pudo ver qué versión usó el agente.

Dentro de Figma, Specs soluciona eso. La pregunta abierta es qué sucede fuera de él. Las incrustaciones, los comentarios y las referencias de diseño en vivo son características de Figma y los agentes llegan a ellas a través de los clientes enumerados en el catálogo de Figma MCP. Si sus ingenieros, su PM ChatGPT y Claude de su equipo de marketing necesitan el mismo plan, aún debe decidir dónde reside la copia compartida.

Un flujo de trabajo práctico: desde PRD hasta la capa de código y la solicitud de extracción

Así es como las dos características encajan en una característica real, usando solo lo que Figma documenta hoy.

1. Arrastre su PRD al lienzo. Tu existente .md El archivo se convierte en una especificación. No se reescribe nada y editarlo a mano no utiliza créditos de IA.
2. Inserta los marcos de los que habla. uso / para agregar los flujos que describe el PRD. Los revisores ahora ven el requisito y la pantalla juntos.
3. Convierta los fotogramas clave en una capa de código. Selecciónelos y avise al agente. Si ya tiene un repositorio prototipo, impórtelo desde GitHub.
4. Revisa en un solo lugar. Recopile comentarios sobre la especificación y la capa de código. Pídale al agente Figma que responda a cada comentario abierto con una solución sugerida mientras la gente opina sobre los mismos hilos.
5. Entrega la especificación. Pegue el enlace de especificaciones en Codex, Claude Code o Cursor conectados al servidor Figma MCP. El agente obtiene el Markdown más el contexto de diseño vinculado.
6. Envíe el código prototipo. Envíe los cambios de la capa de código a una rama y abra una solicitud de extracción para que los ingenieros la revisen antes de fusionar.

El resultado es una especificación que su agente de codificación puede leer y un prototipo funcional en el que su equipo realmente hizo clic. Pruebe el código generado como cualquier otro código. Un prototipo que se ejecuta no es lo mismo que un código listo para producción.

Si el siguiente paso es convertir un diseño Figma en código que pueda ejecutar, o diseñar en código desde un mensaje, ese es el trabajo de Anima Playground.

¿Cuánto cuestan las capas de código y Specs?

• Las capas de código utilizan créditos de IA. En los planes pagos, generar y editar dentro de una capa de código es gratuito hasta el 4 de noviembre de 2026. Otros agentes que trabajan en el mismo mensaje todavía usan créditos y, después del 4 de noviembre, todas las tareas de la capa de código usan créditos.
• Specs son libres de escribir. Escribir y editar una especificación usted mismo no utiliza créditos. Usar el agente con una especificación sí lo hace. Pase el cursor sobre el recibo después de cada mensaje para ver cuánto costó.
• Payload y las pautas agregan costos. Figma señala que ambos le dan al agente más contexto y más trabajo, por lo que el mismo mensaje puede utilizar más créditos.

Límites que debes comprobar antes de planificar

• Lanzamiento. Ambas funciones son versiones beta abiertas que se implementarán a lo largo de semanas. Busque el ícono Código en la barra de herramientas Figma Design y la opción Spec en el explorador de archivos.
• Planes. Specs necesita un plan pago. Los usuarios principiantes obtienen capas de código pero no Specs. Ambos necesitan acceso de edición para crear.
• Optar por no participar. Solo los administradores empresariales pueden desactivar las capas de código y solo desactivando todas las funciones de IA Figma.
• Tamaño del repositorio. La importación de GitHub es para bases de código de creación de prototipos livianos, no para una aplicación de producción completa.
• Código del sistema de diseño. Conectar el código de su componente real a través de fuentes de código sigue siendo una versión beta cerrada, por lo que es posible que las capas de código aún no utilicen sus componentes de producción.

Dónde termina Figma y dónde encajan Anima y AgentGrid.io

Si todo su equipo trabaja en Figma, las capas de código y Specs son un valor predeterminado sólido. El prototipo, el plan y los comentarios se encuentran en el mismo archivo, y el agente de Figma y los clientes de MCP pueden trabajar en ellos.

Dos situaciones comunes aún quedan fuera de este expediente.

La idea empezó en otra parte. Un prototipo de Claude Design, una página de HTML generada por ChatGPT o un sitio activo del que desea aprender. El servidor MCP de Figma ahora tiene un html_to_figma herramienta para HTML generado por el agente. Buddy de Anima, nuestro agente de diseño de IA dentro de Figma, también convierte HTML, artefactos, imágenes y URL de Claude en capas editables Figma, lo cual es útil cuando desea seguir diseñando en esas capas con su sistema de diseño.

El resultado debe salir de Figma. Su especificación o prototipo debe ser revisado por personas ajenas a su equipo Figma, editado por agentes de varios proveedores o publicado como un enlace en vivo. Ese es el trabajo que hace AgentGrid.io, construido por Anima. Un artefacto Markdown en AgentGrid.io es un documento activo que se guarda automáticamente y que las personas y agentes conectados como Claude, ChatGPT, Cursor y Grok Bot pueden editar, y cada cambio se atribuye por nombre en el historial de versiones. Un artefacto HTML es una página en ejecución que puede comentar y publicar en una URL pública cuando se aprueba. También puede importar un marco Figma a AgentGrid.io como un artefacto de la aplicación. Esa importación es unidireccional, por lo que las ediciones posteriores de Figma no se sincronizan.

Los dos no compiten por el mismo paso. Figma es el espacio de diseño. AgentGrid.io es donde se alojan los artefactos Markdown y los artefactos HTML cuando el trabajo cruza herramientas y equipos.

Pruebe AgentGrid.io para mantener una especificación o prototipo que cada agente de su equipo pueda editar y publicar.

Utilice cada herramienta cuando

• Utilice capas de código Figma cuando las partes interesadas necesitan hacer clic en un prototipo funcional junto a los diseños y comparar las instrucciones una al lado de la otra.
• Utilice Figma Specs cuando el plan debe estar al lado de los marcos y ser leído por un agente de codificación a través del servidor Figma MCP.
• uso Anima Playground cuando desee diseñar directamente en código con IA o convertir un diseño Figma en una aplicación editable que pueda obtener una vista previa y publicar.
• uso Buddy cuando el punto de partida está fuera de Figma y desea capas editables en el lienzo. Para obtener una comparación más completa de la compilación en Figma versus un creador de navegador, consulte Figma Make y Anima Playground.
• Utilice AgentGrid.io cuando la especificación o el prototipo deben ser editados por personas y agentes en todas las herramientas, revisados con comentarios y publicados como un enlace en vivo.

Preguntas frecuentes

¿Qué son las capas de código en Figma?

Una capa de código es una capa en el lienzo Figma que contiene código real en ejecución. Puede crear uno a partir de marcos seleccionados, un sitio web en vivo capturado con la extensión Figma Chrome, un repositorio de prototipos GitHub o un mensaje en blanco, luego hacer clic en él, comentarlo y duplicarlo para comparar direcciones.

¿Figma Specs es solo Markdown?

Specs usa Markdown para su texto y puede arrastrar cualquier archivo .md al lienzo para crear uno. Agrega características Figma alrededor de ese texto: marcos incrustados y tableros FigJam, comentarios y un agente que puede leer y responder a esos comentarios.

¿Las capas de código Figma cuestan créditos de IA?

Sí. En los planes pagos, generar y editar dentro de una capa de código es gratuito hasta el 4 de noviembre de 2026. Otros agentes que trabajan en el mismo mensaje todavía usan créditos y, después del 4 de noviembre, todas las tareas de la capa de código usan créditos de IA.

¿Pueden Claude Code, Codex o Cursor leer un Figma Spec?

Sí, si están conectados al servidor Figma MCP. Los agentes codificadores pueden leer, crear y actualizar especificaciones con la habilidad figma-spec, y usted puede pegar un enlace de especificación en su mensaje para transmitir su contexto de diseño vinculado.

¿Qué planes Figma incluyen Specs?

Specs está en versión beta abierta en planes pagos: Profesional, Organización, Empresa y Educación, además de Gobierno según el artículo Config India de Figma. No está en el plan Starter gratuito. Las capas de código se están implementando en todos los planes, incluido Starter.