Auto layout es una característica revolucionaría en el mundo del diseño web con la cual podemos crear frames con tamaños dinámicos en Figma. El tamaño de estos frames dependerá del contenido que haya dentro de ellos.
Si no usas Figma, recuerda que en EDteam tenemos el curso de 👉 Figma Desde Cero, donde aprenderás a dominar este software de diseño
Creando un frame con auto layout
Tenemos tres formas para empezar a utilizar auto-layout: la primera es presionado el shorthund SHIT + A mientras tenemos cualquier capa seleccionada, la segunda es click derecho > Agregar auto-layout también mientras seleccionamos cualquier capa, y la tercera es directamente desde el botón Agregar auto layout desde el panel de opciones en la derecha. A diferencia de los otros dos métodos, dicho botón sólo aparecerá cuando estemos seleccionando un frame. Una vez aplicado auto layout, cambiará el icono del frame que se muestra en el panel de capas.
¿Cómo funciona?
Como mencioné al inicio del artículo, un frame con auto layout tendrá un tamaño dinámico que dependerá del contenido que haya dentro de éste, por lo que las opciones para modificar la altura y la anchura estarán deshabilitadas desde un inicio.
Entonces, ¿cómo puedo controlar el tamaño? Por defecto la altura del frame será la suma de todos los elementos que haya dentro de él y su separación, mientras que la anchura se definirá por el elemento más grande, aunque también contamos con la opción de dar una anchura fija, con esto logramos que el frame únicamente crezca de manera vertical, sólo ten en cuenta que en algunos casos tendrás que hacer ajustes manuales en algunos elementos.
IMPORTANTE: Mientras se escribía este artículo, Figma recibió una actualización la cual nos ayuda con el contenido dentro de un auto layout con tamaño fijo. Para más información pasa a la sección de Espaciado, orden y alineación.
Orientación
De momento ya vimos cómo controlar la anchura, ¿pero qué tal si lo que quiero es controlar la altura? Ahí es donde entra la orientación de un frame con auto layout. La orientación la definirá figma por dependiendo el acomodo que tengan los elementos, pero nosotros la podremos cambiar cuando queramos y elegir entre horizontal o vertical desde el panel de opciones.
La orientación definirá el acomodo en que los elementos se muestran dentro del componente y el tipo de tamaño fijo que podremos modificar en nuestro frame (altura o anchura). Si sabes algo de CSS, piensa en esto como un contenedor con display:flex al cual le cambias la dirección al main axis. De ti dependerá saber cuándo utilizarás cada orientación.
Paddings
Creo que ésta es mi parte favorita. Ya no más dolores de cabeza por ajustar el padding de forma manual, estar calculando tamaños y volver a hacerlo cada vez que el contenido cambie, ahora lo único que debes hacer es elegir el tamaño de padding que deseas y figma se encargará de hacer el resto. De momento sólo aplica de manera vertical y horizontal, pero confío en que en un futuro puedas añadir los paddings desde cualquier lado de manera independiente.
Puedes sacar provecho de los paddings para crear un sistema de botones
Espaciado, orden y alineación
Sobre estas características no hay que explicar mucho. Espaciado es la separación que hay entre los elementos dentro del componente (que será la misma para todos, al menos que tenga un grupo, frame o auto layout dentro y la cambies). El orden vendría siendo el mismo concepto que smart selection, donde podemos intercambiar la posición de los elementos y la alineación viene siendo la adaptación de los constraints en auto layout, puedes elegir entre izquierda, en medio o a la derecha. Estas características puedes modificarlas desde el panel de opciones o utilizando el mouse.
Actualización en alineación
Ahora la alineación tiene la opción de stretch left & right, que al igual que con los constraints, hace que el contenido se pegue de izquierda a derecha, por lo que crecerá junto con el frame principal cuando se modifique.
Crear variaciones
Olvídate de crear un componente por cada una de las variaciones que necesites debido a los distintos tamaños o contenidos. Ahora lo único que debes hacer es crear el componente principal e ir ocultando lo que no necesites, auto layout se encargará del resto.
Conclusión
Auto layout es una característica que marcará un antes y después en el mundo del diseño web. Si utilizas Figma, pero no esta característica, es tu oportunidad para empezar a hacerlo y crear interfaces más flexibles.
Si no usas Figma, recuerda que en EDteam tenemos el curso de 👉 Figma Desde Cero, donde aprenderás a dominar este software de diseño