En este tutorial de Auto Layout de Figma vamos a conocer las características de la herramienta y todas sus novedades. Esta información te puede ayudar si trabajas con diseño web, en el desarrollo de aplicaciones móviles o si eres product designer.
Como otros de mis contenidos, esta clase sobre Auto Layout seguirá abierta y recibirá las actualizaciones necesarias para que puedas utilizar todas sus funcionalidades en tus proyectos digitales.
Si este post te parece interesante déjamelo saber en un comentario, porque si es así publicaré más artículos con el mismo formato para que puedas aprender a usar todas las herramientas de Figma, gracias de antemano.
Estoy añadiendo tutoriales en vídeo sobre la herramienta, los puedes ver al final del post. Sólo son los primeros, seguiré creando más clases de Figma, si quieres recibir un aviso cuando estén disponibles suscríbete a mi lista de correo, muchas gracias.
A continuación te dejo el índice de los temas que vamos a tratar.
¿Qué es un Auto Layout?
En más de una reunión escuché decir que un Auto Layout de Figma es magia. Creo que es un buen resumen, pero hablemos de manera más técnica.
Un Auto Layout es un Frame con una característica especial, es un marco dinámico que se adapta o ajusta según los contenidos que tenga en su interior o a su alrededor. Los podemos usar para crear botones, menús, cajas, celdas, listas o tarjetas con cualquier tipo de información. Todos estos contenedores “estarán vivos” porque podrán cambiar de tamaño cuando tengamos que añadir, quitar u ordenar los elementos que haya en su interior o que estén a su lado.
El Auto Layout es una herramienta fundamental. Si analizas proyectos simples, complejos y flexibles creados con Figma te darás cuenta que se utiliza muchas veces.
Te voy a contar un secreto personal, cuando aprendí a usar el Auto Layout de Figma, durante muchas noches soñé con la combinación de teclas “Shift + A”, ahora te lo explico…
¿Cómo crear un Auto Layout?
Para crear un Auto Layout primero debes seleccionar un Frame o uno o varios elementos. Lo puedes hacer en la pestaña Layers del sidebar izquierdo o directamente en el Canvas, el espacio de trabajo donde diseñamos en Figma.
El vídeo estará disponible en breve.
Mientras tanto puedes buscarlo en mi canal de YouTube.
Gracias por tu paciencia.
Para aplicar la propiedad de Auto Layout tienes cuatro opciones:
- Utilizar la combinación de teclas “Shift + A” o “Mayúsculas + A” si prefieres decirlo en español.
- Abrir el menú contextual con el ratón, el trackpad o la tableta gráfica y seleccionar la opción “Add auto layout”.
- Pinchar en el Menú o icono de hamburguesa ubicado en la parte superior izquierda de la aplicación y seleccionar la opción “Add auto layout” dentro del ítem Object.
- Pinchar en el título o botón del módulo “Auto Layout” en la pestaña Design ubicada en el sidebar derecho.
La opción nº 4 sólo está disponible para crear un Auto Layout si hay al menos un Frame dentro de la selección de objetos..
Un consejo, si quieres ganar velocidad utiliza la opción nº 1. Soy muy fan de los atajos de teclado, te aseguro que utilizándolos podrás ganar tiempo y ser mucho más productivo.
Figma le asignará un nombre al nuevo Auto Layout: “Frame 1”, Frame 2”… el nº dependerá de la cantidad de Frames con nombre genérico que tengas en el Canvas de la Página en la que te encuentres trabajando.
Antes de seguir quiero comentar algo que me parece importante destacar:
- Cuando quieras crear un Auto Layout a partir de un Frame dicho Frame recibirá las propiedades de Auto Layout.
- En cambio cuando lo quieras crear con uno o varios objetos en su interior la aplicación creará un Frame con propiedades de Auto Layout.
Automagical
Cuando aplicas el “Add auto layout” aparece la magia… lo digo bien, en ese momento Figma ejecuta el “Automagical”.
Lo que hace es alinear los elementos en dirección horizontal o vertical dependiendo de la posición que tengan en el Canvas. Y les aplica por defecto alineación superior izquierda, espaciado entre ellos y un padding de 0 píxeles a su alrededor.
Padding del Auto Layout
También puedes cambiar los valores anteriores desde el módulo “Auto Layout” ubicado en el sidebar derecho. Casi siempre tendrás que hacerlo para conseguir el aspecto que necesita esa parte de tu diseño.
Dirección
Ajusta la dirección vertical con el icono Vertical Direction si quieres que los elementos floten uno debajo del otro, por ejemplo si quieres hacer una lista. O la dirección horizontal con el icono Horizontal Direction para que floten uno al lado del otro si lo que deseas es crear columnas o un top bar menu.
Espacio entre elementos
Introduce un valor en el campo Spacing Between Items para cambiar el espacio entre todos los elementos del Auto Layout.
Relleno
Cambia el relleno alrededor de los elementos introduciendo un valor en el campo Padding Around Items, veamos unos ejemplos, introduce:
- “30” si quieres poner un padding de ese valor en píxeles a todos los lados del Auto Layout.
- “20, 30” si quieres dar un valor top y bottom de 20 píxeles y left y right de 30 píxeles.
- “0, 30, 20, 10” si quieres dar un valor distinto a todos los lados.
Como puedes ver la filosofía o forma de aplicar los valores de relleno es igual a la que utilizamos cuando ajustamos el padding de una clase en un archivo CSS. Pero si no controlas la codificación de una hoja de estilos en cascada no te preocupes, también podrás cambiar los paddings de manera más visual.
Si pinchas en el icono Alignment and Padding se abrirá un panel en el que puedes hacer -entre otras cosas- lo que te dije en el párrafo anterior. Introducir el valor en píxeles a los cuatro paddings: Izquierdo (Left Padding), Superior (Top Padding), Derecho (Right Padding) e Inferior (Bottom Padding).
Distribución
Si quieres cambiar la distribución o comportamiento de los elementos puedes usar aplicar las siguientes configuraciones:
- Packed para que floten todos juntos (o pegados unos a otros) dentro del Auto Layout.
- Space Between para que Figma los separe y ajuste a los límites del contenedor añadiendo espacio entre ellos.
Alineación
Para modificar la alineación de los elementos dentro del Auto Layout, puedes utilizar la cuadrícula o configurador visual, el control es “casi” total.
Packed
Para la distribución Packed tienes nueve opciones: Arriba a la izquierda, Arriba en el centro, Arriba a la derecha, En medio a la izquierda, En medio en el centro, En medio a la derecha, Abajo a la izquierda, Abajo en el centro y Abajo a la derecha.
Space Between
Y para el Space Between sólo tres: Izquierda, Centro y Derecha cuando la dirección de la distribución es horizontal y Arriba, Medio y Abajo cuando la distribución es vertical.
Resizing de un Auto Layout
El redimensionado es otra de las características “mágicas” del Auto Layout. Con el Resizing podrás controlar el comportamiento de un elemento cuando su padre (el continente o contenedor) o sus hijos (el contenido) cambien de tamaño.
Hablemos de los comportamientos que puedes aplicar en un Auto Layout:
Hug contents
Cuando necesites que un contenedor (padre o continente) envuelva o abrace a todos los elementos que hay en su interior tendrás que usar el comportamiento Hug contents.
Fixed
Fixed lo usarás cuando quieras que un objeto quede fijo y no cambie de tamaño.
Fill container
Un elemento que tenga la propiedad Fill container intentará rellenar los espacios de su continente. Si traducimos su nombre queda bien claro: Rellenar el recipiente. Lo hará a lo ancho y/o a lo alto. Podrás aplicar Fill container únicamente a los elementos que estén dentro de un contenedor.
Para aplicar estos comportamientos a un Auto Layout primero debes seleccionarlo. Lo puedes hacer en la pestaña Layers del sidebar izquierdo de Figma o directamente en el Canvas. Luego puedes aplicar la o las propiedades desde el módulo Resizing ubicado en la pestaña Design del sidebar derecho. Tienes dos opciones: 1) utilizar dos menús dropdown para definir las propiedades horizontal y vertical y 2) usar un configurador visual.
Habrás notado que hace un momento dije “aplicar la o las propiedades”… efectivamente, un Auto Layout se comporta de manera horizontal y vertical. Todo dependerá del tipo de diseño que estés creando. Por ejemplo, si estás haciendo una columna izquierda en tu interfaz quizás se comporte de manera Fixed en horizontal y Fill container en vertical.
Para entender los tres comportamientos te dejo una captura de pantalla aquí debajo.
Ahora te invito a dar un paso más, déjame contarte cómo puedes crear diseños más complejos con Figma…
Nested Auto Layout
Cuando quieras usar Auto Layout en un proyecto real, que casi siempre es más complejo que los ejemplos que vimos hasta el momento, te darás cuenta que necesitarás anidar varios Frames con Auto Layout, es decir, estarás practicando Nested Auto Layout, o dicho en nuestro idioma, anidando frames con Auto Layout.
Cuando uses y domines los Auto Layout anidados sentirás que tu grado en “magia” ha subido de nivel. Con ello podrás entender cómo funcionará tu diseño y podrás transmitirlo de igual manera a tus compañeros de equipo, al product designer, los testers, los developers, etc.
Veamos un ejemplo de Nested Auto Layout.
Responsive content
Tus diseños además de contenedores tendrán contenido, estoy hablando de textos, imágenes, etc. Y para que funcionen correctamente también tendrás que definir su comportamiento.
Controlarás los marcos y las imágenes con los comportamientos del módulo Resizing. Y para ajustar los textos tendrás que combinar los comportamientos de Resizing y utilizar otros presentes en el módulo Text ubicado en la pestaña Design del sidebar derecho. Veamos las tres configuraciones que puedes aplicar:
Auto Width
Con Auto Width el ancho de la capa de texto se ajustará a los límites de su contenido y Figma creará nuevas líneas de texto cuando pulses la tecla Enter.
Auto Height
Con Auto Height la altura de tu capa de texto aumentará para adaptarse a su contenido, para ello Figma creará nuevas líneas de texto, es decir, retornos de carro (pulsaciones de la tecla Enter).
Fixed Size
Con Fixed Size el ancho y el alto de tu capa de texto no cambiará. Ya verás que aunque tus diseños se adapten a tus contenidos y a distintos tipos de pantalla algunas veces necesitarás que ciertos elementos queden fijados y no cambien de tamaño.
Para que hagas pruebas y termines de entender el Responsive content te dejo un enlace al playground que he creado para complementar este tutorial de Auto Layout de Figma.
Inspect
Cuando tengas que pasar tu diseño a código o cuando lo haga tu equipo de Frontend o Backend podrás o podrán usar la pestaña Inspect ubicada en el sidebar derecho de Figma.
Seleccionando los marcos y elementos de tu diseño con el inspector de código podrás ver sus tamaños, colores, comportamientos y demás características. Eso te permitirá llevar a código tu diseño y que funcione de la misma manera que en el Canvas de Figma.
Actualizaciones
En este apartado iré añadiendo información básica sobre los upgrades que recibe la herramienta a lo largo del tiempo.
- 19 de noviembre de 2020: Padding individual, Distribución y Alineación de elementos y mejoras en el Inspector de código.
Tutoriales
Aquí te dejo los clases en vídeo que he preparado para que puedas aprender a usar todas las características y funciones del Auto Layout.
Atajos de teclado para crear un Auto Layout
Combinación de teclas para crearlo en menos de un segundo.
Crear un Auto Layout desde el menú contextual
Créalo pulsando el botón secundario de tu ratón.
Crear un Auto Layout desde el menú o icono hamburguesa
Cómo crearlo desde el menú de la aplicación o icono de hamburguesa.
Crear un Auto Layout desde tu módulo
Cómo crear un Auto Layout desde la pestaña Design de Figma.
Ejemplos reales y diseños a medida
Para conocer en profundidad la herramienta Auto Layout y entender todas sus características iré creando archivos en mi perfil de Figma Community y nuevos artículos y tutoriales aquí mismo en el blog.
Por favor, si tienes alguna pregunta o deseas compartir tu experiencia deja un comentario, muchas gracias.
Aprende a usar Figma, Sketch y Webflow
Suscríbete gratis para recibir notificaciones cuando publique nuevos contenidos.
Información de privacidad
En este sitio web te solicito algunos datos para enviarte correos electrónicos con las publicaciones que hago. Finalidad de los datos: Enviar correos electrónicos con las novedades publicadas en el blog. Legitimación: Aceptación expresa de la política de privacidad. Almacenamiento de los datos: Base de datos alojada en Siteground España. Duración: Hasta que lo solicites. Derechos: En cualquier momento puedes limitar, recuperar y borrar tu información.
Deja una respuesta