7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. Figma

Crea el diseño de un carrito de compras con la función Auto Layout de Figma

Scroll to top
Read Time: 13 mins

Spanish (Español) translation by Carlos (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

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.

what is auto layoutwhat is auto layoutwhat is 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.

auto layout new featuresauto layout new featuresauto layout new features

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).

type tooltype tooltype tool

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.

add auto layoutadd auto layoutadd auto layout

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.

add fill and strokeadd fill and strokeadd fill and stroke

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.

notification icon auto layoutnotification icon auto layoutnotification icon auto layout

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.

type tooltype tooltype tool

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.

auto layout figmaauto layout figmaauto layout figma

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.

corner radiuscorner radiuscorner radius

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.

auto layoyt iconauto layoyt iconauto layoyt icon

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.

auto layoyt spacing between itemsauto layoyt spacing between itemsauto layoyt spacing between items

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.

type tooltype tooltype tool

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.

auto layout sizeauto layout sizeauto layout size

Paso 8

Añade un relleno (Fill) a este auto layout y ajusta su color a #00DE81, luego aumenta Corner Radius a 10.

auto layout fillauto layout fillauto layout fill

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).

type tooltype tooltype tool

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.

auto layoutauto layoutauto layout

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.

auto layout buttonauto layout buttonauto layout button

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.

auto layout horizontalauto layout horizontalauto layout horizontal

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.

rectangle toolrectangle toolrectangle tool

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.

figma textfigma textfigma text

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.

auto layout buttonauto layout buttonauto layout button

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).

vertical auto layoutvertical auto layoutvertical auto layout

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.

ellipse tool figmaellipse tool figmaellipse tool figma

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.

plus minus figmaplus minus figmaplus minus figma

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.

group figmagroup figmagroup figma

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.

nested auto layoutnested auto layoutnested auto layout

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.

auto layout space betweenauto layout space betweenauto layout space between

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.

figma create componentfigma create componentfigma create component

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).

assets component instanceassets component instanceassets component instance

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.

multiply componentmultiply componentmultiply component

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.

vertical auto layoutvertical auto layoutvertical auto layout

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.

figma place imagefigma place imagefigma place image

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.

auto layout duplicate itemauto layout duplicate itemauto layout duplicate item

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.

auto layout move itemauto layout move itemauto layout move item

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.

figma auto layout resizingfigma auto layout resizingfigma auto layout resizing

¡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.

shopping cart design figma auto layoutshopping cart design figma auto layoutshopping cart design figma auto layout

¿Quieres aprender más?

En Tuts+ tenemos muchos tutoriales, de nivel principiante a intermedio, ¡échales un vistazo!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.