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.
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.
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.
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.
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
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.
¿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.
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í:
Una vez tengamos esto, vamos a dirigirnos al panel de propiedades y continuamos desde ahí.
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 |  |
 |
|
| Horizontal |  |
 |
 |
| Adaptable |  |
 |
|
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.
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.
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.
 |
 |
De esta manera podemos ver el desbordamiento.
 |
 |
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.
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.
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.
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 |
|---|---|
 |
 |
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 |
|---|---|
 |
 |
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.
Te dejo las propiedades del frame para que puedas replicar el diseño.
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.
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.
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?
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.
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)