Semana 5: Diseñar para que se construya
Cómo preparé el sistema visual y el handoff para desarrollo
Soy una diseñadora UX/UI y Product Owner entusiasta y apasionada por crear productos digitales que hagan la vida de las personas más fácil y agradable. Me encanta trabajar en equipo y colaborar estrechamente con desarrolladores y stakeholders para asegurarme de que el producto final cumpla con las necesidades del cliente y del negocio. Como Product Owner, lidero el proceso de definición y priorización de los elementos del backlog del producto y trabajo en estrecha colaboración con el equipo de desarrollo y los interesados para asegurarme de que se cumplan los requisitos del cliente y del negocio. Me emociona ver cómo un producto evoluciona y mejora a medida que trabajamos juntos para superar los desafíos. Esto sin dejar de lado las metodologías agiles que causan un impacto positivo en el equipo y en el desarrollo del producto.
Aunque el diseño en alta fidelidad ya estaba listo desde la semana anterior, esta semana me enfoqué en un paso igual de importante: convertir ese diseño en algo claro, estructurado y útil para quienes lo van a construir.
Porque no se trata solo de mostrar una pantalla bonita, sino de entregar herramientas reales al equipo de desarrollo para que pueda implementarlas sin fricciones.
🧩 Sistema UI: diseñar con lógica, no solo con estilo
Revisé cada pantalla para asegurar consistencia en:
Espaciados
Jerarquías
Comportamientos
Estados visuales (hover, selección, respuesta correcta/incorrecta)
A partir de ahí, armé un sistema UI en Figma con componentes reutilizables que incluye:
Botones (varios estados y usos)
Tarjetas de respuesta
Contenedores y modales
Tipografía estandarizada por jerarquía
Colores con variables y etiquetas semánticas
Este sistema no solo me sirve ahora, sino que prepara el terreno para futuras versiones del juego.
📦 Handoff: de diseñadora a facilitadora técnica
Preparé una guía de handoff clara y completa con:
Archivo de Figma con inspección activa
Componentes nombrados, ordenados y agrupados por función
Notas por pantalla sobre comportamiento e interacción
Checklist de accesibilidad (verificada con Stark)
Guía rápida para implementación en mobile
Puedes acceder a la guía de handoff para que conozcas a mayor profundidad el contenido.
Como Product Owner, también estuve disponible para validar dudas, definir prioridades y evitar bloqueos técnicos.
🧠 ¿Por qué esta etapa importa tanto?
Porque muchas veces los diseños mueren en el traspaso a desarrollo. Y ahí es donde entra el diseño productivo, el que está pensado no solo para verse, sino para construirse.
🎯 Resultado de esta semana
✅ Sistema UI armado y documentado
✅ Componentes listos para reutilización
✅ Guía de handoff compartida y validada
✅ Apoyo directo al equipo técnico durante la implementación inicial
Diseñar sin pensar en desarrollo es como escribir un libro sin final. Esta semana, conecté diseño y construcción para asegurar que Respuesta Correcta avance sin perder su esencia.
En la próxima entrega, te voy a contar cómo acompañé el inicio de la implementación y qué ajustes surgieron al poner en práctica lo diseñado.
¿Quieres ver cómo avanza este proyecto semana a semana?
Cuéntamelo en los comentarios o por mensaje directo, ¡me encantaría conocerlo!
👉 Suscríbete al blog o sígueme en LinkedIn para no perderte las siguientes entregas.
