Animaciones en Figma: guía paso a paso para dominarlas

Por qué animar en Figma ya no es opcional

Si entregas un diseño estático a un cliente o a un equipo de desarrollo, te van a pedir explicaciones. Hoy se espera que un diseñador UX/UI muestre cómo se mueve la interfaz, no solo cómo se ve parada. Figma lleva años integrando herramientas de animación y prototipado que permiten simular el comportamiento real de una app sin escribir una línea de código.

Esto no es un capricho estético. Los estudios que marcan tendencia, desde IDEO hasta Ustwo o Fjord (la división de diseño de Accenture), llevan tiempo tratando la animación como parte del propio diseño de producto, no como la guinda del pastel. Y los premios del sector lo confirman: en los Awwwards, los Webby Awards o los CSS Design Awards, la microinteracción bien resuelta pesa tanto como la composición visual. Si tu prototipo no se mueve, estás compitiendo con una mano atada.

Domina Smart Animate antes de nada

Smart Animate es la función que hace que dos frames con el mismo nombre de capa se transformen el uno en el otro de forma automática. Es la base de casi todo lo que vas a construir después.

El truco está en la disciplina de nombrado. Si tienes un botón que cambia de color al pulsarlo, la capa del botón en el frame inicial y en el frame final tiene que llamarse exactamente igual. Si no coincide el nombre, Figma no sabe qué transformar y simplemente hace un corte seco entre una pantalla y otra.

Algunas recomendaciones que dan resultado:

• Trabaja con componentes desde el principio, no con capas sueltas. Los componentes mantienen la estructura interna más ordenada.
• Cambia solo lo necesario entre frames: posición, tamaño, opacidad o color. Cuantas más propiedades muevas a la vez, más raro se ve el resultado.
• Usa Auto Layout en los elementos que se reordenan o se expanden. Sin Auto Layout, Smart Animate improvisa trayectorias que a veces parecen un accidente.

Construye prototipos con interacciones reales

Un prototipo bueno no enseña una animación, enseña un flujo. Conecta los frames con triggers que se parezcan a lo que hará el usuario real: On Click, On Drag, While Hovering, After Delay.

Aquí es donde se nota la diferencia entre alguien que ha visto un tutorial y alguien que entiende de interacción. Por ejemplo:

• Un menú desplegable debería reaccionar con On Click y cerrarse con otro On Click fuera del área, no con un simple temporizador.
• Los overlays (esos paneles que aparecen encima de la pantalla, como un modal o un toast de confirmación) se manejan mejor con la opción Open Overlay combinada con una posición manual, para que no salgan pegados al borde.
• El Smart Animate funciona genial para transiciones entre pantallas completas, pero para elementos pequeños dentro de una misma pantalla, a veces conviene usar Move In o Push, que dan más control sobre la dirección.

Si quieres ver cómo se aplica esto a un caso real de producto digital, en el programa de diseño UX/UI de TRAZOS se trabaja con briefs de estudios reales donde el prototipo tiene que defenderse solo, sin que el diseñador esté al lado explicando qué se supone que pasa.

Las curvas de easing son el detalle que nadie nota... hasta que falta

El easing decide cómo se acelera y frena un movimiento, y es lo que separa una animación profesional de una que parece hecha con PowerPoint. Figma ofrece varias curvas predefinidas y también la opción de crear una curva Bézier personalizada.

Algunas guías básicas que funcionan casi siempre:

• Ease Out para elementos que entran en pantalla. El movimiento arranca rápido y frena al llegar, que es como se mueven las cosas en el mundo real.
• Ease In para elementos que salen. Empiezan lentos y aceleran al desaparecer.
• Linear casi nunca es buena idea, salvo en animaciones de carga continua tipo spinner.
• Duraciones entre 150 y 300 milisegundos para microinteracciones. Si se alarga más, el usuario empieza a notar que está esperando.

Aquí hay una opinión que defiendo sin complejos: el 90% de los prototipos amateur usan la curva por defecto sin tocarla nunca. Y se nota muchísimo. Dedicar diez minutos a ajustar el easing de un botón cambia por completo cómo se percibe la calidad de toda la interfaz.

Componentes interactivos y variantes: la parte que ahorra horas

Cuando un componente tiene variantes (por ejemplo, un botón con estados normal, hover, pressed y disabled), puedes animar la transición entre esos estados sin duplicar frames enteros. Es una de las funciones que más tiempo ahorra en proyectos grandes.

La clave está en construir el sistema de componentes bien desde el inicio del proyecto, no parchearlo después. Un sistema de diseño ordenado con variantes coherentes te permite:

• Cambiar el color o el texto de un botón en un solo sitio y que se propague a todo el archivo.
• Animar estados hover o focus de forma consistente en toda la interfaz, sin tener que repetir la configuración cien veces.
• Entregar al equipo de desarrollo (que probablemente trabaje con React o directamente en HTML y CSS) una referencia clara de cómo debe comportarse cada estado, algo que reduce muchísimo el ida y vuelta entre diseño y programación.

Errores que delatan que estás empezando

Hay fallos típicos que se repiten en casi todos los prototipos de gente que está aprendiendo, y son fáciles de corregir en cuanto los identificas.

• Animar todo a la vez. Si mueves seis elementos distintos en el mismo frame con la misma duración, el resultado parece caótico. Escalona las animaciones con pequeños delays.
• Ignorar la jerarquía de capas. Smart Animate sigue el orden de las capas dentro del frame. Si lo desordenas, la animación puede saltar de forma rara.
• Prototipos sin estado de error o de carga. Un flujo real no es solo el camino feliz. Si el usuario escribe mal una contraseña, tiene que pasar algo visible, y eso también se anima.
• Confundir animación con decoración. Una animación que no comunica nada, que solo está para lucirse, distrae y ralentiza la percepción de velocidad de la interfaz.

Estos errores se corrigen con práctica y, sobre todo, con la costumbre de mirar animaciones ajenas con ojo crítico. Revisa apps que uses cada día, fíjate en cómo se abre un modal, cómo reacciona un botón al pulsarlo, y pregúntate qué curva de easing y qué duración están usando.

Cómo seguir aprendiendo sin quedarte solo con lo básico

Figma cambia cada pocos meses y sacan funciones nuevas de prototipado con bastante frecuencia, así que quedarse en lo que aprendiste hace un año no funciona en este oficio. Sigue los canales oficiales de Figma, pero sobre todo, deconstruye trabajos reales: busca en Awwwards proyectos ganadores y analiza sus microinteracciones frame a frame si puedes.

La animación en Figma es una herramienta más dentro del diseño de producto digital, no un fin en sí misma. Sirve para comunicar comportamiento, jerarquía y feedback al usuario. Si dominas Smart Animate, las curvas de easing y los sistemas de componentes con variantes, ya tienes el 80% del camino recorrido. El resto es cuestión de mirar mucho, practicar y no tener miedo de rehacer una animación quince veces hasta que se sienta natural.