Lección 17 de 20 · Lectura y práctica

Construye componentes clave con Auto Layout

Tipo de lección: VideoConcepto claveEl 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.

Del concepto a la práctica

Taller de esta lección

Los componentes clave deben resistir contenido realista. Una tarjeta de tarea necesita acomodar títulos breves y largos, un estado y una acción sin depender de una altura accidental.

Ejemplo resuelto

Construye TaskCard vertical con título, fecha, etiqueta de estado y botón. Usa 16 píxeles de relleno, 12 entre bloques y un botón con Auto Layout interno. Configura el título con Fill en ancho, salto de línea y Hug en alto; la tarjeta conserva un ancho definido y crece verticalmente con su contenido.

Crea la estructura vertical y aplica relleno uniforme.
Añade título, fecha, estado y acción como capas separadas.
Convierte la tarjeta en componente y crea una instancia.
Sustituye el título por “Preparar informe de resultados del segundo trimestre”.

Error frecuente: fijar la altura para que todas las tarjetas parezcan idénticas. Corrígelo dejando que la altura dependa del contenido y controlando la consistencia mediante espaciado.

Pruébalo

Crea dos instancias: una con estado “Pendiente” y otra con “Completada”. Cambia solo propiedades previstas y conserva la estructura.

Comprueba tu resultado

La tarjeta larga debe crecer hacia abajo, mantener 16 de relleno y 12 entre bloques, y ambas instancias deben seguir vinculadas al componente.

Tres columnas comparan el ancho del botón: Hug se ensancha con Guardar cambios, Fill ocupa el espacio del contenedor y Fixed mantiene el ancho y envuelve el texto. — **Hug, Fill y Fixed**
Hug ajusta el tamaño al contenido, Fill ocupa el espacio disponible de su padre de Auto Layout y Fixed mantiene la medida. Compara los tres en el mismo eje y evita intentar que el padre abrace a un hijo que llena ese eje.
Ver la infografía en tamaño completo ↗

Una fila de ancho 360 se divide en padding izquierdo 16, icono 24, gap 8, contenido 296 y padding derecho 16; la resta muestra 360 menos 32 menos 24 menos 8 igual a 296. — **Padding y gap no son lo mismo**
El padding separa los hijos del borde del contenedor; el gap separa hijos entre sí. En una fila de 360, con padding 16 a cada lado, icono 24 y gap 8, quedan 296 para el contenido que llena el resto.
Ver la infografía en tamaño completo ↗

Tipo de lección: Video

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.

Sigue con Figma para Diseñadores de Producto: Domina Interfaces y Auto Layout

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.

Ver curso y opciones de acceso Ya soy estudiante

Si ya tenías acceso a este curso, entra con tu cuenta: tus derechos y tu progreso se conservan. No necesitas comprarlo de nuevo.

← Anterior: Planifica y define el sistema de diseño del proyecto Siguiente: Diseña las pantallas principales de la app →Entrar y guardar mi progreso