Figma une código y diseño en un lienzo. Cursor apuesta diferente

Code Layers, la nueva función de Figma, hace algo que dos años atrás habría parecido imposible: permite clonar un repositorio de GitHub directamente en el lienzo de diseño. Una vez allí, el diseñador puede extraer marcos editables del código existente, modificarlos visualmente y sincronizar los cambios de vuelta al repositorio, todo dentro de un único archivo Figma con la colaboración en tiempo real intacta. Diseño y desarrollo en la misma ventana.

Para los diseñadores que han pasado años redactando notas de entrega, copiando especificaciones en tickets de Jira o enviando enlaces de Zeplin al equipo de ingeniería, Code Layers cambia el lugar donde ocurre la conversación entre diseño y código. Los cambios en Figma actualizan el código subyacente; los cambios en el código actualizan la capa de diseño. El puente entre ambas disciplinas siempre ha exigido cambiar de contexto. Ahora ese cambio es más pequeño.

Figma Motion convierte las animaciones en código listo para producción

Figma también anunció Motion, una línea de tiempo de animación basada en fotogramas clave integrada directamente en el lienzo. Los diseñadores pueden crear transiciones, estados de hover y animaciones de scroll, y exportarlos en siete formatos: CSS, JSON, React, MP4, WebM, SVG animado y GIF. Una animación de carga diseñada en Figma ya no es un documento de referencia que un desarrollador debe interpretar: es la animación misma.

El tercer anuncio importante fue Shader Effects, rellenos acelerados por GPU mediante WebGPU —el estándar gráfico más reciente del navegador— que permiten aplicar texturas visuales complejas y matemáticamente generadas directamente sobre las capas de Figma. El agente de IA de Figma puede generar estos rellenos a partir de una descripción textual o una imagen cargada. Escribe una frase como ‘vidrio esmerilado con patrones de interferencia azul suave’ y el lienzo produce algo que se renderiza en tiempo real y puede ajustarse de forma interactiva.

El agente de IA suma habilidades, herramientas y conexiones externas

El agente de IA también se expandió de forma notable. Ahora puede construir ‘habilidades’ reutilizables a partir de instrucciones en lenguaje natural —herramientas personalizadas que automatizan tareas de diseño repetitivas sin requerir conocimientos de API— y conecta directamente con servicios externos como Notion, GitHub y Microsoft Excel. Una actualización prevista para más adelante en 2026 añadirá Weavy, un constructor de flujos de trabajo adquirido por Figma el año pasado, para la automatización basada en nodos dentro de los archivos de diseño.

No todo está disponible hoy. Code Layers se encuentra en acceso anticipado, con solicitudes que se abrirán en julio de 2026; requiere un asiento Full en un plan de pago de Figma. Shader Effects y el agente de IA mejorado ya están disponibles en los planes de pago. Figma Motion está disponible ahora para los titulares de asiento Full, y la disponibilidad general de Code Layers se espera para más adelante en 2026.

La ambición de Figma de absorber partes del flujo de trabajo del editor de código se enfrenta a una pregunta legítima: escribir código y diseñar interfaces son actividades cognitivas distintas, y Cursor —el editor de código con IA que SpaceX adquirió por 60.000 millones de dólares la semana pasada— ha construido su audiencia entre ingenieros, no entre diseñadores. Si esas dos comunidades convergen en torno a un lienzo compartido sigue siendo, por ahora, una incógnita.

Etiquetas: GitHub, Code Layers, Config 2026, Cursor, Figma, herramientas de diseño