Pasar de rectángulos estáticos a interfaces que se sienten vivas es el momento más emocionante del proceso de diseño. El prototipado en Figma permite expresar las verdaderas intenciones detrás del software, conectando cada elemento visual con la experiencia real del usuario. Aquí se explican las interacciones fundamentales que transforman un diseño plano en algo funcional y tangible.
¿Cómo lograr el scroll vertical en Figma?
El scroll vertical es probablemente la interacción más importante en diseño digital. Para previsualizarla dentro del canvas, basta con presionar shift + espacio [1:00]. Pero para que funcione correctamente, el contenido dentro del frame debe extenderse más allá de los límites visibles del contenedor.
Una vez que el frame tiene más contenido del que cabe en pantalla, se configura desde la pestaña de prototipado. Allí se indica que el comportamiento de overflow debe ser scroll vertical [2:30]. Así, todo lo que sobrepase el límite inferior se vuelve accesible al desplazarse.
Pero hay un detalle clave: ciertos elementos deben quedarse quietos mientras el resto se mueve. Para lograrlo, se selecciona el objeto —por ejemplo, la barra superior o el bottom bar— y en comportamiento de scroll se establece como fixed [3:07]. Esto garantiza que la navegación principal permanezca siempre visible.
¿Cómo funciona el scroll horizontal con chips y filtros?
El scroll horizontal es ideal para elementos como chips de filtrado, donde el usuario desliza lateralmente para ver más opciones sin abandonar la pantalla [3:48].
El truco consiste en crear un frame contenedor más pequeño alrededor de los elementos que deseas desplazar. Se seleccionan los chips dentro del Auto Layout, se agrupan con command + option + G, y luego se reduce el ancho del contenedor hasta el borde deseado manteniendo las proporciones y el padding [4:50]. Después, en la pestaña de prototipado, se configura el overflow como scroll horizontal. Al previsualizar, los chips se deslizan perfectamente dentro de su espacio asignado.
¿Qué es la interacción on tap y cómo crear transiciones entre pantallas?
Más allá del scroll, el primer gran tipo de interacción es el clic o on tap [5:52]. Por ejemplo, al tocar el nombre de un sendero, se abre una pantalla de detalle completamente nueva.
Para construirlo, se selecciona el objeto origen en modo prototipo (accesible con shift + E [6:37]). Al pasar el mouse sobre él, aparece un punto blanco con borde azul. Al arrastrarlo hasta el frame de destino, Figma pregunta qué tipo de trigger usar. En dispositivos móviles se selecciona on tap en lugar de on click, porque la interacción es táctil [7:04].
La animación predeterminada es instantánea, pero para simular la experiencia real de una app iOS, se recomienda usar move in de derecha a izquierda [8:00]. El tipo de curva ideal cuando hay dudas es ease in and out, y la duración óptima es 400 milisegundos [8:20]. Esto genera la sensación de pasar la página de un libro.
¿Cómo prototipar la interacción on drag para tarjetas deslizables?
El on drag permite simular el gesto de halar una tarjeta hacia arriba para revelar más contenido [9:18]. A diferencia del tap, aquí el usuario arrastra con el dedo y la interfaz responde en tiempo real.
Se configura de forma similar: se arrastra la conexión desde el objeto hasta el frame destino y se cambia el trigger a on drag. Para la animación, se utiliza Smart Animate [10:30], que identifica los objetos compartidos entre ambos frames y los anima de forma inteligente, uno a uno.
- La interacción de ida y vuelta debe configurarse por separado.
- Es fundamental verificar que ambas direcciones usen on drag y no on tap por accidente [11:40].
- Los detalles importan: en estos pequeños ajustes se nota el cuidado profesional del prototipo.
¿Qué otras interacciones ofrece Figma para prototipos avanzados?
El estado de hover aplica principalmente a interfaces desktop [12:16]. Se crea seleccionando el objeto, conectándolo al frame con el estado visual deseado y eligiendo el trigger while hovering. Mientras el cursor permanezca sobre el elemento, se muestra el cambio —por ejemplo, una reducción de opacidad—. La animación puede ser instantánea.
Por último, la interacción de teclado o gamepad permite que al presionar una tecla específica se pase a otro frame [13:06]. En el trigger se selecciona key or gamepad y se asigna la tecla deseada. Un dato curioso: si conectas un control de Xbox al computador, Figma también reconoce esos inputs [13:28].
- On tap: para toques en pantalla.
- On drag: para arrastrar elementos.
- While hovering: para respuesta al cursor.
- Key or gamepad: para entradas de teclado o controles físicos.
Con estos superpoderes de prototipado, el siguiente paso es aplicarlos al proyecto y compartir el resultado en los comentarios para recibir feedback directo.
