Diseñar interfaces consistentes y profesionales requiere comprender cómo se organizan los elementos en pantalla. Auto layout es una de las funcionalidades más poderosas de Figma, y su dominio marca la diferencia entre un diseño estático y uno que se comporta de forma inteligente, adaptándose al contenido tal como lo haría en una página web real.
¿Qué es el box model y por qué importa en diseño web?
Antes de aplicar auto layout, es fundamental entender el box model [0:28]. Este modelo describe cómo se construye prácticamente toda la tecnología front-end actual: cada elemento visible en una página web es una caja. Cajas dentro de cajas, dentro de más cajas.
Estas cajas poseen propiedades que generan consistencia visual:
- Márgenes: distancia externa entre una caja y los elementos que la rodean.
- Paddings: distancia interna entre el borde de la caja y su contenido [3:19].
- Comportamientos de alineación: cómo se distribuyen los elementos hijo dentro de la caja.
Esa consistencia basada en distancias simétricas y reglas claras es lo que hace que las interfaces web se vean ordenadas y profesionales.
¿Cómo funciona auto layout en Figma?
El auto layout convierte una serie de capas en frames organizados con propiedades automatizadas [1:05]. Cuando aplicas auto layout a un grupo de objetos, estos dejan de ser elementos sueltos y se transforman en un frame con reglas definidas.
¿Qué propiedades tiene un frame con auto layout?
- Alineación vertical u horizontal: las cajas se organizan a lo largo o a lo alto [1:20].
- Distribución interna: los elementos dentro de un frame vertical se alinean a la izquierda, derecha, centro o se amplían.
- Distancias consistentes: el patrón de separación entre elementos hijo se mantiene automáticamente [1:52].
Para crear un auto layout, basta con seleccionar los objetos y presionar Shift + A [2:14]. Figma asigna una alineación por defecto, aunque a veces es necesario corregirla si el comportamiento no es el deseado.
¿Qué sucede al editar elementos dentro de auto layout?
Aquí es donde aparece la verdadera utilidad. Si ocultas una de las cajas internas usando el ícono del ojo, los demás elementos colapsan automáticamente para mantener la consistencia [2:45]. También puedes reorganizar los elementos arrastrándolos con el mouse o utilizando las flechas del teclado [3:01].
¿Cómo crear un botón dinámico con auto layout?
Uno de los ejemplos más prácticos es la creación de un botón que se adapta al contenido [3:38].
- Presiona T para insertar una capa de texto y escribe el nombre del botón, por ejemplo "Ingresar".
- Con la capa seleccionada, aplica Shift + A para generar el auto layout.
- Añade un color de fondo desde el fill del frame y cambia el texto a blanco.
- Suaviza los bordes con un radio de 8 píxeles [4:20].
El resultado es un botón que, al duplicarlo y cambiar su texto, ajusta su tamaño automáticamente según la longitud del contenido [4:36]. Los paddings que controlan este comportamiento aparecen en el panel de propiedades a la derecha, mostrando valores como 10, 10 y 10 [4:58].
¿Cómo agrupar múltiples objetos con auto layout?
Cuando seleccionas varios rectángulos y aplicas Shift + A, Figma detecta la intención de alineación [5:18]. Si los elementos están muy juntos, puedes aumentar el espacio vertical desde los paddings para distinguirlos mejor [5:35].
Dentro de un frame con auto layout puedes realizar ajustes individuales:
- Cambiar la alineación de un objeto específico al centro, izquierda o derecha [6:15].
- Reordenar los elementos arrastrándolos a nuevas posiciones.
- Modificar el tamaño de un elemento sin romper la alineación general [5:55].
- Alternar entre alineación vertical y horizontal según la necesidad del diseño.
La gran ventaja de trabajar con auto layout es que replica el box model que los desarrolladores usan al codificar [3:23]. Esto crea un lenguaje común entre diseñadores y programadores, facilitando la comunicación y reduciendo errores en la implementación.
Como ejercicio práctico, intenta construir un formulario dinámico con al menos cuatro campos de información y un botón de call to action, todo dentro de un solo frame con auto layout [6:52]. Comparte tu resultado en los comentarios para recibir retroalimentación.
