Config 2026 fue diferente.

No fue una actualización normal de Figma. No fue "nuevas funciones" para hacer lo mismo más rápido.

‍

👉 Fue un cambio de paradigma sobre qué puede vivir en el canvas de Figma.

‍

Código, movimiento, generación de imágenes con IA, agentes que conocen tu sistema de diseño... Todo en el mismo archivo. Todo visible para tu equipo. Todo construido sobre las mismas reglas que ya conoces.

‍

Esto es lo que anunciaron en Config 2026 y, más importante, lo que significa para ti como diseñador UX/UI.

1. Figma Motion: el canvas ahora tiene una línea de tiempo

‍

Por años, la animación fue lo que le faltaba a Figma para cerrar el ciclo completo del diseño. Eso cambió en Config 2026.

‍

🔹 Figma Motion trae una línea de tiempo directamente al canvas, en el mismo archivo donde tienes tus componentes, variables y estilos.

‍

¿Qué puedes hacer ahora?

• Crear animaciones desde cero con keyframes y presets
• Pedirle al agente de Figma que genere una animación como punto de partida
• Animar un componente una sola vez y que ese movimiento viaje a través de todos los archivos y equipos, igual que lo hace un color o una tipografía

‍

Y lo más importante para el handoff: cuando activas Dev Mode, la línea de tiempo es completamente visible e inspeccionable. El desarrollador puede copiar el código de animación directo en CSS, JSON o incluso React listo para producción. También puedes exportar como MP4, WebM, SVG animado o GIF.

👉 El movimiento dejó de ser un extra que agregabas al final. Ahora es parte del sistema de diseño desde el día uno.

‍

2. Code Layers: código vivo en el canvas

‍

Esta es la novedad que más cambia la conversación entre diseño y desarrollo.

Con los Code Layers, puedes convertir cualquier frame del canvas en una capa de código interactiva. No en una herramienta diferente. No en una pestaña separada. Directamente en tu archivo de Figma.

¿Cómo funciona?

• Creas un code layer desde la barra de herramientas, desde un frame existente, o pidiéndole al agente que lo genere
• Puedes traer un repositorio de GitHub o subir una carpeta local directamente
• Duplicas un code layer para explorar varias direcciones al mismo tiempo y ver cómo se sienten, no solo cómo se ven
• También puedes extraer el código de vuelta como capas de diseño editables para seguir refinando en ambas direcciones

‍

Imagina tener tres versiones de un mismo flujo en el canvas, todas con código funcional, todas visibles para tu equipo al mismo tiempo. Eso es lo que hacen los Code Layers posible.

👉 Diseño y código ya no son procesos separados. Ahora pueden evolucionar juntos, en el mismo espacio, con todo el equipo.

‍

3. El agente de Figma ahora entiende tu sistema de diseño

‍

El agente de Figma ya existía. Pero lo que anunciaron en Config 2026 cambia cuánto puede hacer y, sobre todo, qué tan tuyo puede ser el resultado.

‍

Ahora el agente tiene tres grandes mejoras:

🔹 Context (Contexto)

‍
Puedes conectar tu librería directamente al prompt del agente. Luego usas @ para referenciar componentes específicos, variables y estilos. El agente deja de generar diseños genéricos para empezar a usar tu propio sistema de diseño como punto de partida.

‍

🔹 Custom Tools (Herramientas propias)
El agente ahora puede conectarse a herramientas externas: Notion, Slack, GitHub, Atlassian y más. Puedes pedirle que revise un ticket, consulte documentación o actualice información directamente desde Figma.

‍

🔹 Skills (Habilidades)
Las skills son instrucciones que le enseñan al agente cómo trabajar con tus convenciones específicas de diseño. Puedes crear las tuyas, usar las de tu equipo o tomar las que ya existen en la Figma Community. Son la diferencia entre un agente genérico y uno que realmente conoce tu forma de trabajar.

‍

👉 Un prompt con contexto real genera diseños reales. Sin tu sistema de diseño, el agente solo genera ruido.

‍

4. Figma Weave Tools: producción creativa desde el canvas

‍

Figma adquirió Weavy el año pasado y en Config 2026 mostraron cómo eso cambia el flujo de trabajo de diseño.

Desde el panel izquierdo de Figma Design ahora tienes acceso a más de 20 herramientas de imagen impulsadas por IA. Cada una es un workflow pregenerado que ejecuta tareas muy específicas:

• Transferir el estilo visual de una imagen a otra para mantener consistencia
• Generar iconos que coincidan con el estilo de tu set existente
• Reemplazar fondos con solo un prompt
• Crear renders de producto de e-commerce en segundos
• Texturizar logos con distintos materiales

‍

No necesitas escribir prompts largos ni aprender otra herramienta. Solo eliges la Weave Tool, das los inputs y obtienes resultados de producción consistentes.

‍

Y lo que viene es incluso más interesante: pronto cualquier diseñador podrá publicar sus propios workflows de Weave como herramientas en la Figma Community. Tu lógica creativa se convierte en punto de partida para otros.

‍

5. Shaders y Generative Plugins

‍

Dos novedades más que completan el panorama:

‍

🔹 Shader Fills: ahora puedes aplicar shaders directamente como fills a cualquier elemento en el canvas. Efectos visuales que antes solo existían en herramientas de 3D o motion, ahora viven en Figma.

‍

🔹 Generative Plugins: los plugins de Figma ahora pueden usar modelos de IA directamente. Esto abre la puerta para que la comunidad cree herramientas generativas completamente nuevas dentro de Figma. El ecosistema de plugins cambia por completo.

‍

La pregunta que nadie quiere hacerse

‍

Todo lo que acabo de describir es impresionante. Y es real.

Pero hay algo que ninguna de estas herramientas puede hacer por ti.

‍

😰 Si tu archivo de Figma es un caos de capas sin nombre, estilos duplicados y componentes sin estructura... el agente va a generar más caos.

‍

😰 Si no sabes qué es un sistema de diseño, las Weave Tools no van a tener contexto para trabajar bien.

‍

😰 Si no entiendes cómo funciona la relación entre diseño y código, los Code Layers solo van a confundirte más.

‍

👉 Todas estas herramientas nuevas multiplican tu capacidad. Pero primero tienes que tener una base sólida sobre la que multiplicar.

‍

El diseñador que sabe estructurar archivos de Figma con lógica real, que entiende sistemas de diseño, que conoce el handoff y que domina los fundamentos de UX/UI... ese diseñador con estas herramientas es imparable.

El diseñador que no tiene esos fundamentos solo tendrá acceso a herramientas más sofisticadas para cometer los mismos errores de siempre.

‍

¿Quieres aprovechar todo esto al máximo?

‍

Empieza por donde empieza todo: los fundamentos.

En mis cursos aprendes a diseñar en Figma con estructura, lógica y criterio profesional. Desde cómo organizar tus archivos correctamente hasta cómo construir un sistema de diseño completo que pueda potenciar todo lo que Figma sigue lanzando.

Porque cuando llegues a estas nuevas herramientas con una base sólida, no vas a necesitar un tutorial. Vas a saber exactamente qué hacer con ellas.

👉 Conoce mis cursos aquí y empieza a construir esa base hoy.