Concepto clave
El Auto Layout en Figma es como un sistema de construcción modular para interfaces. Imagina que estás armando un mueble con piezas que se ajustan automáticamente: si cambias el tamaño de un cajón, los demás se reorganizan sin que tengas que moverlos manualmente. En diseño de producto, esto significa crear componentes que se adaptan dinámicamente al contenido, manteniendo consistencia y ahorrando horas de trabajo.
En esencia, Auto Layout aplica reglas de espaciado y alineación entre elementos. Cuando agregas texto, iconos o imágenes, estos se "empujan" entre sí siguiendo las reglas que defines. Esto es crucial para apps de productividad, donde los elementos como botones, listas y tarjetas deben funcionar perfectamente en diferentes contextos y tamaños de pantalla.
Cómo funciona en la práctica
Vamos a construir un botón reutilizable para nuestra app de productividad. Sigue estos pasos:
- Abre Figma y crea un nuevo frame (atajo: F).
- Dibuja un rectángulo (atajo: R) de 120x40 píxeles.
- Selecciona el rectángulo y haz clic en "+" en la sección Auto Layout del panel derecho.
- Agrega un texto dentro (atajo: T) con la palabra "Guardar".
- Observa cómo Figma automáticamente organiza el texto centrado dentro del rectángulo.
- Ajusta el padding (espaciado interno) a 16 píxeles horizontal y 8 vertical en las propiedades de Auto Layout.
Ahora, si cambias el texto a "Guardar cambios", el botón se expande automáticamente. Este es el poder de Auto Layout: diseñas una vez y se adapta al contenido.
Caso de estudio
En nuestra app de productividad, necesitamos una tarjeta de tarea que muestre título, descripción y fecha. Usando Auto Layout, creamos un componente así:
| Elemento | Configuración Auto Layout |
|---|---|
| Contenedor principal | Direction: Vertical, Spacing: 8px |
| Título (texto) | Fixed width, Align: Left |
| Descripción (texto) | Hug contents, Align: Left |
| Fila de fecha/iconos | Direction: Horizontal, Spacing: 12px |
Al duplicar esta tarjeta y modificar el texto, todas mantienen consistencia visual. Si agregamos un icono extra en la fila inferior, el espaciado se preserva automáticamente.
Dato importante: En un estudio real, usar Auto Layout redujo el tiempo de diseño de componentes en un 60% según datos de equipos de producto.
Errores comunes
- Anidar demasiados Auto Layouts: Crear jerarquías muy profundas hace el diseño difícil de mantener. Solución: Usa máximo 3-4 niveles anidados.
- Olvidar definir paddings: Los elementos quedan pegados a los bordes. Solución: Siempre establece padding mínimo de 8px para legibilidad.
- Mezclar direction horizontal/vertical incorrectamente: Por ejemplo, poner iconos en vertical cuando deben estar en fila. Solución: Planifica la estructura antes de aplicar Auto Layout.
- No usar constraints con Auto Layout: Los elementos no se redimensionan bien en diferentes frames. Solución: Combina Auto Layout con constraints de anclaje.
Checklist de dominio
- Puedo crear un botón que se expande automáticamente con texto variable
- Sé ajustar spacing y padding entre elementos en un componente
- He practicado anidar Auto Layouts para estructuras complejas (ej: tarjetas con múltiples secciones)
- Puedo explicar la diferencia entre "Hug contents" y "Fixed width/height"
- He probado a duplicar y modificar componentes con Auto Layout manteniendo consistencia
- Sé identificar cuándo usar direction horizontal vs vertical
- Puedo resolver problemas comunes de alineación en componentes reales
Crea un componente de barra de navegación adaptable
Construye una barra de navegación superior para la app de productividad que incluya logo, título y menú de usuario. Sigue estos pasos:
- Crea un nuevo frame de 375x80px (tamaño móvil).
- Dentro, aplica Auto Layout con direction horizontal.
- Agrega tres elementos: un cuadrado de 40x40px como logo, un texto "Mi Productividad" como título, y un círculo de 32x32px como avatar de usuario.
- Configura el spacing entre elementos a 16px y padding general de 24px.
- Prueba a cambiar el título a un nombre más largo como "Gestor de Tareas Pro".
- Ahora, ajusta el frame a 768px de ancho (tablet) y observa cómo se comporta.
Entrega un screenshot mostrando ambas versiones (móvil y tablet) funcionando correctamente.
Pistas- Usa 'Hug contents' para el texto del título para que se expanda automáticamente
- Si los elementos no se alinean verticalmente, revisa la propiedad 'Align items' en Auto Layout
- Para el avatar, considera hacerlo componente (Ctrl+Alt+K) para reutilizarlo después
Evalua tu comprension
Completa el quiz interactivo de arriba para ganar XP.