Wireframes en Figma

Antes de escribir el primer composable, la app pasó por dos iteraciones de diseño visual: una primera referencia generada con IA para explorar dirección de arte, y luego un set de wireframes estáticos en Figma que fijaron la especificación real de cada pantalla (layout, tipografía, iconografía) sobre la que se construyó el Compose UI final.

1. Primera referencia (generada con IA)

Antes de abrir Figma, se generó con IA una primera referencia visual de las tres pantallas principales (Gallery, Details, Edit) para explorar look & feel — estilo de carta, paleta e ilustración de los autos — sin todavía comprometerse a una especificación pixel-perfect.

Solo dirección de arte

Esta iteración no define layout exacto ni componentes reales de Android — sirvió para acordar estilo (cartas ilustradas tipo trading card, paleta oscura con acentos de color por auto) antes de pasar a wireframes estructurados en Figma.

2. Wireframes en Figma

A partir de esa dirección de arte, el diseño se llevó a Figma como un wireframe estático a escala de teléfono: un recuadro por cada estado/pantalla, usando las fotos y escudos reales de la app, los íconos Material reales (material-icons-extended), la tipografía Inter/Roboto real y la paleta de marca del tema — sin animaciones ni interacción, solo la especificación visual.

Abrir el archivo en FigmaRacingCards — wireframes de Gallery, Details y Edit

Las 9 pantallas

01 · Galería — Formato cuadrícula

Pantalla principal, colección en grilla de 2 columnas

02 · Galería — Formato lista

Misma colección en lista de 1 columna con 4 estadísticas

03 · Galería — Swipe to delete

Deslizar una fila revela el fondo rojo de “eliminar”

04 · Galería — Sin datos

Estado vacío: ícono, mensaje y llamado a la acción hacia Create

05 · Detalle de una carta

Carta ampliada + estadísticas completas al tocarla en la galería

06 · Detalle — Confirmar eliminación

Diálogo de confirmación antes de borrar la carta

07 · Editar carta existente

Formulario de edición precargado con los valores actuales

08 · Crear carta — asignando valores

Alta de una carta nueva: nombre, clase, marca y estadísticas

09 · Reveal de estadísticas

Animación conceptual de revelado de stats sobre el auto

Ver también Pantallas para la implementación real en Compose de este mismo flujo, y Catálogo de componentes para las piezas reutilizables (ArtworkFace, CardArtwork) que terminaron reemplazando estos wireframes estáticos.