Figma lleva GitHub al lienzo de diseño con Code Layers

Code Layers, la nueva función de Figma, permite clonar un repositorio de GitHub directamente en el lienzo de diseño. Una vez ahí, el diseñador extrae marcos editables del código existente, hace cambios de forma visual y los sincroniza de vuelta al repositorio, todo dentro de un archivo Figma con colaboración en tiempo real. Diseño y desarrollo en la misma pantalla.

Para diseñadores que pasaron años enviando especificaciones por Jira o mandando links de Zeplin al equipo de ingeniería, Code Layers cambia dónde ocurre la conversación entre diseño y código. Los cambios en Figma actualizan el código; los cambios en el código actualizan el diseño. El puente entre ambas disciplinas siempre requirió cambiar de herramienta. Ahora ese salto es más corto.

Figma Motion exporta animaciones en siete formatos

Figma también anunció Motion, una línea de tiempo de animación integrada en el lienzo. Los diseñadores construyen transiciones, estados de hover y animaciones de scroll, y los exportan en siete formatos: CSS, JSON, React, MP4, WebM, SVG animado y GIF. Una animación diseñada en Figma ya no es una referencia para que un desarrollador la interprete: es el archivo final.

El tercer anuncio fue Shader Effects, rellenos acelerados por GPU mediante WebGPU que permiten aplicar texturas visuales complejas sobre las capas de Figma. El agente de IA de Figma genera estos rellenos desde una descripción de texto o una imagen. Se escribe algo como ‘vidrio esmerilado con patrones de interferencia azul’ y el lienzo produce algo que se renderiza en vivo.

El agente de IA suma habilidades y conexiones externas

El agente de IA se expandió de forma considerable. Ahora construye ‘habilidades’ reutilizables desde instrucciones en lenguaje natural —herramientas que automatizan tareas repetitivas sin necesitar conocimientos de API— y conecta con Notion, GitHub y Microsoft Excel. En 2026 se agregará Weavy, un constructor de flujos de trabajo adquirido por Figma, para automatización dentro de los archivos de diseño.

No todo está disponible hoy. Code Layers está en acceso anticipado; las solicitudes abren en julio de 2026 y se necesita un asiento Full en un plan de pago. Shader Effects y el agente de IA mejorado ya están activos en planes de pago. Figma Motion está disponible ahora para asientos Full, con disponibilidad general de Code Layers esperada para más adelante en 2026.

La apuesta de Figma de integrar el flujo de trabajo del editor de código tiene un contrapunto real: escribir código y diseñar interfaces son actividades mentales distintas, y Cursor —el editor de código con IA que SpaceX compró por 60.000 millones de dólares la semana pasada— construyó su audiencia entre ingenieros, no diseñadores. Si esas dos comunidades terminan compartiendo un mismo lienzo es todavía una pregunta abierta.

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