Headspace
Prototipo Reto 01

Enlaces del proyecto

Prototipo interactivo Figma: Link

Réplica de flujo + microprototipado de componentes

Este proyecto corresponde al Reto 1 de la asignatura Prototipado, dentro del trabajo con interfaz gráfica y diseño sistémico en Figma. El objetivo principal del reto es construir un prototipo interactivo de alta fidelidad replicando un flujo existente de la app móvil Headspace, acompañado de componentes con estados interactivos que simulan su comportamiento real.

Objetivos del reto

• Replicar un flujo funcional de navegación dentro de la app, comenzando desde el tab “Hoy”.

• Construir componentes interactivos con distintas variantes (hover, active, selected, disabled).

• Simular comportamiento real como:

  • Scroll vertical y navegación entre pantallas.

  • Tooltip al pulsar el icono de “Favoritos”.

  • Botones con múltiples estados.

  • Overlay de información («Sobre tu voz guía»).

  • Modales promocionales (oferta mensual/anual).

• Comenzar a construir un design system básico aplicando estilos tipográficos, colores y componentes reutilizables.

• Realizar la prototipación interactiva en Figma usando acciones, animaciones y navegación.

Herramientas utilizadas

• Figma – Diseño y prototipado

• Variants + Auto Layout para la construcción del sistema

• Prototipado con animaciones Smart Animate

• Captura real desde dispositivo para validar el comportamiento.

Trabajo sistémico (Design System)

Además del flujo, se creó un UI Kit basado en Headspace, con:

• Variables de color y texto aplicadas globalmente

• Botones con estados interactivos

• Tarjetas de contenido

• Chips

• Iconografía

• Componentes estructurales

• Organización en Atomic Design (Atoms → Molecules → Organisms)