Lograr que un prototipo se sienta como una aplicación real depende de pequeños detalles: una pestaña que se desliza con suavidad, un bottom sheet que aparece desde abajo o un diálogo que flota sobre la pantalla. Todo esto se consigue dominando smart animate y los overlays en Figma, dos herramientas que transforman prototipos estáticos en experiencias fluidas y creíbles.
¿Qué diferencia a smart animate de una transición instantánea?
En prototipos anteriores se utiliza instant, un corte directo entre frames sin ningún tipo de movimiento. Smart animate funciona de manera distinta: detecta los objetos que existen en ambos frames y anima únicamente las diferencias [0:28]. Si un indicador de pestaña activa está en "Inicio" en el frame A y en "Transacciones" en el frame B, smart animate desliza solo ese elemento mientras el resto permanece inmóvil.
Para que el efecto funcione correctamente, el elemento animado —en este caso la burbuja indicadora— debe tener posición absoluta y estar separado de los demás links [1:06]. De ese modo, Figma identifica el mismo objeto en ambos frames y calcula la interpolación.
¿Cómo se configura la curva de animación?
Al seleccionar smart animate aparecen opciones de easing: ease in, ease out, ease in ease out y ease in back [1:52]. Cada una define la aceleración y desaceleración del movimiento. Una duración de 400 ms permite visualizar el efecto con claridad durante pruebas, aunque para producción conviene reducirla a unos 160 ms para que se sienta ágil [2:26].
¿Cómo se aplica a varias pestañas?
- Seleccionar el ítem destino en modo prototipo.
- Cambiar la animación de instant a smart animate.
- Ajustar la duración y el easing.
- Repetir el proceso para cada pestaña restante.
El resultado es una barra de navegación donde el indicador se desplaza con naturalidad entre las secciones [2:50].
¿Cómo crear transiciones entre páginas con move in y back?
Cuando se necesita pasar de una lista de transacciones al detalle de una transacción específica, la animación adecuada ya no es smart animate sino una transición entre páginas [3:05]. Figma ofrece varias opciones: move in, move out, push, slide in y slide out.
- Move in: el frame destino entra por encima del actual.
- Move out: el frame actual sale y revela el siguiente.
Para simular la navegación típica de una app móvil se usa move in de derecha a izquierda con ease in a 280 ms [3:55]. Al probarlo, el detalle de la transacción se desliza sobre la lista.
El botón de regreso se configura con la acción back en lugar de apuntar a un frame fijo [4:18]. Esto es importante porque el punto de entrada puede variar: el usuario podría llegar al detalle desde el dashboard o desde la lista de transacciones, y back siempre regresa al origen correcto.
¿Cómo funcionan los overlays y el swap overlay?
Los overlays permiten mostrar elementos flotantes sin abandonar la pantalla actual. Al conectar un fab button con un bottom sheet, la acción cambia de "navegar" a open as overlay [5:15]. Las opciones disponibles incluyen:
- Asignar un background con opacidad (por ejemplo, 10 %).
- Activar close when clicking outside para cerrar al tocar fuera del elemento.
- Definir la animación de entrada: move in de abajo hacia arriba a 300 ms.
Al cerrar, Figma reproduce la animación en sentido inverso automáticamente [6:27]. El botón de cierre (X) utiliza la acción close overlay, diferente al back de navegación entre páginas.
¿Qué es swap overlay y cuándo usarlo?
Cuando dentro de un overlay se necesita alternar entre dos vistas —por ejemplo, entre "Gasto" e "Ingreso"— se emplea swap overlay [6:55]. Esta acción reemplaza el overlay actual por otro sin cerrarlo ni generar una navegación nueva.
Un detalle clave: si el swap conserva la animación de entrada (move in desde abajo), se repetirá cada vez que se alterne entre pestañas. La solución es configurar la transición del swap como instant [8:00]. De esa forma el cambio es inmediato y la experiencia se siente coherente.
- Open as overlay: abre un elemento flotante sobre la pantalla.
- Close overlay: cierra el elemento flotante.
- Swap overlay: reemplaza un overlay por otro sin cerrar la capa.
Con estas tres acciones combinadas, el prototipo permite abrir el bottom sheet, alternar entre gasto e ingreso, confirmar la transacción y regresar al listado con animaciones limpias y predecibles [7:30].
El prototipo ahora se siente vivo, aunque sigue siendo lineal: cada interacción lleva siempre al mismo destino. Para agregar memoria —como recordar si la última transacción fue ingreso o gasto— se necesitan variables y expresiones condicionales, un paso que se aborda más adelante. ¿Ya probaste estas animaciones en tus propios prototipos? Comparte tu experiencia en los comentarios.
