<aside> ⚡

UX Hacks · Checklist y protocolo. El contrato de entrega entre diseño y desarrollo para que nadie vuelva a decir "es que en Figma se veía diferente". Duplica esta página y úsala en cada sprint.

</aside>

El handoff no falla en el código. Falla en lo que nadie dejó escrito.

Cuando desarrollo tiene que adivinar un estado vacío, una regla de negocio o un espaciado, adivina. Y cada adivinanza se convierte en un hilo de Slack, un ajuste en QA o una pantalla que no se parece al diseño.

Este kit tiene tres partes:

1. El mapa de entregables: lo que tiene que ir sí o sí en el archivo.
2. La reunión de alineación de 15 minutos: la agenda para revisarlo con desarrollo antes del sprint.
3. El hack pro: variables, componentes y reglas de negocio documentadas dentro del diseño.

1 · El mapa de entregables

Nada pasa a desarrollo si falta algo de esta lista. Revísala con el archivo abierto.

Fundamentos

• [ ] Tokens de diseño definidos como variables de Figma: color, tipografía, espaciado, radios y sombras.
• [ ] Cada valor del diseño usa una variable. Cero colores o tamaños sueltos.
• [ ] Nombres de variables acordados con desarrollo (por ejemplo color/text/primary, space/16).
• [ ] Breakpoints definidos: cómo se ve en celular, tablet y escritorio.

Componentes

• [ ] Todo elemento repetido es un componente con variantes y propiedades.
• [ ] Cada componente interactivo tiene sus estados: default, hover, focus, active, disabled y loading.
• [ ] Los nombres de componentes y propiedades coinciden con los del código (o hay una tabla que los relaciona).

Estados de cada pantalla