Auto Layout en Figma

Una introducción con ejemplos para que finalmente entiendas mejor cómo funciona Auto Layout en Figma, y qué puedes conseguir para adaptar tus diseños automáticamente.

Auto Layout es una de las funciones esenciales de Figma, con una versatilidad que la separa de otros programas de diseño. De una forma resumida, permite estructurar componentes o frames de forma que puedan crecer automáticamente, haciendo que un contenedor se adapte al tamaño de sus contenidos, o viceversa.

Siendo una función tan flexible, tiene también su complejidad y limitaciones. Sobre todo al principio, cuesta un poco entender cómo funciona; y es complicado, inicialmente, tener resultados previsibles sin tantos intentos de prueba y error.

En este artículo veremos lo que puedes conseguir con Auto Layout. Iremos paso a paso desde sus características esenciales, hasta una idea del potencial que guarda detrás para conseguir diagramaciones más complejas en tus diseños. Aunque no deja de ser introductoria, espero que esta guía sea lo suficientemente completa como para que empieces a usar esta función de Figma con más confianza.

Entendiendo lo básico

Empecemos por algo simple. Puedes aplicar Auto Layout a un frame (incluso si está vacío), y también a componentes. Aunque claro, empezarás a ver cómo funciona cuando tienes al menos dos capas.

El ejemplo más clásico es un botón: un frame con un texto, tan simple como eso. Con solo aplicar Auto Layout, ya empiezan a suceder algunas cosas, que veremos una por una para entenderlas y adaptarlas a lo que necesitemos.

Dirección

Para empezar, tenemos la dirección. Esto es hacia dónde crecerá el componente una vez que tenga más, o menos contenido. Puede ser vertical (indicado por una flecha hacia abajo) u horizontal (flecha hacia la derecha). En nuestro primer ejemplo se ha configurado para que sea horizontal. Esto quiere decir que si el texto es más largo, entonces el componente se estirará horizontalmente para hacer lugar al contenido.

La dirección también podría ser vertical. Figma aplica una u otra por defecto dependiendo de la estructura del componente, y de lo que entiende que tiene más sentido para cada caso. De todas formas, esto es algo que se puede cambiar en cualquier momento.

Padding

Si has trabajado antes con CSS, esto te resultara familiar. Y si no, puedes entender al padding como los márgenes internos del componente. Cuando aplicas Auto Layout, Figma añade un padding automáticamente a cada uno de los lados, basado en la separación con el frame contenedor que tenían las capas inicialmente. Si hacemos clic en las opciones de padding, veremos los valores aplicados: Figma ha calculado para que sean los mismos arriba y abajo, e izquierda y derecha. Aún así, se pueden modificar para que cada uno de los valores sea diferente entre sí.

Cuando los paddings no son todos iguales, aparece el texto Mixed. Si quisieras la misma separación en todos los lados a la vez, puedes escribir el valor numérico que quieras, y el padding se aplicará de manera uniforme.

Entonces, todo esto quiere decir que a medida que el contenido varíe, el componente respetará esos valores para dejarlos libres, justamente como si fueran márgenes en blanco.

Separación

Hasta ahora hemos tenido una sola capa de texto dentro del frame, ¿pero qué pasaría si tuviéramos otra? Si añadimos un elemento adicional, digamos un ícono, veremos que hay una separación entre ícono y texto. Esta distancia no tiene que ver con el padding, sino que es un valor que se configura aparte en los ajustes de Auto Layout. En principio, esta distancia será la misma entre todos los elementos. Eso quiere decir que si añadiéramos otro ícono a la derecha, tendría la misma separación automáticamente: todas las capas dentro del componente tienen igual distancia entre ellas.

La separación es algo que viene muy bien cuando tenemos un componente que incluye varias capas que deben estar separadas de una forma regular entre ellas, de forma que el layout no se rompa si añadimos o quitamos elementos. Un ejemplo muy claro serían los ítems de una lista. Con esta separación, no importa cuántos elementos tengamos, todos estarán siempre a la misma distancia uno de otro. Cuando añadimos (o quitamos) una capa, tendrá estos valores en cuenta.

Ahora que tenemos más elementos dentro del componente, podemos ver lo que está pasando en la lista de capas. Figma usa por defecto un orden inverso a lo que vemos en pantalla. Quiere decir que la capa de más arriba será la que esté más abajo en el diseño, y viceversa.

Esto, personalmente, es al revés del orden que suelo mantener. Tienes que tener en cuenta que si cambias las capas de orden desde la lista de capas, también se cambiarán en el diseño. Por lo tanto, el orden de las capas es algo que tienes que cuidar más que nunca cuando usas Auto Layout, porque afecta directamente cómo se ve el diseño en pantalla.

Distribución

En la sección anterior vimos cómo los elementos se separan de acuerdo a un valor fijo que hemos determinado. Dentro del cuadro de padding, esto aparece con el nombre de Packed. Sin embargo, no es la única forma de separar o distribuir los elementos dentro de un frame con Auto Layout. Adicionalmente, también tenemos la opción de Space between, que quiere decir algo así como "espacio entre medio".

Aplicar esta opción cambiará el ancho o alto del frame contenedor a un valor fijo, y usará el espacio entre cada elemento para repartirlo en cantidades iguales. Si las dimensiones de cualquiera de estos elementos cambiara, de todas maneras seguirán distribuidos de la misma forma. Esto es una manera de conservar una separación variable, pero de todas maneras regular.

Alineación

Cuando trabajamos con Auto Layout, tienes que olvidarte de todo lo que has aprendido hasta ahora. Bueno, no de todo, pero sí de algo en particular: los elementos no se alinean individualmente, sino que se aplica una sola configuración que afecta a todos a la vez. Esto se hace desde las mismas opciones donde se encuentra el padding.

En este mismo cuadro están la distintas posibles alineaciones, que determinarán cómo se acomodarán los elementos dentro del componente con Auto Layout. La alineación está representada por este icono… ¿azul?

En nuestro próximo ejemplo tenemos aplicado un Auto Layout vertical. Sólo podremos centrar los elementos horizontalmente porque tenemos aplicada la opción de Hug contents. Esto lo veremos un poquito más adelante cuando hablemos de Resizing, pero básicamente quiere decir que el contenedor principal se ajusta al tamaño de su contenido.

Como el elemento más largo son los dos ítems centrales, esos son los que marcan el ancho y no parecen moverse. Los otros, al ser más pequeños, sí que son afectados por la alineación.

Cuando tenemos un contenedor al que le hemos cambiado el alto y ancho manualmente para que tenga un tamaño específico (es decir, fijo), entonces sí los elementos internos tendrán posiblemente más libertad o espacio para moverse, y por lo tanto las opciones de alineación serán más útiles para ubicarlos en el espacio, tanto horizontal como verticalmente.

Resizing

Ahora que tenemos todo lo básico bajo control, vamos a movernos a las opciones de Resizing. Esta configuración determina cómo un frame contenedor y sus capas interiores escalan o se estiran, a medida que cualquiera de ellas cambia su alto o ancho. Estas opciones son un poco complejas, porque tanto el frame contenedor como los interiores pueden tener cada uno sus propias configuraciones de resizing, que se afectan mutuamente.

Veremos paso a paso cómo funciona esto, usando este ejemplo: tenemos una Card que incluye una imagen, un texto y un botón. Hay un padding uniforme de 24px, y la separación entre elementos es de 16px. Como puedes ver en la imagen, no todos los elementos tienen el mismo ancho, y están centrados horizontalmente.

Hug contents

La primera opción de resizing que veremos se llama Hug contents y se traduce cariñosamente como "abrazar contenidos". Básicamente, quiere decir que el frame contenedor adapte su tamaño a sus contenidos. Esto se puede aplicar tanto para el ancho y el alto del contenedor, y es un poco lo que hemos estado viendo que sucede en los otros ejemplos.

Si añadiéramos más texto, entonces el contenedor seguiría estando lo más cerca posible (o abrazando) a los contenidos, con el mismo padding que hemos definido antes. Es decir, serían los contenidos quienes definan qué tan ancho o alto será el contenedor.

Lo mismo sucedería si no estuviera la imagen. Ocultando esa capa podemos ver cómo el contenedor se adapta, reduciendo su tamaño solamente a lo que necesitan los elementos visibles restantes, el texto y el botón.

Fixed

Ahora, si cambiáramos manualmente el ancho o el alto del contenedor, entonces dejaría de estar configurado como Hug contents y pasaría automáticamente a Fixed, con un alto fijo o decidido manualmente por el diseñador en jefe. Esto quiere decir que ahora el contenedor será el que mande en determinar el alto, y las capas interiores se tendrán que acomodar dependiendo de la configuración de resizing que tenga cada una de ellas.

Si además ocultáramos el botón, por ejemplo, el contenedor entero no se vería afectado, y seguiría manteniendo el alto que fue definido como fijo. Esto se podría cambiar fácilmente: volviendo a poner la configuración en Hug contents se adaptaría nuevamente a sus contenidos.

Fill container

Para las capas interiores, que están dentro de un contenedor, podríamos elegir la opción de Fill container, que quiere decir algo así como: "ocupa todo el ancho posible". En los ejemplos anteriores, el botón siempre ha tenido un ancho que no era el máximo posible, sino el que requerían sus contenidos.

Esta es una configuración que se puede aplicar capa por capa dentro de un mismo componente. Por lo tanto, la imagen, el texto y el botón podrían tener comportamientos diferentes de acuerdo a lo que decidamos (repasando: si queremos que ocupen todo el ancho posible, o tengan un ancho fijo).

Un ejemplo que podría venir bien es cuando tenemos dos contenedores con alto fijo uno al lado del otro. Haciendo que el texto ocupe todo el alto posible (es decir, que esa capa esté con Fill container) podríamos conseguir que los dos botones estén alineados siempre debajo, porque la capa de texto los está empujando para usar todo el alto que pueda.

A partir de aquí, se pueden empezar a jugar con distintas combinaciones de configuración. Quizás lo más importante es decidir quién manda a la hora de definir el ancho y alto total del componente: si el contenedor o sus contenidos.

Constraints

Las opciones de Constraints se usan generalmente en Figma para determinar la posición que tendrá un objeto a medida que cambia el tamaño del frame al que pertenece. Entonces nos preguntamos cosas como: ¿Debería quedarse centrado, o mantener siempre la misma distancia hacia uno de los lados? Cuando hablamos de Auto Layout, las constraints determinan, además de esto, de qué forma "crecerá" el componente o frame a medida que cambie su contenido.

Estas opciones se pueden seleccionar desde Constraints and Resizing, que ya hemos visto antes, marcando las líneas azules de la forma que queremos, o bien eligiéndolas desde el menú desplegable. En caso de usar el menú, hay que elegir separadamente las opciones para el posicionamiento horizontal, y vertical, mientras que en el cuadro de líneas se podría hacer todo al mismo tiempo.

En alguno de los ejemplos que hemos visto antes, ya habían opciones de constraints aplicadas. En el ejemplo que verás debajo, habíamos comentado que el componente se adapta al ocultar una de las capas. Lo que también está pasando es que se queda centrado verticalmente en el espacio, porque la constraint vertical está en Center.

Si en cambio eligiera la opción de Top, entonces el componente mantendrá la separación que tiene al margen superior a medida que se hace más, o menos alto.

Lo mismo podríamos usar con componentes o frames que tengan aplicados un Auto Layout horizontal, para decidir si queremos que queden centrados, o más cerca de la derecha o izquierda, a medida que se van ampliando a lo ancho de su contenedor.

Layouts anidados

Hasta ahora hemos aplicado Auto Layout solamente a un frame a la vez, por más que hemos cambiado la configuración de sus capas interiores también. Las cosas empiezan a complicarse un poco (y ponerse más interesantes, también) cuando aplicamos Auto Layout también a los frames interiores.

Esto se llama un comportamiento anidado (o nested, en inglés): cuando aplicas Auto Layout a un frame, y al mismo tiempo lo usas también en alguno de sus contenidos interiores. Esto nos da mucha más posibilidades para conseguir diagramaciones complejas, donde cada elemento tenga cierta independencia en la forma en que crecerá y se adaptará. Vamos por partes.

Lo primero que vemos en la imagen superior, es que cada uno de los ítems tiene un layout vertical, porque al ocultar una de las capas de texto, el contenido se centra verticalmente. Pero esto es solamente para los textos, que están agrupados en un mismo frame, solamente ellos. Dentro de ese mismo componente, podemos aplicar un Auto Layout horizontal a todo el contenedor del ítem, de forma que si quisiéramos ocultar las imágenes de usuario, el texto ocuparía todo el ancho posible.

El frame principal que contiene todo esto también tiene un Auto Layout vertical, de manera que podemos ocultar y mostrar algunos de los ítems, y todo el bloque se adaptará verticalmente al contenido del que disponga en cada momento.

Haciendo un resumen hasta ahora: los textos están agrupados con un layout vertical, y están dentro de un ítem que tiene un layout horizontal. Al mismo tiempo, todo esto está dentro de un gran, gran contenedor que tiene un layout vertical para adaptarse a la cantidad de ítems que tenga. ¿Algo más? Sí. En caso de que no te hayas dado cuenta, la separación de los ítems con fotos de usuarios es más pequeña que la del resto de los elementos del bloque principal.

Para conseguir esto, se han agrupado (solamente los ítems) en otro layout adicional, de forma que también tengan un Auto Layout vertical, como el bloque principal -- pero con la diferencia de que estos elementos tienen una separación menor. Esta es también una razón válida para usar Auto Layout anidado: mantener un mismo comportamiento general, pero agrupar capas con distintas separaciones.

Para seguir aprendiendo

¡Y esto es todo! Espero que después de leer esto, y ver algunos ejemplos, te haya quedado un poco más claro cómo funciona Auto Layout en Figma. Como pasa con todas las cosas en la vida, requiere algo de práctica hasta empezar a obtener resultados mas predecibles y controlados. Y aún así, dependiendo de lo que quieras conseguir, siempre hace falta algo de prueba y error.

Lo más recomendable es experimentar y probar, hasta que te sientas con más confianza en las decisiones que vas tomando al pensar la estructura de tus componentes. Y si quieres seguir aprendiendo, te dejo estos enlaces que también te pueden ayudar. Gracias por leer y, sobre todo, por llegar hasta el final.