Lab BLD05: LAB-M05 · Del flujo a la pantalla: wireframes validados, tokens, componentes y una pantalla implementada

Flujo con desvíos, wireframes validados con dos personas, archivo de Figma con tokens y componentes, pantalla principal en cinco estados, comprobación de contraste y pantalla implementada con diferencias corregidas.

Tu reto: LAB-M05 · Del flujo a la pantalla: wireframes validados, tokens, componentes y una pantalla implementada

Necesitas

Cuenta gratuita de Figma o papel y lápiz para los wireframes
Un comprobador de contraste de color
El repositorio del producto y un agente de código

Pasos

1. Dibuja el flujo principal de tu producto con el camino feliz y al menos dos desvíos de error.

2. Haz los wireframes de baja fidelidad y valídalos con dos personas de tu público.

3. En Figma, define tokens de color, tipografía y espaciado y tres componentes con variantes de estado.

4. Compón la pantalla principal en sus cinco estados y comprueba el contraste del texto.

5. Entrega el paquete a la IA de código, implementa la pantalla y corrige las diferencias con el diseño.

Checklist de calidad

El flujo incluye al menos dos desvíos de error; la pantalla principal tiene diseñados los estados vacío, cargando, error, éxito y respuesta dudosa; el texto cumple el contraste de WCAG 2.2 AA; la implementación usa los tokens definidos y se navega con teclado con foco visible.

Resultado final

Pantalla principal implementada, accesible y fiel a un diseño documentado.

← Volver al módulo Lab de Desplegar a 0 € →