Componer las pantallas
Lleva todos los assets generados a Figma y ensambla las pantallas reales de la app como north star visual.
Paso 7 de 8
Figma no es el destino final. Es el north star: una referencia visual clara de cómo debería verse la app cuando le pases todo a la IA para la implementación.
Armar los frames
- Presiona
Fen Figma para crear un frame. Elige el tamaño de iPhone y agrega border radius para que se vea limpio. - Toma los screenshots del prototipo funcional como referencia de layout: qué va dónde.
- Pega cada asset generado en el frame correspondiente.
- Ajusta los colores de fondo con la paleta del paso 5.
Pantallas mínimas
Para una app funcional necesitas al menos estas tres:
- Splash screen. Logo y nombre de la app sobre el color de fondo principal.
- Pantalla de acción principal. El botón principal con su contexto (timer, indicadores, lo que corresponda a tu app).
- Pantalla de historial. Los items de contenido representados con la metáfora visual de los assets secundarios.
Tips de composición
Tipografía sobre imágenes
Para texto sobre fondos con textura, usa blend mode Overlay o Hard Light en Figma. El color del texto se adapta automáticamente al fondo sin necesidad de ajustar manualmente.
Componentes iOS base
En Figma Community busca "iOS" y copia lo que necesites: status bar, navigation bar, tab bar. No rediseñes los elementos del sistema operativo.
Color de fondo
En el panel Appearance de Figma, juega con los blend modes para encontrar el tono exacto que encaja con tu paleta. A veces el color que necesitas no está en la paleta directamente sino en una mezcla.
Esto no es el diseño final
No intentes perfeccionar cada pixel en Figma. El objetivo es tener un composite lo suficientemente claro para que la IA entienda la dirección visual. Los detalles se pulen en la implementación.
Resultado de este paso
Un composite en Figma con las pantallas principales de tu app usando los assets generados. Este composite es el input visual para el paso final.