Dominar la consistencia entre elementos de una interfaz es uno de los mayores retos del diseño digital. Autolayout en Figma resuelve ese problema de raíz, permitiendo que tus objetos escalen y se reorganicen de forma automática mientras respetan distancias y alineaciones predefinidas. A continuación se desglosan los fundamentos y la práctica para aprovecharlo al máximo.
¿Qué es el box model y por qué importa antes de usar autolayout?
Antes de activar cualquier autolayout conviene comprender el box model, un concepto que proviene de la programación web y que aplica sin importar si diseñas para web, Android o iOS [01:13].
El modelo se compone de cuatro capas concéntricas:
- Contenido: el texto, la imagen o cualquier elemento que ocupa espacio en dos dimensiones.
- Padding: el espacio interior entre el contenido y el borde de la caja.
- Border: la línea que delimita la caja.
- Margen: el espacio exterior que separa una caja de otra.
Replicar este modelo dentro de Figma mejora drásticamente la comunicación con los equipos de desarrollo, porque ambos lados hablan el mismo idioma visual y técnico [04:27].
¿Cómo se crea y configura un autolayout en Figma?
Para activar autolayout basta con seleccionar dos o más objetos y presionar Shift + A [03:12]. Figma genera un frame contenedor que detecta automáticamente si la disposición es vertical u horizontal, y calcula la distancia promedio entre los elementos.
¿Cómo ajustar el padding y la alineación?
Una vez creado el autolayout, al pasar el cursor aparecen controles visuales —líneas rosadas— que indican las distancias entre elementos [02:15]. Desde el panel de propiedades puedes:
- Definir un padding global manteniendo presionado Command (o Control en Windows) y haciendo clic sobre el control [05:42].
- Modificar el padding de cada lado de forma independiente: arriba, abajo, izquierda y derecha.
- Establecer la alineación general (centro, izquierda, arriba) que actuará como comportamiento por defecto de todos los hijos del frame.
¿Qué significa fill container y fixed?
Cada elemento dentro de un autolayout puede tener un comportamiento independiente de redimensionado [06:24]:
- Fill container horizontal: el objeto se estira para ocupar todo el ancho disponible.
- Fill container vertical: el objeto crece en altura junto con el contenedor.
- Fijo (fixed): el objeto conserva sus dimensiones originales sin importar cómo cambie el frame.
- Ambos a la vez: el elemento llena el contenedor en las dos direcciones.
Este control granular garantiza que, al redimensionar la interfaz, cada pieza responda exactamente como se necesita.
¿Cómo aplicar autolayout en un caso real de diseño?
El ejemplo práctico consiste en construir una tarjeta de nota que se ajusta sola según la cantidad de contenido [08:02].
- Se seleccionan tres elementos de la barra superior —ícono de retroceso, título y menú de tres puntos— y se presiona Shift + A para crear un autolayout horizontal.
- Al título se le asigna fill container para que ocupe todo el espacio disponible entre los íconos, mientras los íconos permanecen fijos [08:52].
- Ese autolayout horizontal se combina con la foto y el bloque de texto inferior seleccionándolos todos y presionando de nuevo Shift + A, generando un autolayout vertical [09:18].
- La distancia de veinticuatro puntos entre secciones se mantiene uniforme.
- Al agregar más texto, el contenido se desplaza hacia abajo automáticamente respetando las proporciones definidas [09:48].
Otra ventaja clave es la capacidad de ocultar elementos sin romper el diseño: si escondes un objeto intermedio, los demás se comprimen manteniendo las mismas distancias [03:48]. También puedes reorganizar el orden arrastrando con el mouse o usando las flechas del teclado.
La consistencia deja de ser algo en lo que piensas manualmente y se convierte en un comportamiento automático del archivo. Prueba crear tus propios componentes, aplícales autolayout y experimenta redimensionándolos: notarás de inmediato cómo cada elemento responde de forma predecible. ¿Ya usas autolayout en tus proyectos? Comparte tu experiencia y tus dudas en los comentarios.
