Añade interacciones y transiciones a tus diseños

Concepto clave

Las interacciones y transiciones son como las puertas y pasillos de un edificio digital. Imagina que tu diseño es un edificio: cada pantalla es una habitacion, y las interacciones son las puertas que permiten a los usuarios moverse entre ellas. Las transiciones son como los pasillos que conectan esas habitaciones, definiendo como se siente ese movimiento.

En Figma, las interacciones se crean conectando elementos de diseño (como botones) a otros marcos o pantallas. Esto transforma tu diseño estatico en un prototipo que simula como funcionaria una aplicacion real. Piensa en ello como dar vida a tus wireframes: en lugar de solo mostrar pantallas, ahora puedes demostrar como los usuarios navegaran entre ellas.

Las transiciones controlan la animacion entre pantallas. No es solo cambiar de una vista a otra; es como se produce ese cambio. Por ejemplo, una transicion desvanecimiento (fade) es suave y discreta, ideal para cambios de contenido, mientras que una transicion deslizar (slide) imita el gesto natural de pasar paginas en un telefono.

Como funciona en la practica

Vamos a crear una interaccion basica paso a paso. Supongamos que tienes un boton "Iniciar sesion" en una pantalla de bienvenida y quieres que al hacer clic lleve a una pantalla de inicio de sesion.

1. Abre tu archivo de Figma y asegurate de tener al menos dos marcos: uno para la pantalla de bienvenida y otro para la pantalla de inicio de sesion.
2. Selecciona el boton "Iniciar sesion" en el primer marco.
3. En el panel derecho, ve a la pestaña Prototipo (el icono parece un play).
4. Haz clic en el pequeno circulo que aparece junto al boton y arrastralo hacia el marco de la pantalla de inicio de sesion. Esto crea una conexion.
5. En la configuracion que aparece, elige Al hacer clic como disparador (trigger). Para la animacion, selecciona Transicion inteligente o Deslizar izquierda con una duracion de 300 ms.
6. Presiona el boton de reproduccion (arriba a la derecha) para probar tu prototipo. Al hacer clic en el boton, deberias ver la transicion a la nueva pantalla.

Este proceso es la base para cualquier interaccion en Figma. Puedes aplicarlo a menus, enlaces, o cualquier elemento interactivo.

Caso de estudio

Imagina que estas disenando una aplicacion de banco movil. Un flujo comun es: pantalla de inicio → lista de cuentas → detalles de una cuenta. Vamos a aplicar interacciones y transiciones a este flujo.

Primero, en la pantalla de inicio, hay una tarjeta que muestra "Cuenta de ahorros". Creamos una interaccion desde esta tarjeta al marco de lista de cuentas, usando Al hacer clic y una transicion Deslizar izquierda. Esto simula que el usuario entra a ver sus cuentas.

Luego, en la lista de cuentas, cada item (como "Cuenta corriente") tiene una interaccion al marco de detalles de cuenta. Usamos Al hacer clic con una transicion Desvanecimiento para un cambio mas suave, ya que es un contenido detallado.

Finalmente, en la pantalla de detalles, agregamos un boton "Atras" que vuelve a la lista con una transicion Deslizar derecha, imitando el gesto de retroceso en dispositivos moviles. Esto crea una experiencia coherente y realista.

En aplicaciones reales, las transiciones suelen durar entre 200 y 500 ms. Mas rapido puede sentirse brusco; mas lento, lento. Para este caso, usamos 300 ms en deslizar y 400 ms en desvanecimiento.

Errores comunes

• Usar demasiadas animaciones diferentes: Si cada transicion es un tipo distinto, la experiencia se vuelve confusa. Solucion: Limitate a 2-3 tipos de transiciones en todo el prototipo para consistencia.
• Olvidar el boton de retroceso: En prototipos, los usuarios necesitan una forma de volver atras. Solucion: Siempre incluye interacciones de retorno, como un boton "Atras" o un gesto simulado.
• Transiciones muy lentas o rapidas: Una duracion incorrecta puede hacer que el prototipo se sienta poco natural. Solucion: Prueba con valores entre 200 ms y 500 ms; 300 ms es un buen punto de partida.
• No probar en modo presentacion: Disenar en el lienzo es diferente a verlo en accion. Solucion: Usa siempre el boton de reproduccion para probar el flujo completo.
• Ignorar la jerarquia visual: Conectar elementos pequenos o poco claros puede frustrar a los usuarios. Solucion: Asegurate de que los elementos interactivos sean evidentes, como botones bien disenados.

Checklist de dominio

1. Puedo crear una interaccion basica conectando un elemento a otro marco en Figma.
2. Se configurar al menos dos tipos de transiciones (ej., deslizar y desvanecer) con duraciones apropiadas.
3. He probado un prototipo con multiples pantallas y flujos de navegacion.
4. Incluyo interacciones de ida y vuelta (ej., avanzar y retroceder) en mis disenos.
5. Uso consistentemente 2-3 transiciones en todo el prototipo para mantener coherencia.
6. Selecciono disparadores adecuados (como "Al hacer clic") para elementos interactivos.
7. Documento o anoto las decisiones de interaccion para compartir con equipos de desarrollo.

Crea un prototipo interactivo para una aplicacion de clima

En este ejercicio, practicaras anadir interacciones y transiciones a un diseno simple. Sigue estos pasos:

1. Abre Figma y crea un nuevo archivo. Disena tres marcos (pantallas) basicos:
   • Pantalla 1: Una vista principal con un icono de sol, temperatura "25°C", y un boton "Ver detalles".
   • Pantalla 2: Una vista detallada con informacion adicional como humedad y viento, y un boton "Atras".
   • Pantalla 3: Una pantalla de configuracion con opciones como unidades (C/F) y un boton "Guardar".
2. Agrega interacciones:
   • Desde el boton "Ver detalles" en la Pantalla 1, crea una conexion a la Pantalla 2. Configura el disparador como Al hacer clic y usa una transicion Deslizar izquierda con duracion de 300 ms.
   • Desde el boton "Atras" en la Pantalla 2, conecta a la Pantalla 1. Usa Al hacer clic y Deslizar derecha a 300 ms.
   • Desde un icono de ajustes (puedes anadirlo en la Pantalla 1), conecta a la Pantalla 3 con Al hacer clic y Desvanecimiento a 400 ms.
   • Desde el boton "Guardar" en la Pantalla 3, conecta de vuelta a la Pantalla 1 con Al hacer clic y Desvanecimiento a 400 ms.
3. Prueba tu prototipo:
   • Haz clic en el boton de reproduccion en Figma.
   • Navega entre todas las pantallas usando las interacciones creadas.
   • Asegurate de que las transiciones se vean suaves y coherentes.
4. Reflexiona: ¿Como se siente la experiencia? ¿Las transiciones ayudan a entender la navegacion?

• Si no ves el panel Prototipo, haz clic en el icono de play en la barra superior derecha de Figma.
• Para conexiones mas precisas, arrastra desde el circulo del elemento hasta el centro del marco destino.
• Prueba cambiar la duracion a 500 ms si las transiciones parecen muy rapidas en el modo presentacion.

Evalua tu comprension

Completa el quiz interactivo de arriba para ganar XP.