Auto layout con figma ¡Una característica revolucionaria!

En este artículo te explicaremos una característica revolucionaria de Figma en el mundo del diseño web - Auto Layout - con ella podremos crear frames con tamaños dinámicos.

Diseño web
Lectura de 6 minutos
11 feb. 2020
Auto layout con figma ¡Una característica revolucionaria!

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.

auto layout con figma

¿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.

figma funciona

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.

tamaño auto layout figma

*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.

orientacion figma

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.

padding figma

Puedes sacar provecho de los paddings para crear un sistema de botones

sistema de botones figma

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.

espaciado orden y alineación figma

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.

actualización alineación figma

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.

variaciones figma

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

Avatar

Alexis Mora Angulo

@jopzikVer perfil

🌮 Orgulloso nayarita y mexicano 💻 UI/UX y docente en EDteam 🖱 Hago cosas en Codepen 🏃🏾‍♂️ Runner de fin de semana 🌊 #NoTeDetengas

Recuerda iniciar sesión para comentar este articulo

Cursos recomendados

Sass Desde Cero

Sass Desde Cero

Avatar

Alvaro Felipe

5

4.9

Flexbox y Grid

Flexbox y Grid

Avatar

Alvaro Felipe

5

4.8

EDy flotante