Sección 5 · Diseño

Wireframes en Figma

Archivos de diseño, wireframes de alta fidelidad y prototipo navegable creados en Figma; se sustituyó la maquetación por esta herramienta, usada también como sustituto de Adobe XD.

4.1 Archivos de diseño en Figma

El diseño se trabajó en dos archivos de Figma: uno dedicado al flujo de registro (teclado numérico y pasos de captura) y otro con la aplicación completa —resumen, historial— y su prototipo navegable.

Tabla 4.1 · Archivos de diseño y prototipo en Figma
Archivo	Contenido	Enlace
Registro figma.com/design/5tZDdc…	Flujo de registro: paso de monto con teclado numérico propio, paso de categoría y guardado.	Abrir en Figma ↗
app-finanzas-personales figma.com/design/ew3pfya…	Pantallas de la aplicación: Resumen, Historial y configuración, con el prototipo navegable de la interfaz completa.	Abrir en Figma ↗

4.2 Wireframes de alta fidelidad

A continuación se muestran los wireframes de alta fidelidad de las pantallas de la aplicación y del flujo de registro, exportados desde los archivos de la tabla 4.1.

Wireframe de la pantalla Resumen en Figma — **Wireframe 1 ·** Resumen (pantalla inicial).

Wireframe del paso de monto del registro en Figma — **Wireframe 2 ·** Registro, paso 1: monto.

Wireframe del paso de categoría del registro en Figma — **Wireframe 3 ·** Registro - Gasto , paso 2: categoría.

Wireframe de la pantalla Historial en Figma — **Wireframe 4 ·** Registro - Ingreso , paso 2: categoría.

Wireframe de la pantalla Ajustes en Figma — **Wireframe 5 ·** Historial

Wireframe del guardado con nota en Figma — **Wireframe 6 ·** Inicio de App sin movimientos registrados.

4.3 Paleta y tipografía definidas

Tabla 4.3 · Sistema visual base (D-2)
Elemento	Especificación	Uso
Azul principal	#053394	Encabezados y botones principales.
Azul claro	#2592E8	Acentos e indicadores.
Verde	#0EAF70	Ingresos y valores positivos.
Rojo	#C42830	Gastos, valores negativos y errores.
Tipografía	Material 3 / Poppins	Textos, cifras y etiquetas.
Texto mínimo	20 sp	Cifras de la pantalla principal (P-3).
Área táctil mínima	56 dp	Acciones del flujo de registro (A-1).