Aprende Auto Layout de Figma

Escrito por Cris Busquets. Publicado en Diseño UI

Auto Layout de Figma en uiFromMars

Auto Layout fue publicado por primera vez en 2019 y, pese a que resolvía muchos problemas, era difícil anidar muchos dentro de un frame y poder alinearlos bien.

Este artículo hace referencia a la última versión de Auto Layout, publicada en noviembre de 2020.

He estado unos días jugueteando con esta nueva versión y pensé que quizás tú podrías aprovechar lo que he aprendido 🙂

¿Qué es Auto Layout?

Es la funcionalidad que te va a permitir crear frames que se adapten al contenido, sin tener que hacerlo tú manualmente. Por ejemplo, podrás añadir un icono a un botón sin tener que ajustarlo todo desde cero, incrementar el texto de una card y que todo se ajuste automáticamente, añadir un elemento nuevo en la barra de navegación y que se adapte todo, etc.

Como ves, puedes aplicar Auto Layout en infinidad de situaciones y, con la última actualización, todavía más.

Auto Layout: Cómo usarlo

Antes de nada, tienes 3 formas de aplicar Auto Layout en un Frame, siempre seleccionado primero el Frame entero (o solo los elementos que quieras convertir):

1. Haz clic encima con el botón derecho del ratón y escoger Add Auto Layout en el menú.

Aplica Auto Layout con el menú secundario

Aplica Auto Layout con el menú secundario

2. Haz clic en el “+” de Auto Layout en el panel de propiedades de la derecha.

Aplica Auto Layout usando el Panel de Propiedades

Aplica Auto Layout usando el Panel de Propiedades

3. Usa el atajo de teclado Shift + A (válido para Mac y Windows).

En cualquiera de los casos, al activar Auto Layout verás que en el panel de propiedades aparece este nuevo conjunto de botones y desaparece el de Constrains.

Propiedades de Auto Layout

Una vez hayas creado el Auto Layout, verás que aparecen nuevas opciones a la derecha.

Opciones panel Auto Layout

Opciones panel Auto Layout

En el vídeo siguiente te lo enseño, pero en resumen:

  • Las dos primeras opciones indican la posición de los elementos. Te servirán para indicar si los quieres en vertical (como en una card, por ejemplo) o en horizontal, como en una barra de navegación
  • El tercer icono te sirve para definir el espaciado entre los elementos que tenga el Auto Layout
  • El cuarto icono es para definir el espacio alrededor de los elementos. Por poner un ejemplo, serían los márgenes que dejarías en una card para que el texto no esté tocando el borde del fondo de la tarjeta
  • El último elemento, que tiene más opciones dentro, es una extensión del cuarto icono y  te permite definir cómo quieres que se alineen los elementos. También te permite definir espaciados diferentes en cada lado

 

Nuevo menú para redimensionar (resizing)

El redimensionamiento define cómo se comporta un objeto cuando el frame que lo contiene (el «padre») cambia su tamaño. Esto te recordará a las constraints que ya tenía Figma, aunque ahora comprobarás que son mucho mejores.

En el segundo panel del Auto Layout de la derecha verás tres nuevas opciones, que puedes combinar entre sí para obtener justo la variación que necesitas:

Auto Layout Figma - Redimensionar (resizing)

Opciones del panel de «resizing».

 

Con el siguiente vídeo verás qué puedes conseguir jugueteando con todas estas opciones:

  • Hug content (abrazar el contenido). Más allá de que el nombre es bonito, es la opción que mantiene el comportamiento de la primera versión de Auto Layout: siempre se ajusta al contenido.
  • Fixed (fijo). Mantiene el tamaño cuando se redimensiona el frame que lo contiene
  • Fill container (llenar contenedor). Ocupa todo el espacio disponible. Cuando empieces a probarlo te darás cuenta de que es la opción que te permitirá hacer componentes que sean 100% responsive.

Padding individual

La alegría que sentí al ver esta funcionalidad fue inmensa. Por fin podrás crear elementos que tengan su propio padding (espacio alrededor), independientemente del que hayas configurado al crearlo.

Mira este ejemplo:

Si estás familarizad@ con el CSS te darás cuenta de que el comportamiento es exactamente el mismo que logras al añadir padding en cualquier clase o id.

Elementos responsive con Auto Layout

Sé que todo esto suena muy bien pero creo que te estarás preguntando algo similar a… pero, ¿cómo se aplica esto a ejemplos «de verdad»?

Como conclusión

Como has visto con el ejemplo de arriba, esta nueva versión del Auto Layout nos trae mil y una posibles combinaciones y, la verdad, la única forma de aprender qué hacen y qué no hacen es ir probándolo a medida que te surja la oportunidad en lo que estés diseñando.

En mi opinión es especialmente adecuado para poder crear sistemas de diseño que funcionen casi solos, especialmente si lo mezclas con los variants de Figma.



Esto también te interesa 👇

Cómo me convertí en Product designer

Medir la usabilidad con el Sistema de Escalas de Usabilidad (SUS)

Introducción a FigJam de Figma: primeros pasos


Deja tu opinión

  1. Soy mega fan de auto layout y ahora en mi empresa construimos casi todo con el

  2. Cada día se aprende algo nuevo.

  3. Valentina

    Gracias me salvaste, no entendía nada de autolayout, pero con esto me quedo super claro!! Me encanta tú blogs saludos!

Deja tu comentario

Tu email no será publicado. Los campos con asterisco son obligatorios.

Únete a 4.333 diseñador@s y recibe los mejores contenidos para crecer.


No te enviaré spam. Recibirás un correo semanal y descuentos promocionales. Podrás darte de baja cuando quieras.