Lección 9 de 12 · Lectura y práctica
Diseño Visual y Componentes
Fase 2: Del Wireframe al Diseño Visual Ahora transformamos los wireframes grises en un diseño visual pulido. Vamos a definir la identidad visual, crear componentes reutilizables y aplicar Auto Layout a todo. Definir el sistema.
Del concepto a la práctica
Taller de esta lección
La fase visual debe convertir la estructura validada en un sistema, no en una colección de pantallas independientes. Para TurnoClaro, los componentes deben reflejar decisiones repetidas: botón de acción, campo de búsqueda, tarjeta de horario, etiqueta de estado y navegación inferior. Cada componente se prueba con contenido realista antes de ensamblar la aplicación.
Ejemplo resuelto
Crea “Button/Primary”, “Field/Search”, “ScheduleSlot” y “Status/Empty”. Usa un frame de componentes para revisar tamaños. Después arma Resultados con una lista vertical de tarjetas y un campo superior. La tarjeta contiene hora, profesional, duración y acción; no uses un rectángulo decorativo como sustituto del componente.
Pruébalo
Define dos tamaños de botón y sus estados.
Construye el campo con etiqueta y texto de ayuda.
Inserta tres tarjetas con horarios diferentes.
Cambia una instancia y observa si la estructura se conserva.
Error frecuente: corregir cada instancia manualmente. Corrígelo volviendo al componente principal o creando una variante justificada.
Diseña una pantalla con horarios de 09:00, 13:30 y 18:45. Resultado esperado: las tarjetas comparten alineación, padding y jerarquía, aunque el contenido cambie.
Comprueba tu resultado
Oculta temporalmente los colores y revisa si la jerarquía sigue siendo clara por tamaño, posición y espaciado.
Mapa de prácticaDa prioridad al título, la explicación y una acción principal. Tamaño, espacio y contraste ayudan a guiar la mirada; comprueba la lectura y los estados con contenido real.
Ver la infografía en tamaño completo ↗Fase 2: Del Wireframe al Diseño Visual
Ahora transformamos los wireframes grises en un diseño visual pulido. Vamos a definir la identidad visual, crear componentes reutilizables y aplicar Auto Layout a todo.
Definir el sistema visual
- Paleta de colores: elige un color primario (azul #3B82F6 es seguro), un secundario, grises neutros, y colores de estado
- Tipografía: usa Inter con la siguiente escala — Heading: 24px bold, Subheading: 18px semibold, Body: 16px regular, Caption: 12px regular
- Espaciado: usa múltiplos de 4px (4, 8, 12, 16, 24, 32, 48) para padding y gaps
- Border radius: elige un estilo consistente — 8px para cards, 12px para botones, 50% para avatares
- Crea todos estos como estilos o variables antes de diseñar ninguna pantalla
Componentes a crear
- TaskCard: card de tarea con checkbox, título, fecha, prioridad (variantes: pendiente, completada)
- Button: primario y secundario con variantes de tamaño (sm, md) y estado (default, disabled)
- Input: campo de texto con variantes (default, focus, error) y label integrado
- NavBar: barra inferior con 3 tabs y estado activo/inactivo en cada uno
- Header: barra superior con título de la pantalla y botón de acción
Aplicar Auto Layout a todo
- Cada pantalla completa es un frame con Auto Layout vertical (dirección: columna)
- La lista de tareas es un Auto Layout vertical con gap de 8px entre cards
- Cada TaskCard usa Auto Layout horizontal para checkbox + texto + fecha en línea
- Los botones usan Auto Layout con padding horizontal 24px y vertical 12px
- El formulario de crear tarea apila inputs verticalmente con gap de 16px
Consejo: Diseña primero los componentes aislados en una página aparte. Una vez que estén perfectos, úsalos para armar las pantallas. Esto es mucho más eficiente que diseñar componentes 'sobre la marcha'.
Sigue con Figma desde Cero
Esta lección forma parte de un curso de Cursalo. Revisa su programa y elige entre la compra individual o el acceso a toda la escuela.
Si ya tenías acceso a este curso, entra con tu cuenta: tus derechos y tu progreso se conservan. No necesitas comprarlo de nuevo.