Overview
La gran idea
La propuesta de Figma este año: “Ninguna herramienta debería limitar hasta dónde puede llegar una idea.” Todo lo que lanzaron gira en torno a código, movimiento e IA generativa.
Lo que lanzaron
Nuevas
funciones
01Figma Motion
02Generative plugins
03Weave tools
04Figma agent
05Shader fills & effects
06Code on the canvas
01 Diseño en movimiento
Figma
Motion
Una línea de tiempo real vive ahora en Figma Design. Keyframes, easing, springs, presets.
- Anima desde cero, encima de diseños existentes, o deja que el agente haga un primer borrador.
- Motion se integra a tu sistema de diseño: anima un componente una vez y viaja a todos lados.
- Dev Mode muestra la línea de tiempo completa. Exporta CSS, JSON o React, o entrega por MCP.
01 En práctica
Usa movimiento con Agentes
Anima tus propios componentes
02 Crea tus propias herramientas
Generative
plugins
Crea tus propias herramientas en Figma describiendo lo que necesitas. Sin configuración de dev ni Plugin API.
- Ordena capas por regla, distribuye espaciado en una selección, busca y reemplaza colores.
- Se sienten nativos, usan la propia UI de Figma y viven dentro de tu archivo.
- Comparte dentro de un archivo hoy. La publicación en equipo y comunidad viene pronto.
02 En práctica
03 Flujos de imagen con IA
Weave
tools
Los flujos de imagen con IA de Weave ahora corren dentro de Figma Design como herramientas simples y repetibles.
- Reemplaza fondos, pon un logo en un producto, cambia el aspect ratio, sin batallar con prompts.
- Cambia los inputs y obtén resultados consistentes en cada ejecución.
- Construye flujos completos en Weave y publícalos como templates de comunidad.
03 En práctica
04 Conoce cómo trabajas
Figma
agent
Se volvió más inteligente y conectado, y se lanzó para todos.
- Los Skills empaquetan las convenciones de tu equipo en instrucciones reutilizables que ejecuta a demanda.
- Busca en la web, se conecta a Notion, Slack y GitHub vía MCP, y acepta archivos adjuntos.
- Los chats del agente se comparten con tu equipo por defecto, para que construyan sobre las ideas del otro.
04 En práctica
05 Superficies expresivas
Shader fills
& effects
Describe el look, o sube una referencia, y el agente construye un shader que puedes afinar en el canvas.
- Los effects transforman una capa; los fills actúan como un nuevo material. Apílalos libremente.
- Cada shader viene con controles reales, parametrizados por defecto.
- WebGPU bajo el capó. Exporta a código y a Figma Make vía MCP.
05 En práctica
06 Código en el canvas
Code on
the canvas
Explora múltiples direcciones con código real e interactivo, junto a tu equipo, directo en el canvas.
- Agrega una capa de código desde la barra, convierte un frame o deja que el agente lo genere. Parte de un template o importa un repo de GitHub.
- Duplica para probar alternativas. Compara cómo se sienten realmente: mueve y redimensiona elementos y obtén respuesta inmediata en el código.
- Extrae diseños para convertir el código en capas editables de Figma, y empuja los cambios a tu repo para que todo el equipo los vea.
06 En práctica
Explora todas tus alternativas
Muévete entre tus materiales
Refina con tu criterio
Trabajando con el agente
Los buenos prompts importan más que nunca
“Crea un…”
Plugin · Efecto de shader personalizado · Fill de shader personalizado
“que haga…”
describe qué debe lograr la herramienta
cómo el efecto transforma una superficie
cómo debe verse y comportarse el fill
cómo el efecto transforma una superficie
cómo debe verse y comportarse el fill
“con los siguientes controles…”
lista cómo quieres personalizar cada instancia.
e.g. subir archivo, selector de color, intensidad
e.g. subir archivo, selector de color, intensidad
Del evento
Mis favoritos
La definición de Waymo de una buena señal
El framework IEU para buenas prácticas
Hacer, hacer, hacer, explorar, refinar, hacer más, elegir
¿Y qué significa para nosotros?
Conclusiones
Motion es ahora un primitivo del sistema de diseño
Las variables de animación en componentes significan consistencia de movimiento a escala, relevante para cada sistema de diseño que construye frog.
El handoff entre código y diseño está colapsando
La línea entre diseño y código se está borrando. Motion y código como materiales significa entregas más cortas y prototipos honestos sobre cómo se comportan las cosas.
Agentes como compañeros: aprender haciendo y compartiendo
Los hilos de agente compartidos cambian cómo colaboramos. Más pensamiento visible, menos exploraciones aisladas. Skills y conectores personalizados hacen que nuestros flujos sean reutilizables.
