- Aprender a usar Auto Layout cambia la forma de diseñar en Figma. En lugar de colocar elementos en posiciones fijas, se definen reglas de comportamiento que el propio programa aplica cada vez que algo cambia.
- Auto Layout traduce al entorno visual de Figma la misma lógica que los desarrolladores usan para construir webs responsive, lo que facilita la comunicación entre diseño y desarrollo.
Auto Layout es, fundamentalmente, la respuesta de Figma a la pregunta que todos los diseñadores de UI se han hecho en alguna ocasión: ¿Por qué tengo que volver a colocar todos los elementos cada vez que cambio el texto de un botón? Un trabajo pesado que sufrían a diario y que, gracias a esta característica, ya es cosa del pasado. Con la función Auto Layout, los marcos de los contenedores de Figma se vuelven flexibles y son capaces de crecer, encogerse o reorganizarse en función del contenido que albergan. Utilizarlo es muy sencillo, pero vamos a explicarte algunos trucos o funciones avanzadas que pueden ayudarte mucho en tus procesos de trabajo.
Antes de tocar nada
Empezar a usar Auto Layout es muy sencillo. Seleccionas el frame o la capa que quieres convertir y, con la selección activa, basta con pulsar Shift + A para que se aplique al instante. También puedes hacerlo desde el panel derecho de diseño, donde aparece el botón correspondiente. Se abre entonces el panel de Auto Layout con todas las opciones disponibles. El flujo, antes denominado como dirección, es el más importante porque determina si los elementos se organizan en horizontal, en vertical o si pueden saltar a la siguiente línea cuando no haya más espacio.
Esta última opción, conocida como Wrap Layout, es especialmente útil cuando se trabaja con conjuntos de elementos cuya cantidad puede variar. Una fila de etiquetas de categorías, por ejemplo, o los botones de filtro de una aplicación de búsqueda. Si no caben todos en una sola línea, Wrap Layout los reorganiza automáticamente hacia la siguiente, igual que hace el texto al llegar al borde de una página.
El triángulo del espacio
Para comprender bien qué podemos hacer con Auto Layout, tenemos que entender tres conceptos relacionados pero diferentes: espaciado (padding), espacio (gap) y alineación. Si somos capaces de dominar los tres ahorraremos mucho tiempo en preparar nuestros diseños.
El padding controla el espacio interno entre el borde del contenedor y los elementos que contiene. Puede configurarse de forma uniforme, dando la misma cantidad a todos los lados, o de manera independiente. Figma también nos permite usar la fórmula abreviada de CSS directamente en el campo numérico. Así, por ejemplo, si escribimos «16 24» estaremos estableciendo un espaciado interno de 16 píxeles en vertical y 24 en horizontal.
El gap es la distancia entre los elementos dentro del frame, aunque muchas veces se confunde con el padding. Por defecto, el gap se aplica de forma uniforme entre todos los elementos del contenedor. Esto puede ser una ventaja si estamos creando listas o menús, pero nos limita mucho cuando necesitamos espaciado irregular entre elementos específicos. Para estos casos, la mejor solución es agrupar frames con sus propios Auto Layouts. Puede ser un poco pesado al principio, pero es la manera de tener más control sobre los pequeños detalles.
Finalmente, la alineación determina cómo se posicionan los elementos dentro del espacio disponible. El panel ofrece hasta nueve opciones cuando combinamos arriba, centro y abajo con izquierda, centro y derecha. Además, tenemos la opción Space Between, que distribuye los elementos empujando el primero hacia un extremo y el último hacia el otro. Es fácil de entender si imaginamos la típica barra de navegación o encabezado de una web con su logo a la izquierda y el menú a la derecha.
Cómo hacer crecer los contenedores (y cómo no)
Llegamos a los modos de redimensionado, una de las partes más confusas de Auto Layout, aunque es fácil entenderla con un poco de calma. Cada marco puede comportarse de tres maneras diferentes, en función de su ancho y su altura: Ancho Fijo (Fixed), Ajustar al Contenido (Hug) y Llenar el Contenedor (Fill).
Si elegimos Ancho Fijo, el contenedor mantiene sus dimensiones independientemente de lo que ocurra dentro. Por ejemplo, si el texto crece más allá del límite, simplemente se desborda o se oculta. Con Ajustar al Contenido, en cambio, el marco se adapta al contenido y digamos que lo abraza, creciendo o encogiéndose según lo necesite. Por último, con Llenar el Contenedor, el elemento se amplía para ocupar todo el espacio disponible en su contenedor padre.
La combinación de estos tres modos en un mismo diseño es lo que nos permite crear páginas web realmente responsive. Un botón típico suele funcionar con Ajustar en Horizontal, para adaptarse al texto que hay dentro, y con un padding fijo, que nos va a garantizar un espacio suficiente. En cambio, un botón dentro de una barra de navegación necesitará estar configurado con Llenar el Contenedor, para que se adapte a cualquier ancho de pantalla sin problemas.
Hay situaciones en las que un elemento necesita quedar fuera de la lógica del Auto Layout pero seguir dentro del contenedor. Puede ser el caso de una etiqueta flotante sobre una tarjeta de producto o el de un icono de cierre anclado en la esquina superior derecha de una caja. Para esto existe la opción Ignore Auto Layout, que en diseño se conoce como Posición Absoluta, que excluye al elemento de las reglas, pero lo mantiene dentro del contenedor. Se puede colocar exactamente donde se necesite usando restricciones y el resto de los elementos del Auto Layout lo ignoran al calcular sus posiciones.
La IA también aparece en Auto Layout
Las últimas actualizaciones de Figma trajeron una novedad que va en línea con la integración de inteligencia artificial en otras aplicaciones de diseño: Sugerir Auto Layout. Podemos activarla con el botón derecho y esta función analizará la selección de elementos disponibles para generar automáticamente la estructura de frames anidados que mejor encaja con su disposición en pantalla. El resultado es que podemos ahorrar mucho tiempo en el diseño, pero no siempre vamos a conseguir lo que teníamos en mente. Y corregirlo, sin entender bien el proceso, puede llevarnos más tiempo que hacerlo nosotros desde cero.
Otra de las novedades de Figma fue el lanzamiento de Grid o Cuadrícula, un nuevo modo dentro de Auto Layout que permite organizar elementos en filas y columnas simultáneamente. Hasta entonces, crear layouts de cuadrícula requería agrupar varios auto layouts horizontales dentro de uno vertical, una solución funcional pero compleja. Grid resuelve esto con un panel específico donde se controla el tamaño de filas y columnas, al tiempo que permite que un elemento ocupe varias celdas a la vez.
Entender Auto Layout es fundamental para trabajar correctamente en Figma. Un botón sin Auto Layout es un rectángulo con texto encima, que hay que ajustar a mano cada vez que la etiqueta cambia. El mismo botón con Auto Layout crece con el contenido, mantiene su espaciado interno bien definido y puede modificarse cientos de veces con diferentes etiquetas sin una sola intervención manual. Lo mismo ocurre con listas, tarjetas, formularios o menús desplegables.
Al principio puede parecer que estamos perdiendo el tiempo, pero en cuanto los componentes empiezan a responder solos, a estirarse y a reordenarse sin esfuerzo, resulta difícil entender por qué alguien querría hacer las cosas de otra manera.
