Cómo prototipar navegación y scroll en Figma

Curso de Fundamentos de Diseño de Interfaces UX/UI

Contenido del curso

Intro

Heurísticos

Básicos de User Interface

Animación

Cierre

Live Class

20
Conceptos Básicos de Diseño de Interfaces (UI)
60:23 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:008:04

Cómo prototipar navegación y scroll en Figma

Curso de Fundamentos de Diseño de Interfaces UX/UI

Clase 17 de 20

Clase 17 / 20

Recursos

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].

Selecciona el frame del header.
Activa Fixed position when scrolling. Verás una etiqueta Fixed sobre el elemento.
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]:

Selecciona el frame que disparará la acción, por ejemplo una imagen del feed.
En el panel de prototipo, elige el disparador On click.
Arrastra la flecha hasta el frame Detail.
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.

Comentarios (39)39 comentarios

Luis Leandro Leones

Hace 4 años

¡Gracias! En mi ruta para Product Designer está Figma...pero luego de esta clase quedé con más emoción y motivación

Miguel Ángel Bolaños Quiñonez

¿Cómo vas con tu ruta?

Paula Alejandra González Cárdenas

Hoy he aprendido todo lo necesrio para terminar mi prototipo, no puedo creer lo que hace 8 minutos por mi vida, grcias Platzi <3

Carlos Andrés Negrette Bolívar

Hace 3 años

¡La práctica hace magia!

Santiago Navas Calero

Ya empezaste con los prototipos entre componentes y ahora con las nuevas interacciones? ajajjaj, es increible!!

Raúl Adolfo Sánchez Rodríguez

SCROLL

Podemos añadir un scroll en nuestro diseño siguiendo los pasos:

Brian Ortiz

Mis notas de la clase:

Objetivos y destinos: definir punto de llega y de salida.
Interacción: disparador de la acción.
Transiciones y animaciones: cómo moverse de A hasta B.
Previsualiza el prototipo, todos los cambios pueden afectar al fichero.

Gianella Vilca

Elementos:

Objetivos y destinos
Interacción
Transiciones o animaciones
Previsualizar el prototipo (importante que sea aparte)

Sandra Patricia Novoa Enciso

Buen día! Nunca he llegado a manejar Figma, pero gracias a estas clases me ha llamado mucho la atención el funcionamiento y la cantidad de cosas que se pueden realizar ahí.

MATEO CALLEJAS HOLGUIN

Es bastante util y genial, si ya tienes relación con programas de diseño se te hara super facil

Carlos Eduardo Lopez rodriguez

Hace 2 años

Si ya manejas Photoshop es muy pero muy similar yo prototipe algo sin ver las clases no me fue difícil claro que tomar los cursos es lo mejor pero en esa ocasión fluí con mi conocimiento en edición

Jesús Manuel Pastor Pacheco

¿Cuál es la clave de acceso para el archivo de Figma que está en la descripción de esta clase?

Por ahora se encuentra con el acceso restringido :c

Carlos Ramos

Clase 17 - Prototipado en Figma

¿Qué elementos debemos definir cuándo vamos a prototipar en Figma?
- Objetivos y destinos.
- Interacción.
- Transiciones o animaciones.
- Previsualiza el prototipo
¿Qué representa el elemento “Objetivos y destinos” en el prototipado en Figma?
- Esto nos permite navegar entre diferentes elementos del producto, es decir, llevarnos de un lado a A un lado B.
¿Qué representa el elemento de “Interacción” en el prototipado en Figma?
- Esto representa el evento que asignamos a un elemento A para llegar al elemento B, por ejemplo:
  - Hacer click.
  - Pasar el cursor sobre el elemento.
¿Qué representa el elemento “Transiciones o animaciones” en el prototipado en Figma?
- Esto representa el cómo nos vamos a mover de un elemento A a un elemento B.
¿Qué representa el elemento “Previsualiza el prototipo” en el prototipado en Figma?
- Esto nos habla de que debemos de tener cuidado a la hora de hacer cualquier cambio sobre el archivo sobre el que estamos trabajando, ya que los archivos en Figma son elementos vivos y podemos dañar nuestro diseño sin darnos cuenta. Por esta razón se recomienda trabajar sobre una copia que podemos modificar.

Jorge Almanza

Pedro Isaac Aguilar

Buena introducción al trabajo en el software más popular para UI y UX hoy en día: Figma.

Oscar Alejandro García Chávez

el "fix position when scrolling" ahora está en la barra de prototipado

ANGIE XIMENA TRUJILLO ARIAS

Resumen de la clase: Prototipando en Figma

Definición de Prototipos: Se introduce la importancia de los prototipos en el diseño, destacando su función como una representación visual interactiva del producto.
Elementos Clave:
- Objeto A y Destino B: Identificar el objeto que inicia la interacción y el destino al que lleva.
- Interacciones: Define las acciones que inician la interacción (clic, arrastrar, etc.).
- Transiciones o Animaciones: Describe cómo se mueven entre elementos.
Previsualización: Se enfatiza que el prototipo es un "fichero vivo", donde cualquier cambio afecta su presentación. Se recomienda trabajar en un fichero separado durante pruebas.
Demo en Figma:
- Se presenta una aplicación móvil como ejemplo, mostrando cómo fijar cabecera y footer durante el scroll.
- Se enseña a añadir interacciones para navegar entre páginas, cómo realizar scroll vertical y personalizar animaciones.
Conclusión: La clase concluye invitando a explorar más sobre el uso de Figma en el diseño de interfaces.

Nayfer Carolina

Debería poder acceder al recurso de figma que está en lecturas recomendadas, pero, me dice que no tengo acceso, cómo se supone sigue uno el ejercicio?

Te recomiendo que ingreses a Figma Community y dupliques algun proyecto libre que sea de tu preferencia y puedas practicar y explorar

brandon camilo quintero martinez

Hola, alguien me puede dar acceso al link de Figma no puedo ingresar ya me registre pero me pide la confirmación.

Matías Alejandro Abarca Morales

Hace un año

Necesito lo mismo :(

JONATHAN RUBEN HERNANDEZ GONZALEZ

Hace 10 meses

Estoy en la misma situación

Josué Emanuel Pérez Rodriguez

la estructura de firma parece haber cambiado por lo que es algo difícil seguir las indicaciones cuando las herramientas no están en el mismo lugar

Andrea Tobón Fernández

Hola, no puedo acceder al archivo de figma ayuda por favor gracias!!

Se encuentra inhabilitado, pero en Figma community puedes practicar con algun recurso gratuito

David Rangel

Hice un sketch sencillo para poder hacer lo de la clase yo mismo, pero no me apareció la opción "Fix position when scrolling" debe de tener codiciones especiales para aparecer, me parece. ¿cuáles son dichas condiciones? Entiendo que los componentes de lo que hice no son iguales, pero ¿cómo hacerlos?

Ana Maria Betancur

Me pasa igual

Alejandra Beltrán

Hola, donde me enseñan hacer esto desde cero?

Priscila Sasha Eutushenko

Wow! Amé esta clase! :D

William David Vargas Vélez David Vargas Vélez

Si no te aparece la opción fix position when scrolling, este video puede serte útil (está en inglés):

https://www.youtube.com/watch?v=aWq6gzccqEY

Intro

Fundamentos de Diseño UI con Figma para Principiantes

Fundamentos del Diseño Digital: Pantallas y Color

Figma como herramienta principal de UX/UI

Historia del diseño: arte, HCI y buen diseño

Heurísticos

Principios heurísticos de percepción en UX

Principios Heurísticos de Percepción y Comportamiento

Principios Heurísticos de Relación y Jerarquía en Diseño

Principios heurísticos de forma en diseño

Principios Heurísticos de Forma: Iconos, Remarcar y Proporción Áurea

Principios Heurísticos de Interacción en Diseño Digital

Básicos de User Interface

Arquitectura de información en apps móviles

Tipografía y sus propiedades en Figma

Vectores y operaciones booleanas en Figma

Qué es un sistema de diseño y cómo usarlo

Organización de archivos en Figma para equipos

Animación

Principios de animación en diseño digital

Cómo prototipar navegación y scroll en Figma

Cierre

Exploración de Portafolios en Figma para Inspiración Creativa

Diseño Digital: Principios, Herramientas y Colaboración en Figma

Live Class

Conceptos Básicos de Diseño de Interfaces (UI)

Cómo prototipar navegación y scroll en Figma

Progreso del curso

Intro

Heurísticos

Básicos de User Interface

Animación

Cierre

Live Class

Recursos

Recursos