auto layout figma tutorial

Cómo usar el auto layout de Figma (Guía completa paso a paso)

/ Diseño Gráfico, UI/UX / By

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.

Qué es el auto layout de Figma

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:

  • Hacer que los ítems abarquen todo el espacio del frame
  • Usar propiedades como padding para dar aire o espacio de respeto a un diseño.
  • Alinear objetos de manera automática.
  • Distribuir el espacio vacío entre objetos de forma automática.

Para qué sirve el auto layout de Figma

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:

  • Explicar al equipo de desarrollo cómo tiene que funcionar
  • Facilitar la visualización de un MVP
  • Mejorar y prever problemas de diseño responsivo antes de llegar a la etapa de desarrollo.

Cuáles son las propiedades del auto layout de Figma

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:

Dirección (Direction)

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%

En este ejemplo he usado las tres direcciones disponibles: Vertical, horizontal y warp
Alineación (Alignment)

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.

En este ejemplo, he alineado los elementos en el centro y hacia abajo
Espaciado entre elementos (Spacing between items)

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.

En este ejemplo de aca aumente con el clic sostenido el “vertical gap between items” a un 37. Puedes dejarlo en auto y si, colocaste la dirección horizontal solo cambia el nombre a “horizontal gap between items”
Padding

Controla el espacio interior del contenedor alrededor de los elementos. Puedes definir el padding superior, inferior, izquierdo y derecho de manera individual o conjunta.

En este ejemplo añadí un padding de 27 tanto de altura como de ancho al segundo card. Como puedes ver el contenido se ha tenido que mover más adentro de su contenedor. Esto es util para casos en donde necesitamos crear “aire”.
Resizing

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.

Distribución (Distribution)

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.

En este ejemplo coloque un elemento y con doble clic en la distribución le metio una distancia a todos segun el ancho del contenedor, mientras que en el de arriba solo se centraron los elementos. Realmente los iconos que te coloca la interfaz de Figma son intuitivos.
Reordenamiento (Reordering)

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.

Constraints

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.

En este ejemplo de los contrains cree dos casos. El primero con un constrain arriba y derecha y el otro abajo y derecha. Al extender el ancho o la altura del frame al cuadrado al que le aplique el frame se movio hacia la derecha y el otro hacia abajo. Esto refleja que si la pantalla se fuera a ampliar este elemento se movería segun su lugar respectivo.

Cómo añadir elementos adicionales dentro de un auto layout

Para añadir elementos adicionales dentro de un auto layout en Figma puede seguir estos pasos:

  1. Selecciona el marco de auto layout al que deseas añadir elementos.
  2. Arrastra y suelta los nuevos elementos dentro del marco de auto layout. Figma ajustará automáticamente el espaciado y la disposición según las propiedades del auto layout.
  3. Usa las opciones de anidación si deseas que los nuevos elementos se comporten de manera diferente a los existentes.

Cómo crear botones responsivos con auto layout en Figma

Para crear botones responsivos con auto layout en Figma sigue estos pasos:

  1. Crea un texto para tener contenido en el botón.
  2. Aplica auto layout al texto seleccionándolo y presionando Shift + A o usando el menú de auto layout.
  3. Ajusta el padding alrededor del texto para definir el tamaño del botón.
  4. Configura el redimensionamiento horizontal a “Hug Contents” para que el botón se ajuste automáticamente al texto.
  5. Añade estilos como bordes, rellenos y sombras para mejorar la apariencia del botón.

Cómo aplicar auto layout a cards en Figma

Para aplicar auto layout a cards en Figma:

  1. Selecciona los elementos del card (título, imagen, descripción, etc.).
  2. Agrupa los elementos en un solo marco.
  3. Aplica Auto Layout al marco seleccionado presionando Shift + A.
  4. Configura el espaciado y padding entre los elementos y el borde del card.
  5. Ajusta las propiedades de redimensionamiento según sea necesario para asegurarte de que el card sea responsivo y flexible.

¿Debería usar siempre el auto layout de Figma?

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.

Consejos para usar el auto layout de Figma

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

Cuándo SÍ usar el auto layout de Figma

  • Diseños responsivos: Para demostrarle al cliente o al equipo de desarrollo como las interfaces deben adaptarse a diferentes tamaños de pantalla.
  • Componentes reutilizables: Para crear componentes que puedan actualizarse fácilmente sin romper la estructura entera del sitio (como los cards)
  • Automatización del diseño y sistemas atómicos: Para trabajar de lo micro a lo macro y mantener consistencia a la hora de reducir el tiempo de ajuste manual.

¿Cómo se puede hacer que el auto layout de Figma se active?

Solo dale clic al botón de autolayout y mira la magia figmaliana funcionar. Si no, simplemente sigue los siguientes pasos para lograrlo:

Activar Auto Layout en Figma

  1. Selecciona uno o más elementos a los que deseas aplicar Auto Layout.
  2. Presiona Shift + A o selecciona “Add Auto Layout” en el menú de propiedades.
  3. Configura las propiedades del Auto Layout, como la dirección (horizontal o vertical), el espaciado y el padding según tus necesidades.

Cómo se copian los ajustes de auto layout de Figma

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.

Para copiar los ajustes de Auto Layout en Figma:

  1. Selecciona el marco de Auto Layout del que deseas copiar los ajustes.
  2. Presiona Command + C (Ctrl + C en Windows) para copiar el marco.
  3. Selecciona el marco de destino al que deseas aplicar los ajustes.
  4. Presiona Command + V (Ctrl + V en Windows) para pegar los ajustes.
  5. Alternativamente, puedes usar las opciones de estilos de Auto Layout en el panel de propiedades para copiar y aplicar ajustes específicos.

Cómo se añade padding con el auto layout de Figma

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.

Cómo dominar el auto layout de Figma

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.

Es de ayuda a los desarrolladores y diseñadores

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.

REFERENCIAS

Related Posts

0
    0
    Tu carrito
    Tu carrito esta vacíoVolver a la tienda
    Seguir comprando