Contenido del curso
Smart Animate y After Delay en Figma
Si tu diseño en Figma se ve bien pero estático, te falta darle vida con animación. Aprende a crear prototipos animados en Figma usando Smart Animate y After Delay, dos herramientas que transforman pantallas planas en experiencias que se sienten reales, sin necesidad de que el usuario haga clic.
¿Qué es Smart Animate y para qué sirve en Figma?
Smart Animate es la función de Figma que interpola automáticamente las diferencias entre dos frames y genera una animación fluida entre ellos. Si un elemento cambia de posición, tamaño, opacidad o color, Smart Animate se encarga de animar esa transición por ti.
¿Qué es Smart Animate en Figma? Es una transición que detecta los cambios de un mismo elemento entre dos frames y los anima de forma automática, sin que tengas que programar la animación cuadro por cuadro.
En la práctica, esto significa que puedes mover un logo, cambiarle la opacidad, rotarlo o aplicarle un gradient y Figma te entrega el movimiento ya resuelto [01:30].
¿Cómo funciona el trigger After Delay sin acción del usuario?
La mayoría de prototipos reaccionan a un on tap, on drag o while hovering. Pero hay momentos, como una pantalla splash o un preloader, donde nadie toca nada y aun así la pantalla avanza sola. Para eso existe After Delay.
Es el último trigger del menú de prototipado y le dice a Figma: espera X milisegundos y luego pasa al siguiente frame.
¿Cuándo debo usar After Delay? Úsalo cuando quieras que una pantalla cambie sola tras un tiempo definido, como en una splash screen, una animación de carga o un esqueleto que precede al contenido real.
En la animación que construimos, cada transición usa 400 milisegundos de espera y otros 400 de duración en Smart Animate [02:50].
¿Cómo construir una splash screen animada paso a paso?
La interacción completa pasa por seis frames y simula la carga de una app de senderismo. El logo aparece, gira, crece, desaparece y entra el esqueleto antes del contenido final.
Cómo preparar los frames y la opacidad del isotipo
El truco está en duplicar el mismo elemento entre frames y modificar solo lo que quieres animar. Para que el logo aparezca desde abajo:
Con eso, Smart Animate detecta el cambio de posición y opacidad y lo anima como un desplazamiento ascendente con fade in [03:40].
Cómo añadir rotación, escala y gradiente al logo
En el siguiente frame, el isotipo gira y se agranda al mismo tiempo. Copia el elemento, llévalo a un tamaño de 180 píxeles y rótalo manteniendo Shift presionado para fijar un ángulo de 90 grados exactos.
El fondo también cambia: aplica el mismo gradient desde los estilos guardados en el fill para que la transición de color sea coherente. Conecta los frames con After Delay de 400 ms y Smart Animate, y el giro queda resuelto [05:20].
¿Qué es el esqueleto o preloader en UI?
El esqueleto es un patrón de interfaz que muestra bloques grises con la forma del contenido mientras la información real se carga desde el servidor. Mejora la percepción de velocidad y le indica al usuario que algo está pasando.
¿Qué es un preloader o esqueleto en UI? Es una representación visual del contenido que aún no ha cargado, hecha con formas planas que ocupan el lugar del texto y las imágenes reales para que la app no se sienta vacía.
Para integrarlo en la animación, copia el contenido completo del frame tres con Enter para seleccionar todo, Command C y Command V en el siguiente frame. Asegúrate de que el isotipo quede en la capa correcta para que se desvanezca justo cuando entra el esqueleto.
Cómo ajustar el orden de capas para que la animación se vea bien
Un error común: la capa que debe desaparecer queda detrás del esqueleto y la animación se ve sucia. La solución es subir esa capa al frente para que el fade out sea visible antes de que entren los nuevos elementos. Reorganizar capas suele resolver más problemas de animación que tocar los tiempos.
Para suavizar la curva del movimiento, cambia la transición a Ease in and out en lugar de la curva por defecto. El movimiento se siente menos mecánico [07:40].
¿Cómo previsualizar y presentar el prototipo final?
Mientras construyes, presiona Shift más Espacio sobre el primer frame para abrir la previsualización rápida. Si quieres refrescar la animación desde cero, presiona R dentro del preview.
Cuando ya tengas el flujo listo, abre el modo presentación con el botón superior derecho. Figma tarda unos segundos en cargarlo, pero es la forma más fiel de mostrar tu prototipo a un cliente o equipo, porque cambia el puntero y oculta la interfaz de edición.
Renombra el flujo desde el panel de prototipado para que quede identificado, por ejemplo como prueba, y tendrás un entregable listo para compartir [09:30].
¿Cuál fue la parte más difícil de replicar esta animación en tu propio diseño? Cuéntalo en los comentarios.
