DEV Community

Cover image for Figma, Auto Layout
Altaskur
Altaskur

Posted on

Figma, Auto Layout

Figma Auto Layout

Continuamos con la serie de Figma; este tutorial es la continuación de Figma, conociendo la interfaz. Te recomiendo encarecidamente que, si no lo has visto, lo veas primero.

Introducción

Una de las características principales de Figma es la capacidad de crear diseños escalables y hacer que los elementos se coloquen automáticamente en el contenedor.

Esta característica se llama Auto Layout y es tremendamente útil. Olvídate de tener que colocar los elementos manualmente; de esta manera, estarán perfectamente alineados y distribuidos.

Vamos a ver cómo funciona.

Crear un Auto Layout

Para indicarle a un frame que los elementos que contiene deben colocarse automáticamente, debemos seleccionar el frame y hacer clic en el botón de Auto Layout. En este ejemplo, vamos a crear una barra de navegación superior con tres elementos: un logo, un texto y un menú.

Crear un frame

Vamos a crear un frame. Podemos hacerlo haciendo clic en el icono de Frame en la barra de herramientas o pulsando la tecla F.

Barra de herramientas superior

Siempre que creemos un frame, vamos a renombrarlo para que sea más fácil identificarlo. Es importante tener una buena convención de nombres desde el principio. En este caso, Barra de navegación. Créeme, esto es muy importante; si no cuidas bien el naming, se te va a ir el proyecto de las manos rápidamente.

Frame renombrado

Fíjate en que en la imagen de la barra izquierda de Figma, aparece el icono de una almohadilla # y el nombre del frame. Quédate con este detalle; según el tipo de elemento o las propiedades que tenga, este icono cambiará. De este modo, de un simple vistazo, podemos hacernos una idea de la disposición de los elementos.

Modificando el frame

Una vez que tenemos nuestro frame, vamos a darle un pequeño borde para poder verlo mejor, ya que ahora mismo es invisible.

Frame sin borde con el tamaño predeterminado

Esta vez nos dirigimos a la barra de propiedades o CSS, y nos dirigimos al + de la sección de Stroke para añadir un borde predeterminado.

Frame con un stroke predeterminado

Ahora veremos que tiene un borde de 1px de color negro puro.

Nos vamos al panel de opciones y al igual que hicimos con el borde, nos dirigimos a la barra de propiedades y hacemos clic en el + de Auto Layout.

Propiedades de auto layout

Propiedades de Auto Layout

Antes de irnos a las propiedades del Auto Layout, tenemos que fijarnos en algo que acaba de cambiar y que normalmente solemos pasar por alto. En el panel de propiedades del Frame, justo donde se indica el ancho W y el alto H (Weight y Height en inglés), veremos la palabra "Hug" abrazo en inglés.

Auto layout coloca el tamaño del frame adaptable de forma predeterminada.

Panel de tamaño del frame

¿Por qué abrazo? Porque nuestro frame se va a adaptar al tamaño de los elementos que contiene, "abrazándolos", comportándose como una envoltura. Vamos a cambiar esto y a decirle que queremos un ancho fijo.

Propiedades de ancho en un elemento auto layout

Un frame con Auto layout con ancho fijo

Ahora que ya tenemos nuestro Frame con Auto Layout y con un ancho fijo, vamos a añadir los elementos que va a contener. Creamos tres Frames de 20 x 20, con un Fill de color negro y los llamamos Logo, Texto y Menú.

Te tiene que quedar algo así:

Image description

Elementos en vertical

Una vez tengamos esto, vamos a dirigirnos al panel de propiedades y continuamos desde ahí.

Propiedades de auto layout

Flechas de dirección

En el panel de Auto Layout, verás tres flechas de dirección: hacia abajo, hacia la izquierda y otra que parece volver al punto de inicio. Con esto te puedes ir haciendo una idea de su funcionalidad. Estas flechas le dicen al Frame de qué manera se van a colocar los elementos que va a contener.
Si vienes de un perfil de desarrollo, esta opción en CSS es igual que la propiedad flex-direction.

Orientación Flecha Panel Resultado
Vertical Flecha vertical Image description Elementos en vertical
Horizontal Flecha horizontal Panel horizontal elementos horizontal
Adaptable Flecha adaptativa Panel adaptativo elementos horizontal

Como puedes ver en la tabla anterior, las flechas de dirección nos indican cómo se va a colocar y en el panel de Auto Layout podemos ver que el icono de color azul cambia según la orientación que le hayamos dado.

¿Recuerdas que te dije que te fijaras en el icono de la barra izquierda? Pues es el mismo icono que aparece en el panel de propiedades. De esta manera, podemos saber de un simple vistazo la disposición de los elementos.

Pero esto no es todo. En el panel de Auto layout, podemos ver que existen más opciones: Horizontal Gap, Horizontal padding y Vertical padding. Estas opciones nos permiten ajustar la separación entre los elementos (Gap) y el espacio que hay sobre y debajo de los elementos (Padding).

Si vienes del desarrollo, esto te sonará bastante, ¿verdad? Es exactamente el mismo comportamiento que la propiedad Flexbox de CSS.

En cambio, si vienes del diseño, cómo ves, ya te estás familiarizando con los conceptos de desarrollo sin darte cuenta, además de hacer la vida más fácil para el desarrollo. Ahora vamos a identificar estos elementos y a ver cómo se comportan.

Espaciado entre elementos (Gap)

Cómo hemos visto antes, el "Gap" es el espacio horizontal que hay entre los elementos. Para modificarlo, tenemos que hacer clic en el número que aparece al lado del icono de Gap y escribir el valor que queremos. En este caso, vamos a poner 20.

Panel de Auto Layout, con el foco puesto en Gap

Fíjate bien mientras escribes el valor o lo estás modificando; resulta que en el elemento en sí va a aparecer unas líneas de color rosa que te indican el espacio que va a haber entre los elementos. Este detalle suele pasar desapercibido, pero es realmente útil y está presente en muchos de los elementos de Figma.

Mientras modificas las propiedades de un elemento, Figma te muestra una vista previa de los cambios, en rosa.

Previsualización de gap

Con esta modificación, acabamos de provocar un desbordamiento en nuestro diseño, ya que el Frame no tiene el tamaño suficiente para contener los elementos, provocando que la parte que va sobrando se oculte.
En desarrollo, esto se conoce como overflow; en Figma, por defecto, lo tenemos en hidden, oculto.
Para cambiar esta propiedad, por ejemplo para hacer un scroll, tenemos que ir a la propiedad de Clip content y desactivarla.

Image description Image description

De esta manera podemos ver el desbordamiento.

Image description Image description

Clip content oculta el contenido que se desborda del frame. Es igual que la propiedad overflow de CSS.

Padding o borde interno

El padding es el espacio que hay entre el borde del frame y los elementos que contiene.
Lo podemos identificar en el panel de Auto Layout, justo debajo de gap con los iconos de un cuadrado entre líneas. Según la orientación de las líneas, nos indica si el padding es horizontal o vertical.

Image description

Además, tenemos un tercer icono; este nos permite modificar el padding de cada uno de los lados del frame de manera independiente. Si hacemos clic en el icono, veremos que aparecen cuatro campos de texto, uno para cada lado del frame.

Image description

Cómo puedes ver, el icono del cuadrado se mantiene, representando al frame, solo que ahora hay una sola línea representando el padding de cada lado.

El padding es el espacio que hay entre el borde del frame y los elementos que contiene.

Intenta jugar con el padding y el gap para entender cómo se comportan y afectan a los elementos.

Image description

Quiero recordarte que si mantienes el ratón en la propiedad que estás modificando, Figma te muestra una previsualización de los cambios que estás realizando.

Recuerda que Figma te muestra una previsualización de los cambios que estás realizando.

Panel de alineación

¿Qué ocurre si queremos centrar los elementos en el frame o queremos separarlos de manera uniforme? Pues para eso tenemos el panel de alineación, que nos permite alinear los elementos de manera uniforme, centrarlos o separarlos de manera uniforme.
Si vienes del desarrollo, esto te sonará a la propiedad justify-content y align-items de CSS.

Ahora veremos cómo se comporta el panel de alineación. Vamos a centrar los elementos en el frame y, por último, separarlos de manera uniforme. Así podremos crear nuestro menú de navegación.

Centrar elementos

El panel de alineación es muy intuitivo; dentro de él, verás que tienes distintos puntos. Cada punto representa el alineamiento de los elementos. Si queremos centrar los elementos en el frame, tenemos que hacer clic en el punto central.

Panel Resultado
Image description Image description

Te recomiendo que juegues con las distintas opciones para que veas cómo se comportan los elementos.

Ahora bien, necesitamos que nuestra barra de navegación se adapte a los elementos de su tamaño; de esta manera, tendremos un frame responsive teniendo un frame a la izquierda, otro a la derecha y el logotipo en el centro.

Para ello, seleccionamos el punto central y hacemos doble clic. De esta manera, los elementos se adaptarán al tamaño del frame. En desarrollo, esto es igual a la propiedad space-between de CSS.

Panel Resultado
Image description Image description

Aquí puedes ver que han pasado varias cosas. Aparte de alinearse los elementos adaptándose al contenedor, el gap ha cambiado a Auto, indicando esto mismo.

Barra de navegación

Ahora solo tenemos que adaptar el frame al tamaño de nuestro diseño. Recuerda que usamos el preset del iPhone 13 & 14.

Image description

Te dejo las propiedades del frame para que puedas replicar el diseño.

Image description

Ahora bien, según lo que acabamos de ver, ¿no te parece raro tener que alinear nuestra barra de navegación al frame principal? Si a nuestro frame principal le establecemos cómo auto layout, podemos hacer que nuestra barra de navegación se acomode al frame principal, haciendo ahora nuestro diseño responsive.

Image description

Image description

Solo nos quedaría decirle a nuestro frame Barra de navegación que se adapte al tamaño del frame principal. ¿Cómo hacemos esto?

Ajustar tamaño del frame a un contenedor Auto Layout

Si seleccionamos nuestra barra de navegación y hacemos clic en el ancho w (width en inglés), veremos que aparece una nueva opción, Fill container. Si hacemos clic en esta opción, nuestro frame se adaptará al tamaño del frame principal, siempre y cuando este tenga Auto Layout.

Image description

Image description

Al activar esta opción, la propiedad de ancho quedará "desactivada", y el frame se adaptará al tamaño del frame principal. ¿Probamos a cambiar el tamaño del frame principal a ver qué pasa?

Image description

Cómo puedes ver, el frame se adapta al tamaño del frame principal. De esta manera, podemos hacer que nuestro diseño sea totalmente responsive.

Image description

Conclusión

Con esto, ya tendríamos nuestro diseño responsive, con una barra de navegación que se adapta al tamaño de nuestro diseño.

¿Qué te ha parecido? ¿Te ha resultado útil? ¿Quieres que hable de algo en concreto? ¡Déjamelo en los comentarios!

Top comments (0)