El auto layout en Figma llegó para quedarse, y si quieres ser un diseñador UI/UX profesional, es necesario aprender cuándo y cómo usarlo.
En este artículo, te voy a enseñar cómo puedes empezar a utilizar el auto layout de Figma paso a paso y compartiré mi experiencia usándolo.
Aprenderás qué es, sus beneficios, cómo configurarlo y cuándo es más útil aplicarlo.
El auto layout, a grandes rasgos, nos permite crear diseños dinámicos en Figma que emulan elementos responsivos en la web.
Es una funcionalidad de Figma, nos permite añadir a un “frame” para que se adapte al contenido que tiene adentro. El ejemplo más clásico es el uso de un botón que necesitamos que crezca con base al texto sin tener que cambiar el tamaño del botón a cada rato.
Con el auto layout de Figma puedes:
La pregunta más presente a la hora de hablar acerca del autolayout en figma es:
“¿Por qué aplicaría todas estas configuraciones complicadas cuando puedo solo colocar los elementos y ya?”
Y la respuesta es, porque nos permite mostrar diseños responsivos y el comportamiento de módulos a diferentes resoluciones o tamaños.
El auto layout de Figma es particularmente útil si tu objetivo es:
El auto layout de Figma tiene varias propiedades que, a primera vista, pueden llegar a ser complicadas de entender, pero realmente no tienen por qué serlo. Puedes acceder a estas a través del panel de propiedades.
Vamos a ver cuáles son:
La más fácil de entender de todas las propiedades. Te sirve para decidir si tu auto layout se aplica de arriba a abajo o hacia los lados.
Vertical: Los elementos se apilan uno sobre otro.
Horizontal: Los elementos se alinean uno al lado del otro.
Wrap: Los elementos se desplazan hasta la siguiente fila una vez se completa el 100%
Al igual que otros programas de diseño como Illustrator o Photoshop, en Figma tenemos que el programa nos facilita la tarea de alinear a varios lados. Nada fuera de lo normal, esto es más a nivel general. La única diferencia es que en lugar de tener los clásicos “align to top” tenemos un pequeño panel más intuitivo que muestra si se coloca en la esquina superior derecha, izquierda, abajo o al centro.
La alineación controla (valga la redundancia) cómo se alinean los elementos dentro del marco del auto layout. Puedes alinear los elementos a la izquierda, derecha, arriba, abajo, al centro, etc.
Define el espacio entre los elementos dentro del Auto Layout. Puedes especificar un valor fijo o dejar que Figma lo calcule automáticamente. En mi opinión. Esta es literalmente la propiedad más util de todo este tema del layout. Es fácil de entender y puedes controlar la distancia de los elementos dentro del card en lo que parece ser (espero) pixeles.
Controla el espacio interior del contenedor alrededor de los elementos. Puedes definir el padding superior, inferior, izquierdo y derecho de manera individual o conjunta.
El resizing, es en mi opinión la propiedad más incomprendida de Figma. Así que vamos a simplificarlo.
Imagina que tienes una bolsa de plástico y quieres meter algo adentro. En ese caso, la bolsa de plástico se adapta a la forma de las cosas que tienen adentro. Si metes un lápiz la bolsa se apega a la altura del lápiz y lo abraza, si metes un radio la bolsa se apega a su ancho y lo abraza. En ambos casos, la bolsa de plástico termina cambiando su forma a lo que tiene adentro. Algo similar funciona con Hugh content.
Por otro lado, ahora imagina que tienes un globo con agua, si aplastas globo el agua se mueve a los lados y si estiras el globo el agua se mueve arriba y abajo y lo llena. Algo similar funciona con fill container.
Finalmente, ahora imagina que tienes una caja de cristal de 2x2m y decides meter adentro un tubo de metal galvanizado que mide 0.5mx3m ese metro adicional rompe el cristal y se sale de la caja que esta vez, no es flexible. Algo similar funciona Fixed
Hug contents: El contenedor ajusta su tamaño para adaptarse a su contenido. Si el contenido crece, el contenedor crece.
Fill container: Los elementos dentro del Auto Layout se expanden para llenar el contenedor (Puede ser llenar el ancho o el alto)
Fixed: Mantiene un tamaño fijo sin importar el contenido.
Controla cómo se distribuyen los elementos dentro del contenedor. Es similar a trabajar con la dirección y lo activas con uno o dos clics. Basicamente puedes optar por distribuirlos con “gap set to auto” o con solo la alineación.
Puedes cambiar el orden de los elementos arrastrándolos dentro del marco. Solo dale clic, mantenlo sostenido y mueve el elemento para cambiar el orden. Bastante genial en mi opinion esta propiedad.
Define cómo los elementos se comportan cuando el tamaño del contenedor cambia. Las opciones incluyen fijar los elementos a los bordes del contenedor o permitir que se escalen proporcionalmente. Los constrains son como ponerle un chicle a algo. Si le pones el chicle al lado derecho cuando hagas crecer el frame del lado derecho lo que colocaste se va a mover.
Para añadir elementos adicionales dentro de un auto layout en Figma puede seguir estos pasos:
Para crear botones responsivos con auto layout en Figma sigue estos pasos:
Shift + A o usando el menú de auto layout.Para aplicar auto layout a cards en Figma:
Shift + A.Personalmente, pienso que así como la sal le da sabor a la comida, mucha sal la puede arruinar, especialmente si es agregada en la etapa equivocada.
Lo mismo es con el autolayout.
Para mí, usarlo siempre en todo momento del proyecto puede ser peligroso. Imagina que haces una landing entera con autolayout y que el cliente decida que quiere modificar la cantidad de columnas o afirme que está muy saturado y que quiere cambiar el orden de todo o añadir elementos nuevos al header.
Esto puede representar un problema si estás en las etapas iniciales del diseño y la diagramación de la web está casi terminada.
Por eso hay que trabajar esto con moderación.
El usar y modificar un auto layout puede llegar a ser tedioso si estás en una etapa de diseño de muchos ajustes y de conceptualización.
Tiene más sentido usarlo en etapas más finales para presentar cómo será la web en responsivo o usarlo como un elemento de ayuda más a nivel “atómico”. Para evitar tener que aplicar el mismo cambio a 20 páginas diferentes.
El auto layout tiene más sentido cuando sabes que lo que se va a modificar no afecta la condición final del diseño
Solo dale clic al botón de autolayout y mira la magia figmaliana funcionar. Si no, simplemente sigue los siguientes pasos para lograrlo:
Shift + A o selecciona “Add Auto Layout” en el menú de propiedades.Lo más fácil es simplemente crear un estilo en Figma y aplicarle ese estilo a componente que desees que tenga la misma configuración de auto layout.
En mi opinión, el Ctrl + c y Ctrl + v de Figma en cuanto a auto layout se refiere, en esta versión que estoy usando, no es muy “intuitivo” que digamos. Por lo que toma como 20 intentos que quede bien.
Puede que en versiones futuras lo corrijan, no lo sé. Es más fácil solo crear el estilo y aplicarlo a posteriores frames o componentes.
Command + C (Ctrl + C en Windows) para copiar el marco.Command + V (Ctrl + V en Windows) para pegar los ajustes.Hay una opción en el menú de autolayout que te lo permite que se llama “padding” puedes seleccionarla o modificarla para cada uno de los lados de tu componente. Honestamente, en mi opinion solo arrastrar los tamaños es más fácil.
Practicar, practicar y practicar.
No hay mayor hack o truco que literalmente explorar los elementos y funciones por ti mismo.
Sí, al comienzo puede ser un poco confuso todo eso de hugh y fill, pero eventualmente te acostumbras.
La cosa del autolayout es trabajar de lo micro a lo macro y tener una idea general de lo que quieres diseñar y como quieres que se comporte, si no vas a estar perdiendo el tiempo metiendole autolayout hasta a tu perro sin mayor beneficio.
La realidad es que sí, es bastante de ayuda porque les permite entender cómo se va a reducir y comportar los elementos cuando la pantalla tenga un ancho menor. De lo contrario los ves adivinando y generando estos errores que hacen una web lucir menos responsive.
Diseño Web: La combinación de estética y funcionalidad El diseño web no es solo cuestión…
Por qué las Landing Pages Son La Clave Para Multiplicar Tus Conversiones El mejor vendedor…
Branding en Guatemala. Un acercamiento y guía sobre como posicionar una nueva marca en el…
¿Cansad@ de invertir en publicidad y que no funcione? No te preocupes más, descubre en…
El cansancio o fatiga extrema cuando eres diseñador gráfico es una situación de lo peor.…
En el mundo del diseño, tarde o temprano, te encontrarás con la palabra “concepto”. Ya…