Aprende Auto Layout de Figma
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
2. Haz clic en el “+” de Auto Layout en el panel de propiedades de la derecha.
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
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:
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.
Subscríbete a uiFromMars
Un lugar construido exclusivamente para diseñador@s UI/UX y de producto que buscan crecer día tras día :)
¡Únete a 6822 diseñador@s y empieza ya!
