yosoyb.com 2021 | Descubre el secreto de la felicidad en este link.
Este proyecto es un ejercicio personal de diseño de interfaz y sistema de diseño, centrado en la creación de una app de control de gastos.
El objetivo no era solo diseñar una pantalla final, sino definir un pequeño sistema de diseño escalable y aplicarlo de forma coherente a componentes y pantallas reales.
Objetivos principales:
Construir un sistema de diseño básico en Figma
Trabajar con tokens de color, tipografía y espaciado
Diseñar componentes reutilizables usando Auto Layout y variantes
Aplicar el sistema a pantallas reales y estados de uso
El proyecto comienza con la definición de las bases del sistema:
Tokens de color (primitivos y semánticos)
Estilos tipográficos con una jerarquía clara
Una escala de espaciado consistente para layouts
Estas foundations permiten mantener coherencia visual y facilitan la escalabilidad del producto sin depender de ajustes manuales.
A partir de las foundations se construyeron componentes reutilizables, pensados para adaptarse a distintos contextos y contenidos.
Componentes principales:
Botón con variantes (primary, secondary, disabled)
Expense Card, diseñada para adaptarse a textos e importes variables
Uso extensivo de Auto Layout para asegurar consistencia y flexibilidad
El sistema se aplicó a pantallas reales del producto, comprobando que los componentes funcionasen correctamente en contexto.
Se diseñaron tanto el estado con contenido como el estado vacío, simulando escenarios reales de uso.
El empty state se diseñó para guiar al usuario cuando aún no hay datos disponibles, manteniendo la coherencia visual del sistema y ofreciendo una acción clara para comenzar.
Este estado forma parte del flujo real del producto y no se trata como un caso excepcional.
Principales aprendizajes del proyecto:
Un sistema de diseño es una estructura de decisiones, no solo una colección visual
Auto Layout es clave para crear interfaces escalables y robustas
Los componentes deben diseñarse fuera de las pantallas y utilizarse mediante instancias
Pensar en estados (contenido / vacío) es esencial en productos reales