Prototipado: del boceto al clic

Un prototipo es una versión simulada del producto que permite interactuar con él sin que esté construido. Su único objetivo es aprender algo concreto antes de invertir más recursos en código.

La pregunta que guía el prototipo no es “¿cómo de completo puedo hacerlo?” sino “¿cuál es la mínima fidelidad que me permite responder la pregunta que tengo?”

Por qué prototipar

Construir software es caro. Cambiar una pantalla en Figma tarda minutos. Cambiar el mismo flujo en producción puede tardar días e involucrar a varios equipos.

El prototipo traslada ese coste hacia atrás en el proceso, donde es mucho más barato asumir el error.

También sirve para alinear. Cuando muestras un prototipo navegable a un stakeholder o a un usuario, la conversación cambia completamente. Ya no habláis de abstracciones: habláis de algo concreto que podéis tocar, romper y criticar.

Niveles de fidelidad

Prototipo de papel

Recortes o bocetos de pantallas que el facilitador “ejecuta” manualmente durante el test: cuando el usuario “pulsa” algo, el facilitador retira la hoja y coloca la siguiente.

Cuándo usarlo:

• Muy al principio, cuando todavía tienes varias ideas distintas sobre cómo resolver el flujo.
• Para tests rápidos internos sin necesidad de herramientas.
• Cuando el tiempo es lo más escaso.

Prototipo de baja fidelidad navegable

Wireframes conectados entre sí. El usuario puede hacer clic y pasar de una pantalla a la siguiente, pero el aspecto visual es esquemático.

Cuándo usarlo:

• Validación de flujo y estructura antes del diseño visual.
• Tests con usuarios donde la pregunta es “¿encuentra el usuario lo que busca?” y no “¿confía en el producto visualmente?”.

Prototipo de alta fidelidad

Pantallas con diseño visual definitivo o muy cercano al final, conectadas para simular la interacción real.

Cuándo usarlo:

• Tests donde la percepción visual y la confianza importan (checkout, onboarding, registro).
• Presentaciones a clientes o dirección.
• Preparación del handoff con desarrollo.

La alta fidelidad no significa “más real” en todos los contextos. Para validar si un flujo tiene sentido, la baja fidelidad es igual de eficaz y diez veces más rápida de construir.

Prototipos en Figma

Figma es la herramienta estándar del sector para wireframes, diseño visual y prototipado. El sistema de prototipado de Figma funciona conectando frames (pantallas) mediante interacciones.

Conceptos clave

Frame: cada pantalla del prototipo es un frame. Puedes tener tantos como necesites y organizarlos por flujo.

Conexión (Link): la flecha entre un elemento y otro frame. Define qué pasa cuando el usuario interactúa con ese elemento.

Trigger: qué acción del usuario activa la transición. Los más usados:

• On click: al hacer clic.
• On hover: al pasar el cursor por encima (útil para tooltips y menús).
• While pressing: mientras mantiene pulsado.
• Key/gamepad: al pulsar una tecla específica.

Transition: cómo se mueve la pantalla al cambiar. Para prototipos funcionales, usa Instant o Dissolve. Las animaciones elaboradas ralentizan el test y distraen al usuario de la tarea.

Destination: el frame al que va el usuario tras la interacción. Puede ser otra pantalla, un overlay (modal, drawer) o el mismo frame con un estado diferente.

Flujo básico para construir un prototipo navegable

1. Ten tus wireframes o diseños en frames separados, uno por pantalla.
2. Ve a la pestaña Prototype en el panel derecho.
3. Selecciona el elemento que debe ser interactivo (botón, enlace, tarjeta).
4. Arrastra la flecha azul que aparece hacia el frame de destino.
5. Configura el trigger y la transición.
6. Repite para todos los elementos del flujo.
7. Usa el botón Present (▶) para ver el prototipo en pantalla completa.
8. Copia el enlace de Share prototype para enviarlo a usuarios o stakeholders.

Qué incluir y qué no

Un error habitual es intentar prototipar todo el producto. No es necesario ni útil para un test concreto.

Incluye:

• El flujo completo de la tarea que vas a testear, de principio a fin.
• Al menos un estado de error relevante para esa tarea.
• El estado vacío si es la primera vez que el usuario llega a esa vista.

Puedes omitir:

• Flujos secundarios que no tienen relación con la tarea del test.
• Animaciones elaboradas.
• Contenido real cuando el contenido de prueba comunica lo mismo.

Si el usuario tiene que explorar partes del prototipo que no están construidas, añade una nota o un overlay de “En construcción” para que no se pierda y abandone el test.

Prototipado de componentes con variables

Figma permite usar Variables para crear prototipos con estados dinámicos sin duplicar frames. Por ejemplo:

• Mostrar u ocultar un elemento según una acción previa.
• Cambiar el texto de un componente según la selección del usuario.
• Simular un toggle que persiste al navegar entre pantallas.

Esto es útil cuando el prototipo necesita reflejar lógica condicional real sin volverse inmanejable.

Handoff: el prototipo como documentación

El prototipo de alta fidelidad es también el artefacto principal del handoff con desarrollo. Cuando está bien construido, responde a las preguntas de implementación antes de que alguien las haga:

• ¿Cómo se ve este componente en estado hover? → está en el prototipo.
• ¿Qué pasa si el formulario falla? → hay un frame de error conectado.
• ¿Cuál es el espaciado entre estos elementos? → está en el inspect panel de Figma.

Un prototipo bien documentado reduce las reuniones de aclaración y la cantidad de “esto no lo habíamos diseñado” durante el desarrollo.

¿Qué hemos aprendido?

• La fidelidad del prototipo debe ajustarse a la pregunta que necesitas responder.
• En Figma los prototipos se construyen conectando frames con triggers y transiciones.
• Prototipar solo el flujo relevante para el test es más eficaz que prototipar todo.
• Un prototipo bien construido es también documentación para desarrollo.

Siguiente paso

En la próxima lección veremos Test de usabilidad: cómo preparar y conducir sesiones con usuarios reales, qué observar, cómo clasificar hallazgos y qué hacer con ellos después.