Prototipado y Diseño de Interacción

¿Por qué importa el prototipado?

Un diseño estático en Figma es solo la mitad del trabajo. Los usuarios no interactúan con imágenes estáticas — pulsan, desplazan, escriben y borran. El prototipado es lo que transforma un diseño estático en una experiencia viva con la que los usuarios pueden interactuar de verdad.

Beneficios del prototipado:

• Probar ideas rápidamente: Antes de que un desarrollador escriba una sola línea de código, puedes probar el flujo completo
• Comunicación clara: En lugar de explicarle al desarrollador "el usuario pulsa aquí y va allá," déjale ver y probarlo
• Detectar problemas pronto: Un problema encontrado en un prototipo se corrige en minutos. El mismo problema encontrado después del desarrollo lleva días
• Convencer a los tomadores de decisiones: Presentar un prototipo interactivo es mucho más poderoso que mostrar pantallas estáticas
• Tests de usuario: Puedes realizar pruebas con usuarios reales sobre el prototipo

Niveles de Fidelidad

No todos los prototipos necesitan el mismo nivel de detalle. Elige el nivel adecuado según tu objetivo:

1. Prototipo de Baja Fidelidad

Forma: Bocetos dibujados a mano en papel o wireframes simples
Objetivo: Probar el flujo básico — ¿son lógicos los pasos?
Cuándo usarlo: Al inicio del proyecto cuando exploras diferentes soluciones
Tiempo: Minutos a horas
Herramientas: Papel y lápiz, Whimsical, Balsamiq

2. Prototipo de Fidelidad Media

Forma: Wireframes interactivos con colores en escala de grises y contenido real
Objetivo: Probar la estructura de la página, la disposición de elementos y la navegación
Cuándo usarlo: Después de definir el flujo básico y querer más detalle
Tiempo: Horas a un día
Herramientas: Figma, Sketch

3. Prototipo de Alta Fidelidad

Forma: El diseño final con todos los detalles — colores, tipografías, imágenes e interacciones
Objetivo: Probar la experiencia completa y obtener aprobación final
Cuándo usarlo: Justo antes del desarrollo o para tests de usuario detallados
Tiempo: Días
Herramientas: Figma, Principle, ProtoPie

Consejo importante: No empieces con un prototipo de alta fidelidad. Empieza bajo y ve aumentando gradualmente la fidelidad. Si construyes un prototipo de alta fidelidad desde el principio y descubres que el flujo es incorrecto, habrás desperdiciado días de trabajo.

Prototipado en Figma

Figma tiene un potente sistema de prototipado incorporado. Aprendamos los fundamentos:

Configurar el Modo Prototipo

1. Haz clic en la pestaña Prototype en el panel derecho
2. Selecciona el frame que quieres como punto de partida
3. Haz clic en Set as Starting Frame — esta es la primera pantalla que verá el usuario

Añadir Interacciones

Cada interacción en Figma consta de tres partes:

1. El Disparador (Trigger) — qué inicia la interacción:

• On Click / On Tap: cuando el usuario pulsa — el más común
• On Hover: cuando el ratón pasa sobre el elemento (solo escritorio)
• On Drag: cuando se arrastra un elemento
• While Pressing: mientras se mantiene pulsado
• After Delay: después de un tiempo establecido — adecuado para pantallas de presentación

2. La Acción (Action) — qué sucede:

• Navigate To: transición a otra pantalla
• Open Overlay: abrir una ventana sobre la pantalla actual (Modal, Dropdown)
• Close Overlay: cerrar la ventana emergente
• Swap Overlay: intercambiar una ventana por otra
• Back: volver a la pantalla anterior
• Scroll To: desplazarse a un elemento específico de la página

3. La Transición (Transition) — cómo ocurre el movimiento:

• Instant: cambio inmediato sin animación
• Dissolve: fundido — la pantalla desaparece gradualmente y aparece la nueva
• Move In/Out: la pantalla se desliza hacia adentro o afuera desde una dirección
• Push: la nueva pantalla empuja a la antigua
• Slide In/Out: movimiento deslizante
• Smart Animate: la opción más inteligente — Figma anima automáticamente los elementos coincidentes

Smart Animate en Detalle

Smart Animate es la característica más poderosa del prototipado en Figma. Funciona con un principio sencillo: si hay un elemento con el mismo nombre en dos pantallas, Figma lo animará desde su posición en la primera pantalla hasta su posición en la segunda.

Ejemplo: Tienes una tarjeta pequeña en una pantalla de lista. Cuando el usuario la pulsa, va a una pantalla de detalle que tiene la misma tarjeta, pero más grande. Si el nombre es el mismo en ambas pantallas, Smart Animate creará una animación de expansión fluida.

Consejo: Nombra tus capas de forma organizada y consistente. Esto no solo ayuda con Smart Animate — también facilita mucho el trabajo con los desarrolladores.

Tipos de Interacciones

1. Micro-interacciones

Pequeños movimientos que ocurren en respuesta a una acción del usuario:

• Toggle Switch: cambia de On a Off con un movimiento deslizante
• Botón Like: cambia su forma y color al pulsarlo
• Campo de entrada: los bordes cambian de color cuando el usuario se enfoca en él
• Checkbox: aparece una marca de verificación con un pequeño movimiento

2. Interacciones de Navegación

Movimientos asociados con la transición entre pantallas:

• Push Transition: la nueva pantalla empuja a la antigua — adecuado para la navegación hacia adelante
• Slide from Bottom: una pantalla sube desde abajo — adecuado para modales y bottom sheets
• Fade: fundido — adecuado para intercambiar contenido en la misma página
• Hero Animation: un elemento crece y se transforma desde la primera pantalla hasta la segunda

3. Interacciones de Carga

• Skeleton Animation: elementos grises que brillan (Shimmer Effect)
• Progress Bar Animation: una barra que se llena gradualmente
• Pull to Refresh: tirar hacia abajo para actualizar el contenido

4. Interacciones de Gestos

Específicas para móvil:

• Swipe to Delete: deslizar izquierda o derecha para eliminar un elemento
• Pinch to Zoom: hacer zoom con dos dedos
• Long Press: pulsación larga para abrir un menú de opciones

Principios del Diseño de Interacción

1. Feedback

Cada acción del usuario debe tener una respuesta:

• Pulsar un botón → cambio de color o tamaño
• Enviar un formulario → mensaje de confirmación
• Error de entrada → mensaje de error claro

Si un usuario pulsa algo y nada ocurre, asumirá que hay un problema.

2. Consistencia

La misma acción debe producir el mismo resultado en todas partes:

• Todos los botones primarios se comportan de la misma manera
• La navegación hacia adelante siempre usa el mismo movimiento
• Volver atrás siempre usa el mismo movimiento (pero en sentido inverso)

3. Velocidad Adecuada

Las interacciones deben ser lo suficientemente rápidas para no ralentizar al usuario, y lo suficientemente lentas para que el usuario las note:

• Micro-interacciones: 100-200ms
• Transiciones entre pantallas: 200-400ms
• Elementos grandes (Modal, Página): 300-500ms

Regla: Si la animación es menor de 100ms el usuario no la percibirá. Si supera los 500ms sentirá que la aplicación es lenta.

4. Anticipación

El movimiento debe ser predecible — es decir, el usuario puede anticipar qué va a suceder:

• Un botón crece ligeramente al pasar el ratón → anticipación de que se puede pulsar
• Una pantalla se mueve desde la derecha → anticipación de que se moverá a la derecha al volver

5. Movimiento Natural

Los movimientos en la naturaleza no son lineales — las cosas comienzan despacio, se aceleran y luego desaceleran antes de detenerse. Esto se llama Easing:

• Ease-in-out: el movimiento más suave — empieza y termina despacio. Lo mejor para la mayoría de los casos
• Ease-out: comienza rápido y se ralentiza. Adecuado para elementos que entran en pantalla
• Ease-in: comienza despacio y se acelera. Adecuado para elementos que salen de pantalla
• Linear: velocidad constante — parece mecánico y antinatural. Evítalo

Micro-interacciones en Detalle

Las micro-interacciones son los detalles que diferencian una aplicación ordinaria de una excelente. Son pequeños movimientos que hacen que la experiencia se sienta viva y satisfactoria.

Anatomía de una Micro-interacción

Cada micro-interacción consta de 4 partes:

1. Disparador (Trigger): qué inicia la interacción — un toque, pasar el ratón, entrada de datos
2. Reglas (Rules): exactamente qué ocurre — cambio de color, movimiento, sonido
3. Feedback: qué ve o siente el usuario
4. Bucles y Modos (Loops & Modes): ¿se repite la interacción? ¿Cambia con el tiempo?

Ejemplos de Micro-interacciones Exitosas

• Botón Like de Instagram: el corazón crece y se colorea con una animación pulsante
• Pull to Refresh: el icono se mueve con el dedo y luego gira
• Indicador de escritura en apps de chat: los tres puntos animados
• Barra de fortaleza del perfil de LinkedIn: "Tu perfil está completo al 70%"
• Vibración del campo de contraseña cuando es incorrecta: una animación de sacudida rápida que transmite "No, eso es incorrecto"

No Exageres

Las micro-interacciones deben ser realmente micro. Si cada elemento de la pantalla se mueve y rebota, la experiencia se volverá agotadora y distractora. La regla: una interacción debe servir un propósito — si no tiene una función clara, elimínala.

Construir un Prototipo Interactivo en Figma — Paso a Paso

Construyamos un prototipo para un flujo de inicio de sesión completo:

Paso 1: Preparar las Pantallas

Diseña las siguientes pantallas:

• Pantalla de bienvenida (Welcome)
• Pantalla de inicio de sesión (Login)
• Pantalla de verificación (Verification)
• Pantalla principal (Home)
• Estado de error en el inicio de sesión

Paso 2: Definir el Flujo

• Welcome → Login (pulsar el botón "Iniciar sesión")
• Login → Verification (pulsar "Enviar" después de ingresar datos)
• Login → Error State (datos incorrectos)
• Verification → Home (ingresar el código correcto)

Paso 3: Añadir Interacciones

1. Selecciona el botón "Iniciar sesión" en la pantalla Welcome
2. Desde el panel Prototype, arrastra una conexión a la siguiente pantalla
3. Configura: On Click → Navigate To → Login
4. Transición: Smart Animate, 300ms, Ease-in-out

Paso 4: Añadir Overlays

• Modal de error: On Click → Open Overlay → Position: Center → Background: Dim
• Botón de cierre: On Click → Close Overlay

Paso 5: Añadir Interacciones de Componentes

Cambia los estados del botón (Default → Hover → Pressed) usando Interactive Components. Cada estado se convierte en una Variant en un Component Set.

Paso 6: Probar y Compartir

1. Pulsa Play (▶) para probar el prototipo
2. Desde Share, copia el enlace y envíaselo a quien quieras que lo pruebe
3. Activa Allow Commenting para que puedan dejar comentarios

Herramientas de Prototipado Avanzado

Cuando tus necesidades superen las capacidades de Figma:

• ProtoPie: para interacciones complejas basadas en datos reales y sensores del móvil
• Principle: para animaciones fluidas y complejas en macOS
• Framer: para prototipos interactivos con código real (React)
• Origami Studio (Meta): para interacciones avanzadas con integración en React Native

Consejo: Figma es suficiente para el 90% de tus necesidades. No cambies a otra herramienta a menos que tengas una razón específica.

Errores Comunes en el Prototipado

1. Prototipar todo

No es necesario que cada botón de la aplicación funcione en el prototipo. Céntrate en los flujos principales que vas a probar.

2. Interacciones no realistas

El prototipo debe representar la experiencia real. No añadas animaciones fantásticas que no se implementarán en el desarrollo.

3. Ignorar los estados de error

Un prototipo exitoso incluye caminos de error — ¿qué sucede si el usuario ingresa datos incorrectos? ¿Qué pasa si se cae la conexión a internet?

4. No compartir el prototipo

Un prototipo que nadie ha probado no tiene valor. Compártelo con el equipo y los usuarios, y recopila sus comentarios.

Ejercicio Práctico

Construye un prototipo interactivo para una aplicación de entrega de comida:

1. Pantalla principal: lista de restaurantes + búsqueda + filtros
2. Página de restaurante: menú de platos con la posibilidad de añadir al carrito
3. Carrito: resumen del pedido + botón de pago
4. Confirmación del pedido: resumen + mensaje de éxito

Interacciones requeridas:

• Transiciones entre pantallas (Smart Animate)
• Añadir al carrito (Micro-interacción — contador que se incrementa)
• Modal de confirmación del pedido (Overlay)
• Estado de carrito vacío (Empty State)
• Efecto de pulsación en los botones (estados Hover + Pressed)

Este ejercicio reúne todo lo que has aprendido — empieza con el flujo básico y luego añade los detalles.