Wireframes y Estructura

Fase 1: De la Idea a los Wireframes

Vamos a diseñar una app de gestión de tareas (tipo Todoist simplificado). Empezaremos con wireframes de baja fidelidad para definir la estructura antes de preocuparnos por colores o tipografía.

Pantallas a diseñar

• Splash/Login: pantalla de inicio con opciones de registro e inicio de sesión


• Lista de tareas: la pantalla principal donde el usuario ve sus tareas pendientes y completadas


• Crear tarea: formulario para agregar una nueva tarea con título, fecha y prioridad


• Detalle de tarea: vista expandida con descripción, subtareas y opción de editar/eliminar


• Perfil/Configuración: datos del usuario y preferencias de la app

Creando wireframes en Figma

• Crea un frame iPhone 15 (393×852) para cada pantalla — usa la plantilla de dispositivo de Figma


• Usa solo rectángulos grises, texto negro y líneas — sin colores, sin íconos detallados


• Representa imágenes con rectángulos grises con una X diagonal (placeholder estándar)


• Enfócate en la jerarquía: ¿qué ve el usuario primero? ¿Qué es más importante en cada pantalla?


• Mantén los wireframes simples — si pasas más de 5 minutos en uno, estás añadiendo demasiado detalle

Principios de estructura

• Navegación inferior con 3-4 tabs: Tareas, Calendario, Perfil (máximo 5 tabs en móvil)


• El contenido principal debe estar al alcance del pulgar — la zona inferior es la más accesible


• Usa patrones conocidos: lista scrolleable, FAB (Floating Action Button) para crear, swipe para acciones


• Deja suficiente espacio para el teclado cuando hay campos de texto — diseña pensando en la interacción real


• Incluye estados vacíos: ¿qué ve el usuario cuando no tiene tareas? Nunca dejes una pantalla vacía sin guía

Consejo: Los wireframes no tienen que ser bonitos. Su propósito es definir qué va en cada pantalla y dónde. Si pasas más de 30 minutos en los wireframes de toda la app, es suficiente.

Practica de portfolio

Convierte esta leccion en evidencia real: arma una entrega pequena que puedas mostrar en una entrevista, en LinkedIn o en tu portfolio. Trabaja con un caso propio o con una empresa ficticia, pero deja claro el problema, la decision y el resultado.

• Entregable: una captura, documento, repositorio o tablero con el resultado final.


• Checklist: objetivo, pasos seguidos, criterio de calidad y mejora pendiente.


• Mini-rubrica: si otra persona lo revisa, debe entender que hiciste, por que y como repetirlo.

Aplicación práctica en un caso real

Aplicar Wireframes y Estructura dentro del contexto de Figma desde Cero con criterio práctico, evitando quedarse en una definición aislada. Para que esta lección sea útil, imagina un escenario concreto: tienes que usar este tema para mejorar un proceso, tomar una decisión, crear un entregable o explicar una recomendación a otra persona. La pregunta no es solo “qué significa”, sino “qué haría diferente después de entenderlo”.

Un buen uso empieza por delimitar el problema. Define qué resultado quieres lograr, qué información tienes disponible, qué restricciones existen y cómo sabrás si la decisión fue correcta. Esta forma de pensar evita respuestas genéricas y convierte el aprendizaje en una herramienta de trabajo.

Marco de decisión

Antes de avanzar, revisa tres niveles: primero, el objetivo operativo; segundo, los recursos disponibles; tercero, el riesgo de equivocarte. En Figma desde Cero, muchas decisiones fallan porque se copia una táctica sin entender el contexto. El marco correcto te obliga a adaptar, no solo repetir.

• Objetivo: qué resultado medible o visible quieres conseguir.
• Contexto: quién usará esto, con qué nivel de experiencia y bajo qué restricciones.
• Acción: cuál es el siguiente paso mínimo que puedes ejecutar hoy.
• Señal: qué evidencia vas a observar para decidir si funcionó.

Ejemplo guiado

Supón que debes implementar esta idea en una pequeña empresa o proyecto personal. En vez de intentar una versión perfecta, prepara una versión mínima: una plantilla, una prueba, una lista de control, una automatización simple, una página, un mensaje o una medición inicial. Luego pide feedback o compara el resultado contra una métrica.

Si el resultado mejora, documenta el proceso. Si no mejora, identifica si falló la hipótesis, la ejecución o la medición. Esta distinción es clave: muchas personas abandonan una buena idea por una mala primera ejecución, o escalan una mala idea porque miraron la métrica equivocada.

Errores frecuentes

• Confundir actividad con avance: hacer muchas tareas sin saber qué resultado persiguen.
• Copiar ejemplos sin adaptarlos al cliente, audiencia, equipo o nivel técnico real.
• No dejar evidencia: si no registras decisiones y resultados, no aprendes del proceso.
• Querer automatizar o escalar antes de validar que el enfoque básico funciona.

Ejercicio práctico

1. Escribe el objetivo de esta lección en una frase aplicada a tu caso.
2. Define un entregable pequeño que puedas crear en menos de una hora.
3. Lista tres criterios para evaluar si ese entregable está bien hecho.
4. Ejecuta una versión inicial y anota qué cambiarías en una segunda iteración.

Checklist de salida

• Puedo explicar el concepto con mis propias palabras.
• Tengo un ejemplo aplicado, no solo una definición.
• Sé qué error debo evitar primero.
• Tengo una acción concreta para practicar esta semana.