Figma Canvas (AI agent canvas)

¿Qué es Figma Canvas?

Figma Canvas, como se describe en esta publicación del blog de Figma, es el flujo de trabajo del lienzo de Figma abierto a agentes de IA para que puedan diseñar directamente dentro de los archivos de Figma. El propósito principal es permitir que los agentes creen y actualicen activos de diseño mientras usan el mismo contexto de diseño que los equipos mantienen en Figma, como un sistema de diseño, componentes, variables y convenciones del equipo.

La publicación también introduce un servidor Figma MCP en beta para conectar Figma a los flujos de trabajo de desarrolladores, permitiendo que las herramientas impulsadas por LLM generen y modifiquen trabajo de diseño de manera que permanezca vinculado a la estructura de diseño existente.

Características clave

• Los agentes de IA pueden escribir directamente en archivos de Figma en el lienzo para que el trabajo generado se cree o modifique en el mismo lugar donde los equipos iteran en los diseños.
• Un servidor Figma MCP en beta que integra Figma en el flujo de trabajo de desarrolladores/LLM para soportar generación de código informada por diseño y operaciones en activos de diseño.
• La herramienta use_figma para operaciones en el lienzo que permite a clientes MCP (incluyendo Claude Code y Codex mencionados en la publicación) generar y modificar activos de diseño vinculados al sistema de diseño.
• Contexto compartido entre código y lienzo para que los agentes puedan moverse fluidamente entre actualizar UI derivada de código y refinar diseños en Figma.
• Habilidades para guiar el comportamiento del agente usando instrucciones en markdown donde las habilidades definen los pasos del flujo de trabajo, la secuencia y las convenciones que los agentes deben seguir en Figma.

Cómo usar Figma Canvas

1. Usa un cliente MCP que soporte el servidor MCP de Figma (la publicación menciona herramientas como Claude Code y Codex) para acceder a las capacidades de Figma vía MCP.
2. Usa la herramienta use_figma para dirigir al agente a crear o actualizar componentes y otros activos de diseño dentro de Figma usando el contexto de tu sistema de diseño.
3. Añade orientación mediante habilidades proporcionando instrucciones basadas en markdown que el agente puede seguir para ejecutar tareas en Figma (incluyendo la habilidad fundacional /figma-use referenciada en la publicación).
4. Opcionalmente sincroniza desde UIs en vivo usando generate_figma_design al partir de HTML/código, luego cambia a use_figma para editar esos diseños con componentes y variables existentes.

Casos de uso

• Convertir un codebase en componentes iniciales de Figma: Usa una habilidad como /figma-generate-library para crear nuevos componentes en Figma a partir de un codebase.
• Generar nuevas pantallas usando componentes y variables existentes: Usa /figma-generate-design para que el agente construya diseños en Figma mientras se basa en componentes/variables en lugar de layouts libres.
• Aplicar especificaciones de accesibilidad desde descripciones de UI: Usa create-voice para generar especificaciones de lectores de pantalla (VoiceOver, TalkBack, ARIA) a partir de especificaciones de UI.
• Imponer convenciones de espaciado mediante reglas conscientes del sistema: Usa rad-spacing para aplicar patrones de espaciado jerárquicos en Figma.
• Conectar o remapear diseños existentes a componentes del sistema: Usa apply-design-system para alinear diseños a componentes del sistema en lugar de dejarlos como capas desconectadas.

Preguntas frecuentes

¿Es una función de pago?

La publicación del blog indica que el soporte para agentes de IA en el lienzo de Figma eventualmente se convertirá en una función de pago basada en uso, pero está disponible gratis durante el período de beta.

¿Qué herramientas permiten a los agentes trabajar en Figma?

La publicación describe una herramienta use_figma para que los agentes operen en el lienzo usando el contexto del sistema de diseño. También referencia una herramienta existente generate_figma_design para traducir HTML de apps/sitios web en vivo a capas editables de Figma.

¿Qué son las “habilidades” en este flujo de trabajo?

En la publicación, las habilidades son conjuntos de instrucciones escritas como archivos markdown que moldean cómo operan los agentes en Figma, cubriendo pasos del flujo de trabajo, secuencia, convenciones y conocimiento de dominio necesario para producir diseños duraderos y alineados con la marca.

¿Necesito construir un plugin para crear habilidades?

No. La publicación dice que cualquiera puede crear una habilidad, y que escribir una no requiere construir un plugin ni escribir código.

¿Las herramientas mencionadas son solo para agentes específicos (p. ej., Claude Code)?

La publicación nombra a Claude Code y Codex como clientes MCP que pueden usar use_figma, y describe “otros clientes MCP” también. No lista una matriz completa de compatibilidad.

Alternativas

• Flujos de trabajo de traducción de diseño a código (sin edición directa del agente en el lienzo): Puedes generar diseños fuera de Figma o tratar Figma como un destino de solo lectura, y luego reconstruir manualmente los recursos en Figma. Esto difiere por carecer de ediciones directas del agente vinculadas a tu sistema de diseño dentro del lienzo.
• Usar automatización o plugins solo de Figma existentes: Si necesitas componentes y variables consistentes sin agentes de IA, puedes depender de plugins de Figma o enfoques basados en plantillas. Esto intercambia la autonomía del agente por un comportamiento más determinista.
• Flujos de trabajo de agentes que generan artefactos de diseño fuera de Figma: Algunas cadenas de herramientas LLM pueden generar archivos o especificaciones de diseño para que un diseñador los implemente. Comparado con el enfoque descrito aquí, los agentes no modificarán directamente los mismos componentes/variables de Figma a través de use_figma.
• Solo traducción de HTML a Figma: Si tu enfoque es importar UIs existentes a Figma (mediante la capacidad tipo generate_figma_design) sin el bucle de edición del lienzo del agente, eso puede reducir la complejidad, pero podría requerir más seguimiento manual para alinearse con el sistema de diseño.