Quiz: Revisa los conceptos finales del proyecto

Tipo de lección: Quiz

Concepto clave

En el diseño de interfaces con Figma, el Auto Layout es el sistema que organiza elementos de forma automática, como un organizador de escritorio que ajusta tus documentos cuando añades o quitas papeles. Imagina que estás diseñando una lista de tareas: cada nueva tarea que agregas hace que las demás se desplacen hacia abajo automáticamente, manteniendo el espaciado consistente sin que tengas que mover cada elemento manualmente.

Este concepto es fundamental porque permite crear diseños responsivos y escalables. Cuando cambias el contenido o el tamaño de un elemento, todo el diseño se adapta como un acordeón que se expande o contrae manteniendo su estructura. En una app de productividad, esto significa que tus interfaces funcionarán en diferentes tamaños de pantalla y con contenido variable sin romperse.

Cómo funciona en la práctica

Vamos a crear un botón con Auto Layout paso a paso:

1. Selecciona un rectángulo y un texto dentro de Figma
2. Haz clic en el ícono de Auto Layout en la barra superior (o presiona Shift+A)
3. Ajusta el espaciado entre elementos en el panel derecho
4. Cambia la dirección a horizontal o vertical según necesites
5. Prueba a modificar el texto: verás cómo el botón se ajusta automáticamente

Por ejemplo, si tu botón dice "Guardar" y luego cambias a "Guardar cambios", el botón se expandirá para acomodar el texto más largo sin que tengas que redimensionarlo manualmente.

Caso de estudio

En nuestra app de productividad, diseñaremos una tarjeta de tarea usando Auto Layout:

Elemento	Configuración Auto Layout	Resultado
Título de tarea	Texto con padding	Se expande con títulos largos
Checkbox + texto	Dirección horizontal, 8px de espacio	Elementos alineados perfectamente
Fecha y etiquetas	Dirección horizontal, espacio entre 16px	Se redistribuyen al añadir etiquetas

Un diseño con Auto Layout bien implementado puede reducir el tiempo de ajustes en un 70% cuando el contenido cambia.

Errores comunes

• Anidar demasiados Auto Layouts: Crear estructuras dentro de estructuras sin necesidad, como poner un Auto Layout dentro de otro cuando uno solo bastaría. Esto hace el diseño lento y difícil de mantener.
• No usar constraints correctamente: Olvidar configurar cómo deben comportarse los elementos cuando el contenedor cambia de tamaño. Es como construir una estantería sin pensar en qué pasa si la mueves a otra pared.
• Espaciado inconsistente: Usar diferentes valores de padding y margin en elementos similares. En una lista de tareas, si cada ítem tiene espaciado diferente, se verá desordenado.
• Ignorar la jerarquía visual: Poner todo en Auto Layout sin pensar en qué elementos son más importantes. En nuestra app, el título de la tarea debe destacar más que la fecha.

Checklist de dominio

1. ¿Puedes crear un botón que se expanda automáticamente con texto más largo?
2. ¿Sabes ajustar el espaciado entre elementos en un contenedor con Auto Layout?
3. ¿Entiendes la diferencia entre dirección horizontal y vertical en Auto Layout?
4. ¿Puedes anidar correctamente dos niveles de Auto Layout?
5. ¿Sabes usar constraints para fijar elementos a los bordes del contenedor?
6. ¿Puedes crear una lista que se reordene al añadir o quitar elementos?
7. ¿Entiendes cómo afecta el Auto Layout al diseño responsivo?

Diseña una tarjeta de tarea responsiva

Crea una tarjeta para mostrar tareas en la app de productividad siguiendo estos pasos:

1. Abre un nuevo frame en Figma de 350px de ancho
2. Crea un rectángulo como contenedor principal y aplica Auto Layout vertical
3. Añade un texto para el título de la tarea y configúralo como elemento principal del Auto Layout
4. Agrega un segundo contenedor con Auto Layout horizontal para checkbox y descripción
5. Incluye un tercer contenedor para fecha y etiquetas con espaciado automático
6. Prueba a cambiar el texto del título a algo más largo y verifica que todo se ajuste
7. Duplica la tarjeta 3 veces para crear una lista y ajusta el espaciado entre tarjetas

Pistas

• Comienza con el contenedor más grande y ve añadiendo elementos de dentro hacia afuera
• Usa el panel de diseño en la derecha para ajustar padding y espaciado entre elementos
• Prueba a desactivar temporalmente el Auto Layout para ver la diferencia en el comportamiento

Evalua tu comprension

Completa el quiz interactivo de arriba para ganar XP.