Prototipar en Figma te permite transformar tus diseños estáticos en experiencias navegables que reaccionan al clic, al scroll y a las animaciones, sin necesidad de salir del archivo donde trabajas. Aprenderás a definir interacciones, fijar elementos y aplicar transiciones para validar flujos con usuarios o clientes de forma realista.

Qué necesitas antes de prototipar en Figma

Antes de tocar el panel de prototipo, conviene tener clara la lógica detrás de cada interacción. Un prototipo no es solo mover pantallas, es definir un comportamiento.

Estos son los cuatro elementos básicos que debes definir [00:18]:

• Objeto y destino: el elemento A captura el evento y te lleva al elemento B.
• Interacción: el disparador que escucha A, como hacer clic, arrastrar, pasar el cursor o presionar una tecla.
• Transición o animación: la forma en que te mueves desde A hasta B.
• Previsualización: la prueba real de cómo se siente el flujo.

¿Qué es un disparador en un prototipo? Es la acción del usuario que activa la navegación, por ejemplo on click, on drag o on hover. Sin disparador, no hay interacción.

Algo importante: tu prototipo en Figma es un archivo vivo [01:18]. Cualquier cambio mínimo en el diseño afecta al prototipo en tiempo real. Si vas a testear con clientes o usuarios, duplica la página o el archivo para no romper la demo mientras sigues iterando.

Cómo hacer scroll en un prototipo manteniendo header y footer fijos

Imagina una app tipo Instagram con tres zonas: cabecera, feed central y footer con iconos [02:00]. Lo natural es que el usuario pueda hacer scroll en el contenido mientras la cabecera y la barra inferior permanecen visibles.

Cómo fijar elementos al hacer scroll

El truco está en la propiedad Fixed position when scrolling dentro de Constraints [02:50].

1. Selecciona el frame del header.
2. Activa Fixed position when scrolling. Verás una etiqueta Fixed sobre el elemento.
3. Repite el mismo paso con el footer.

Con eso le dices a Figma que esos dos bloques no se moverán cuando el usuario desplace la pantalla.

Cómo activar el scroll vertical en el contenido

Ahora toca el área central. Selecciona el frame del content, ve al panel de Prototype y busca la opción Overflow scrolling [03:34]. Cuando el contenido es más alto que el contenedor, eliges Vertical scrolling.

Al previsualizar, el feed se desliza solo dentro de su área y el resto queda fijo. No tienes que recargar nada, el prototipo responde al instante.

Cómo conectar pantallas con interacciones y animaciones

Navegar entre pantallas es donde el prototipo cobra vida. Aquí defines qué pasa cuando el usuario toca un elemento concreto.

Cómo crear una navegación con on click

Para llevar al usuario desde el home a una pantalla de detalle [04:30]:

1. Selecciona el frame que disparará la acción, por ejemplo una imagen del feed.
2. En el panel de prototipo, elige el disparador On click.
3. Arrastra la flecha hasta el frame Detail.
4. Selecciona Navigate to como acción.

Para el camino de regreso, repites el proceso desde la flecha del header de Detail apuntando al Home. Así consigues una navegación lineal entre las dos pantallas.

¿Cuál es la diferencia entre on click y on hover? On click se activa cuando el usuario hace clic o toca el elemento, mientras que on hover responde al pasar el cursor por encima sin pulsar.

Cómo añadir transiciones suaves entre pantallas

La animación se configura en la misma conexión [05:53]. Al seleccionar la flecha entre frames, eliges el tipo de transición: instantánea, move in, push, slide o disolución, con dirección de izquierda a derecha o de arriba abajo.

También puedes ajustar la curva: lineal, con aceleración o desaceleración. Y aquí entra un dato clave de usabilidad: más de 400 milisegundos se siente lento [06:17]. Lo recomendable está entre 250 y 300 milisegundos, un rango que se percibe natural sin frenar el flujo.

¿Cuánto debe durar una animación en un prototipo? Entre 250 y 300 milisegundos. Por encima de 400 ms el usuario percibe el movimiento como lento y pierde fluidez.

Cómo previsualizar y testear tu prototipo

El botón de play o Present abre la vista de presentación. Ahí compruebas que el cursor cambie sobre los elementos interactivos, que el scroll funcione donde toca y que las transiciones tengan el ritmo que buscas.

Recuerda que cualquier ajuste posterior, ya sea mover un componente o cambiar un texto, se refleja al instante. Por eso, cuando tu prototipo va a una sesión de testeo, trabaja sobre una copia. Así proteges la versión que estás iterando del diseño que vas a mostrar.

¿Qué pantalla vas a prototipar primero con scroll fijo? Cuéntame en los comentarios cómo organizas tus interacciones y qué duración de animación te funciona mejor.