() translation by (you can also view the original English article)
Los siguientes pasos te enseñarán sobre la función Auto Layout en Figma, miraremos detenidamente sus nuevas características mientras diseñamos la interfaz de usuario (UI) de un carrito de compras.
Lo que aprenderás en este tutorial:
- ¿Qué es Auto Layout?
- Cómo crear un icono de notificación utilizando la función Auto Layout de Figma
- Cómo crear botones con la función Auto Layout de Figma
- Cómo anidar Auto Layouts en Figma
- Cómo crear un Auto Layout horizontal en Figma
- Cómo crear un Auto Layout vertical en Figma
Si necesitas más inspiración sobre cómo ajustar o mejorar el diseño final de tu carrito de eCommerce, en Envato Elements encontrarás muchos recursos. ¡Elements cuenta con miles de kits de UI y UX, compatibles con tus herramientas de diseño favoritas (incluyendo Figma) por un solo precio de suscripción!
1. ¿Qué es Auto Layout de Figma?
Auto Layout es una función de Figma que te permite aplicar estructuras dinámicas que se ajustan a sus contenidos. Puedes usar esta función para crear botones que cambien de tamaño de acuerdo con su texto, crear listas o columnas de elementos que se puedan reorganizar fácilmente, o incluso puedes anidar estructuras de auto layout dentro de otras estructuras de auto layout.
Gracias a las características recientemente añadidas, Auto Layout es una herramienta de Figma aún más poderosa. Revisa esta breve explicación en video para saber de qué se trata la función Auto Layout:
En este tutorial práctico, utilizaremos el siguiente diseño de un carrito de eCommerce para practicar con estas nuevas características.
2. Cómo crear un icono de notificación utilizando Auto Layout de Figma
Paso 1
Empecemos con un ejemplo muy básico. Selecciona la herramienta Text (T) de tu barra de herramientas y escribe «5».
Utiliza la fuente Montserrat para este fragmento de texto, establece el estilo en Bold y el tamaño en 12, marca el botón Text Align Center (Control-Alt-T) y cambia el color a blanco (#FFFFFF).
Paso 2
Con este texto seleccionado, simplemente presiona el atajo del teclado Shift-A (Mayús-A) para añadir Auto Layout.
Vamos a concentrarnos en la sección Auto Layout de la barra lateral derecha y ajustamos Padding Around Items (Relleno alrededor de los elementos) en 8.
Paso 3
Asegúrate de que tu auto layout permanezca seleccionado y sigue concentrándote en la barra lateral derecha.
Primero, haz clic en la sección que dice Fill para añadir un color de relleno y ajústalo en #FF4200, y luego haz clic en Stroke para agregar un trazo. Establece su color en blanco, aumenta el peso a 2 y ajusta la alineación en Outside (Exterior).
Ve a la parte superior de la barra lateral derecha y ajusta Corner Radius (Radio de esquinas) en 10.
Paso 4
Este es tu Auto Layout básico y cada vez que cambies el texto, la estructura cambiará de tamaño de manera dinámica para adaptarse al nuevo contenido.
3. Cómo crear los botones usando Auto Layou en Figma
Paso 1
Selecciona la herramienta Text (T) de la barra de herramientas y escribe «Checkout with».
Utiliza la fuente Montserrat, establece el estilo en Bold y el tamaño en 16, cambia el color a #283D81 y no olvides alinear el texto al centro.
Paso 2
Añade Auto Layout (Shift-A) a tu nuevo texto y céntrate en la barra lateral derecha.
Ajusta Spacing Between Items (Separación entre elementos) en 10 y luego haz clic en el botón que dice Alignment and Padding (Alineación y relleno).
Ajusta el relleno izquierdo y derecho (Left, Right Padding) en 110 y el relleno superior e inferior (Top, Bottom Padding) en 18. Asegúrate de mantener la distribución (Distribution) ajustada en Packed y luego utiliza la cuadrícula interactiva (las tres columnas azules) para establecer la alineación en Center.
Paso 3
Añade un relleno (Fill) a tu nuevo auto layout y pon su color en blanco, y luego incrementa Corner Radius a 10.
Paso 4
Descarga un logotipo de PayPal dentro de tu documento. Puedes usar otro si no puedes conseguir este.
Selecciona tu logotipo y simplemente arrástralo sobre tu botón blanco para añadirlo dentro de Auto Layout.
Paso 5
Ahora, como puedes ver, gracias al valor establecido en Spacing Between Items, la separación entre el texto y el logotipo de tu Auto Layout es 10.
Paso 6
Selecciona nuevamente la herramienta Text (T) de tu barra de herramientas, y esta vez escribe «Checkout».
Utiliza la fuente Montserrat, ajusta el estilo en Bold y el tamaño en 16, cambia el color a blanco y no olvides alinear el texto al centro.
Paso 7
Añade Auto Layout (Shift-A) a tu nuevo texto y, esta vez, vamos a ajustar el tamaño de la estructura de Auto Layout de forma manual.
Mantén presionada la tecla Alt y arrastra el borde izquierdo/derecho del marco para incrementar su ancho (Width) a 345, y luego arrastra el borde superior/inferior del marco para aumentar Height (Alto) a 58.
Una vez que hayas finalizado, ve a la barra lateral derecha y establece la alineación en Center para mover tu texto al centro del marco de auto layout.
Paso 8
Añade un relleno (Fill) a este auto layout y ajusta su color a #00DE81, luego aumenta Corner Radius a 10.
4. Cómo anidar Auto Layouts en un Auto Layout horizontal
Paso 1
Selecciona la herramienta Text (T) de la barra de herramientas y escribe «VOUCHER CODE».
Utiliza la fuente Montserrat, establece el estilo en SemiBold y el tamaño en 12, cambia el color a blanco y no olvides alinear el texto al centro.
Añade Auto Layout (Shift-A) para este nuevo texto y céntrate en la barra lateral derecha. Ajusta Padding left y right en 10 y Padding top y botton en 8. Mantén Distribution ajustada en Packed y establece la alineación en Center.
Añade un trazo (Stroke) a este nuevo auto layout, pon su color en blanco, incrementa el peso a 2 y establece la alineación en interior (Inside).
Paso 2
Selecciona el texto dentro de tu auto layout más reciente para bajar su opacidad (Opacity) al 50%, y luego mueve tu Auto Layout a la izquierda y alinéalo con los otros botones.
Paso 3
Vamos a añadir una copia de este último auto layout y vamos a colocarla como se muestra en la primera imagen.
Selecciona este nuevo auto layout y céntrate en la barra lateral derecha. Quita el trazo (Stroke), añade un relleno (Fill) y cambia su color a #FF4200.
Selecciona el texto de este nuevo auto layout y regresa a la barra lateral derecha. Incrementa de vuelta la opacidad (Opacity) al 100%, cambia el estilo de fuente a Bold y aumenta el tamaño de la fuente a 14.
Paso 4
Selecciona estos dos Auto Layouts y presiona Shift-A (Mayús-A) para anidarlos dentro de otro Auto Layout. Figma ajusta automáticamente la dirección en Horizontal.
Al tener estos dos botones dentro de un auto layout, puedes cambiar fácilmente su orden. Puedes hacer clic y arrastrar elementos o puedes presionar las teclas de flecha izquierda/derecha para mover un elemento seleccionado en esa dirección.
5. Cómo anidar formas, grupos y Auto Layouts
Paso 1
Ahora, vamos a crear un Auto Layout más complejo. Selecciona la Herramienta Rectangle Tool (R), mantén presionada la tecla Shift (Mayús) y crea un cuadrado de 70 px.
Cambia el color del relleno (Fill) de esta forma a #210F33 y ajusta Corner Radius a 5.
Paso 2
Selecciona la herramienta Text (T) de la barra de herramientas y escribe «Item».
Utiliza la fuente Montserrat, establece el estilo en SemiBold y el tamaño en 14, cambia el color a #210F33 y no olvides marcar el botón Auto Height. Al seleccionar este botón, te aseguras de que el ancho (Width) del contenedor de texto no cambie. Cuando añadas más texto, solo la altura del contenedor de texto se ajustará automáticamente para adaptarse al nuevo contenido. Regresa a este contenedor de texto, coloca el cursor sobre el borde derecho e incrementa el ancho a 104.
Duplica este texto y selecciona la copia. Reemplaza el texto existente con «Code #123456», cambia el color a #9C9C9F, baja el tamaño de la fuente a 8 y establece su estilo en Bold.
Paso 3
Selecciona la herramienta Text (T) de la barra de herramientas y escribe «Item».
Utiliza la fuente Montserrat, establece el estilo en Bold y el tamaño en 14, cambia el color a #FF4200 y no olvides alinear el texto al centro.
Añade Auto Layout (Shift-A) a este nuevo texto y céntrate en la barra lateral derecha. Ajusta Left Padding, Right Padding en 10 y Top Padding, Bottom Padding en 5. Mantén Distribution en Packed y ajusta la alineación en Center.
Añade un relleno (Fill) a este auto layout y pon su color en blanco, y luego agrega un trazo (Stroke). Establece su color en #FF4200, aumenta el peso a 2 y ajusta la alineación en Inside. Asimismo, ajusta Corner Radius en 15.
Paso 4
Selecciona los dos fragmentos de texto junto con el auto layout, tal como se muestra en la siguiente imagen, y anídalos dentro de un nuevo Auto Layout (Shift-A).
Figma establecerá, de manera automática, la orientación de este nuevo Auto Layout en Vertical. Ajusta Spacing Between Items en 6.5 y Padding Around Items en 0, y mantén la alineación (Alignment) ajustada en Top Left (Parte superior izquierda).
Paso 5
Elige la herramienta Ellipse (O) de tu barra de herramientas y crea un círculo de 26 px.
Elimina el color del relleno (Fill) de esta nueva forma y añade un trazo (Stroke). Establece su color en #210F33, aumenta el peso a 2 y cambia la alineación a Inside.
Mantén presionada la tecla Alt y la tecla Shift (Mayús) y arrastra una copia de este círculo hacia la derecha, como se muestra en la segunda imagen.
Paso 6
Enfócate en tus dos círculos y elige la herramienta Rectangle (R). Crea una forma de 12 x 2 px y colócala como se muestra en la primera imagen. Ajusta el color del relleno (Fill) en #210F33 y Corner Radius en 1.
Duplica esta forma (Control-C > Control-V) y colócala como se muestra en la segunda imagen. Añade una copia de esta segunda forma en la misma ubicación y luego gírala 90 grados.
Paso 7
Selecciona la herramienta Text (T) de tu barra de herramientas y escribe «1».
Utiliza la fuente Roboto, establece el estilo en Bold y el tamaño en 14, cambia el color a #210F33 y no olvides alinear el texto al centro.
Selecciona este nuevo fragmento de texto junto con los botones más y menos y presiona Control-G para agruparlos.
Paso 8
Selecciona tu cuadrado con bordes redondeados junto con el grupo y el auto layout, tal como se muestra en la siguiente imagen, y anídalos dentro de un nuevo Auto Layout (Shift-A).
Añade un relleno (Fill) a este auto layout y establece su color en #FAFAFA.
Paso 9
Sigue enfocándote en este auto layout, incrementa el ancho del marco a 345 y céntrate en la barra lateral derecha.
Ajusta Padding Around Items en 20 y luego haz clic en el botón Alignment and Padding. Ajusta Distribution a Space Between y luego utiliza la cuadrícula interactiva para establecer la alineación en Center.
Paso 10
Con este auto layout aún seleccionado, céntrate en la barra de herramientas y haz clic en el botón Create Component (Crear componente) para guardar tu auto layout como un componente. Mueve este componente principal fuera del marco.
5. Cómo crear un Auto Layout vertical
Paso 1
Concéntrate en la barra lateral izquierda, allí podrás encontrar tu componente dentro del panel Assets.
Arrastra una instancia de este componente dentro de tu diseño (en Figma, una instancia es una copia de un componente que puedes reutilizar en tus diseños).
Paso 2
Puedes ajustar fácilmente el texto dentro de la instancia de tu componente y, gracias a la función Auto Layout, las estructuras se ajustarán a su contenido.
Añade otras dos instancias de tu componente y ajusta el texto como se muestra a continuación.
Paso 3
Selecciona tus tres instancias de componentes y añade un nuevo Auto Layout (Shift-A).
De forma automática, Figma establecerá la orientación de este nuevo Auto Layout en Vertical. Ajusta Spacing Between Items en 10 y mantén Padding Around Items en 0.
Paso 4
Con el comando Place Image (Colocar imagen), puedes insertar imágenes fácilmente dentro de los cuadrados con bordes redondeados de tus elementos de auto layout. Simplemente selecciona la forma y ve a Place Image (Control-Shift-K) en tu barra de herramientas.
Paso 5
Por último, deberías saber que puedes duplicar fácilmente un elemento de un marco de Auto Layout.
Selecciona el elemento de tu auto layout, presiona Control-C para copiarlo y luego Control-V para pegar la copia. Así de fácil.
Al igual que con el auto layout horizontal, puedes cambiar fácilmente el orden de los elementos. Puedes hacer clic y arrastrar los elementos o puedes presionar las teclas de flecha arriba/abajo para mover un elemento seleccionado en esa dirección.
6. Cambiando el tamaño de los Auto Layouts
Al seleccionar un auto layout, también tendrás acceso a las opciones de cambio de tamaño (Resizing) en la barra lateral derecha. Esta configuración determina cómo debe ajustar su tamaño tu marco de auto layout cuando edites su contenido interno. Usando los dos menús desplegables, puedes cambiar el tamaño vertical u horizontal.
Usaremos este auto layout y el auto layout anidado como ejemplo. Primero selecciona el auto layout principal y selecciona Fixed width (Anchura fija) para el cambio de tamaño horizontal y Hug contents (Abrazar contenido) para el cambio de tamaño vertical, y luego selecciona el auto layout anidado y establece la misma configuración de cambio de tamaño.
Ahora, haz doble clic en el título del marco del auto layout anidado para añadir una segunda línea de texto. Notarás que la anchura del marco del auto layout anidado no cambia, pues la altura del auto layout anidado y el auto layout principal se ajustan para adaptarse a la nueva línea de texto.
¡Felicitaciones! ¡Has terminado!
Así es como debería verse el diseño de tu carrito de compras. Espero que hayas disfrutado de este tutorial y que puedas aplicar estas técnicas en tus proyectos futuros. No dudes en compartir tu resultado final en la sección de comentarios.
No dudes en crear tu propio diseño utilizando estas técnicas. En Envato Elements puedes encontrar excelentes fuentes para inspirarte, con interesantes soluciones para mejorar el diseño de tu carrito de ecommerce.
¿Quieres aprender más?
En Tuts+ tenemos muchos tutoriales, de nivel principiante a intermedio, ¡échales un vistazo!
FigmaCómo trabajar con Auto Layouts, componentes y contenido dinámico en Figma
FigmaCómo utilizar las nuevas funciones de Auto Layout de Figma
FigmaCómo crear el diseño de un sitio web médico en Figma
FigmaCómo acelerar tus componentes con las variantes de Figma
Figma4 formas de cambiar el tamaño de los elementos en Figma
FigmaCómo crear pantallas de introducción y de inicio de sesión para una plantilla de aplicación de citas en Figma
FigmaNuevo curso: Cuadrículas de Figma en menos de 30 minutos
FigmaAtajos esenciales de Figma para trabajar de modo eficiente
FigmaMás de 21 de los mejores kits prémium de UI para Adobe XD y Figma
Figma20 kits de UI de Figma para diseñadores
