Herramientas · 2 MIN

Figma Motion: la animación entra en el canvas

Figma Motion trae keyframes y timeline directamente al canvas. Para los equipos, eso cambia la ruptura del handoff.

Figma Motion: la animación entra en el canvas
UBICACIÓN
Todo el mundo
AUTOR
Aashwin Shrivastava
PUBLICADO
25 jun 2026
IMAGEN
GENERADO CON IA

Traducción generada automáticamente con IA. La versión alemana es el original revisado por la redacción.

Figma Motion cierra el hueco donde diseño e implementación se separaban hasta ahora en las animaciones. Presentado en la Config 2026 (Figma), la herramienta trae un timeline con keyframes directamente al canvas, en lugar de externalizar el movimiento a After Effects, Rive o Lottie y describirlo después con esfuerzo. Para un equipo, la novedad es menos la animación en sí que lo que cambia en la ruptura del handoff.

01. EL PROBLEMA NUNCA FUE ANIMAR, SINO EL HANDOFF

Hasta ahora el movimiento de UI surgía fuera de Figma. La diseñadora lo construía en una segunda herramienta, exportaba un vídeo o una descripción, y el desarrollo tenía que reconstruir las curvas y los tiempos, a menudo a ojo. En ese proceso se pierde precisión: una curva de easing se vuelve una idea aproximada, un timing una estimación. Justamente esa ruptura, no la falta de herramientas de animación, ha hecho inconsistente el movimiento en muchos productos.

02. QUÉ APORTA FIGMA MOTION EN CONCRETO

Tres cosas cambian el flujo de trabajo de forma perceptible:

  • Timeline en el canvas. Keyframes, presets y control de movimiento residen donde el diseño ya vive. Sin cambiar a una segunda herramienta.
  • Movimiento como parte del sistema de diseño. Un componente se anima una vez, y el movimiento viaja como el color o la tipografía por cada pantalla y cada archivo. Ese es el punto que impone la consistencia en lugar de esperarla.
  • Handoff legible. En el Dev Mode todo el timeline es visible: cada valor de timing, cada curva de easing, cada keyframe. La exportación va como CSS, JSON o React listo para el framework, además de MP4, WebM, SVG animado y GIF.

Con ello el desarrollo lee el movimiento en lugar de interpretarlo. Ese es el verdadero desplazamiento.

03. DÓNDE ESTÁ EL PERO

Una herramienta integrada no es automáticamente la correcta para cada caso. El trabajo de motion complejo y narrativo, por ejemplo una pieza de marca elaborada, sigue siendo cosa de herramientas especializadas. Figma Motion apunta a la animación de interfaz: estados, transiciones, microinteracciones, es decir justamente lo que se necesita a diario en el producto y hasta ahora sufría en la ruptura del handoff. Para esa clase de movimiento, la integración es la ganancia. Para todo lo que va más allá, la caja de herramientas sigue siendo mixta.

04. PARA QUIÉN VALE LA PENA MIRARLO

Quien mantiene un producto con patrones de UI recurrentes es quien más se beneficia: el movimiento definido una vez permanece consistente, y la implementación recibe valores exactos en lugar de aproximaciones. El movimiento no es aquí decoración, sino parte de la comprensibilidad de una interfaz, un punto que desarrollamos con más detalle en el papel clave del UX en el desarrollo de software. Figma Motion hace por fin editable esa parte en un solo lugar.

← Signals

Wayne Dyer

“Si cambias la forma en que miras las cosas, las cosas que miras cambian.”