El prototipado en Figma es la etapa donde tus diseños dejan de ser rectángulos estáticos y empiezan a sentirse como software vivo. Aquí aprenderás a configurar interacciones reales (scroll, tap, drag, hover y teclas) para que tu proyecto final de Apata se comporte como una app de verdad, ideal si estás dando tus primeros pasos como diseñador de producto.

¿Cómo activar el scroll vertical en un prototipo de Figma?

El scroll vertical es probablemente la interacción más usada del diseño digital y la primera que deberías dominar. En la pantalla de explorar de Apata, tienes una barra superior, chips de filtros y una lista larga de senderos que se extiende más allá del frame.

Para que el desplazamiento funcione, abre la pestaña de prototipado y en la sección de comportamiento de scroll selecciona vertical. Con eso Figma entiende que todo el contenido que sobresale del contenedor puede recorrerse hacia abajo [01:43].

¿Cómo dejo elementos fijos mientras hago scroll? Selecciona el objeto (por ejemplo, la barra superior o el bottom bar) y en comportamiento de scroll elige fixed. Así se quedará anclado mientras el resto se desplaza.

Para previsualizar cualquier interacción, usa shift + espacio y prueba con tu trackpad o mouse.

¿Cómo se configura el scroll horizontal en Figma?

El scroll horizontal funciona perfecto para componentes como filtros tipo chips, donde no quieres mover toda la pantalla, solo una fila. La clave está en crear un contenedor del tamaño exacto donde quieres que ocurra el desplazamiento.

Selecciona los elementos con auto layout y presiona command + option + G para envolverlos en un nuevo frame. Después, mantén presionada la tecla command mientras reduces el ancho para ignorar los constraints y ajustarlo al borde de la pantalla, conservando el padding de 24 a cada lado [05:32].

Nombra ese contenedor algo claro como scroll-horizontal y, en la pestaña de prototipado, configura el overflow como horizontal scroll. Listo: ahora los chips se deslizan sin mover el resto del diseño.

¿Qué tipos de interacciones puedo crear en Figma?

Más allá del scroll, Figma ofrece varios triggers que cubren prácticamente cualquier flujo de una app o sitio web. Cada uno responde a un gesto distinto del usuario.

¿Cómo funciona la interacción on tap o on click?

Cuando quieres que el usuario navegue de una pantalla a otra haciendo clic, este es tu trigger. En Apata, al tocar el nombre del sendero Muir Woods, debe abrirse su pantalla de detalle.

Selecciona el objeto, activa el modo prototipo (shift + E alterna entre diseño y prototipo) y arrastra el punto azul hacia el frame destino. Configura así:

• Trigger: on tap, porque el usuario está en un dispositivo móvil.
• Acción: navigate to y elige el frame de destino.
• Animación: move in de derecha a izquierda, imitando el flujo nativo de iOS.
• Easing: ease in and out, la opción más natural cuando dudes.
• Duración: 400 milisegundos, el tiempo óptimo para que la transición se sienta fluida [10:05].

¿Cómo crear un on drag con Smart Animate?

El on drag simula cuando el usuario arrastra una tarjeta hacia arriba para revelar más contenido, como ampliar la ficha del sendero para ver detalles y oscurecer la imagen de fondo.

Desde el objeto, crea la conexión al frame destino y elige on drag como trigger. Para la animación selecciona Smart Animate, una función que detecta automáticamente los objetos comunes entre dos frames y los anima uno a uno, sin que tengas que configurar cada movimiento [12:48].

¿Qué es Smart Animate en Figma? Es un tipo de animación que reconoce objetos compartidos entre dos frames y transiciona sus propiedades (posición, tamaño, opacidad) de forma automática.

No olvides crear también la interacción de regreso: arrastrar hacia abajo debería devolverte a la pantalla anterior. Si pones on tap por error en el regreso, la interacción no responderá al gesto correcto. Cámbialo a on drag y todo encaja.

¿Cómo simular el estado hover y los inputs de teclado?

El while hovering aplica sobre todo en interfaces de desktop, donde el cursor pasa por encima de un botón y este cambia su opacidad o color. La animación puede ser instantánea, no necesita más complejidad.

Para teclados, el trigger es key | gamepad, útil para prototipar campos de texto, atajos o incluso videojuegos. Asigna una tecla específica (por ejemplo, la letra A) y al presionarla durante la previsualización, Figma navegará al frame configurado [16:38]. Dato curioso: si conectas un control de Xbox a tu computador, Figma también lo reconoce.

¿Qué necesitas para prototipar tu proyecto final en Apata?

Con estos cinco triggers (scroll, on tap, on drag, while hovering y key) tienes el repertorio base para construir un prototipo realista. La diferencia entre un buen y un gran prototipo está en los detalles: revisar dos veces que el trigger de regreso coincida con el de ida, ajustar las animaciones a 400 milisegundos y usar Smart Animate cuando los objetos se transforman entre pantallas.

Revisa los assets compartidos del proyecto Apata, que ya incluyen componentes con variables, y empieza a prototipar lo que tengas hasta ahora. Compárteme tu avance en los comentarios para darte feedback.