Figma lanza Code Layers en Config 2026, permitiendo a diseñadores escribir y ejecutar código directamente en el lienzo

Figma ha pasado la última década convenciendo a diseñadores e ingenieros de trabajar en el mismo archivo. En Config 2026, celebrado el 24 de junio, la compañía dio su paso más agresivo para eliminar la línea entre ellos por completo.

El anuncio central es Code Layers: un sistema que lleva código ejecutable directamente al lienzo colaborativo de Figma. Los usuarios pueden convertir cualquier capa de diseño en una capa de código interactiva con un solo clic, clonar repositorios para extraer flujos de producción y ejecutar paquetes npm sin salir de Figma. El chat de IA puede construir y modificar capas de código bajo demanda. El resultado se entrega dentro de Figma Sites, respaldado por código React personalizado.

«El código debe tratarse como cualquier otro material de diseño», dijo Dylan Field, CEO de Figma. «Code Layers trata a diseñadores e ingenieros como colaboradores en una superficie compartida donde coexisten la lógica de diseño y producción».

La implicación práctica es que el paso de entrega tradicional (handoff) se vuelve opcional. Los equipos pueden duplicar capas de código para explorar múltiples direcciones simultáneamente, extraer marcos de diseño de vuelta a capas editables y mantener elementos interactivos dentro del mismo archivo donde se tomaron las decisiones de diseño.

Junto a Code Layers, Figma lanzó un constructor de plugins de IA en lenguaje natural que permite a los usuarios describir la funcionalidad deseada y recibir un plugin funcional sin escribir JavaScript. El sistema admite Skills reutilizables — flujos de trabajo empaquetados que el asistente de IA puede ejecutar bajo demanda. El asistente se conecta a Notion, Slack, GitHub, Atlassian, Granola y Excel para un contexto más rico. El agente está disponible hoy para todos los usuarios; el acceso a FigJam y Slides está en lista de espera.

El tercer gran lanzamiento es Figma Motion, un sistema de animación nativo basado en línea de tiempo y keyframes disponible de inmediato. El modo Dev admite exportaciones en CSS, JSON, React, MP4, WebM, SVG animado y GIF, además de compatibilidad con MCP. Se incluyen rellenos de shader generados por IA y transformaciones 3D. Anteriormente, el trabajo de animación requería herramientas externas como After Effects o Rive.

La respuesta de Figma a las herramientas de diseño nativas de IA en Config 2026 es hacer del lienzo el lugar donde aterriza el código de producción. Code Layers ya está en lista de espera y el despliegue comienza en julio de 2026. Figma Motion está disponible hoy. No se anunciaron cambios de precio.