Cómo utilizar el diseño automático en Figma

Auto Layout es una herramienta esencial para todo diseñador y usuario de Figma. Esta función le permite realizar cambios como cambiar el tamaño o reposicionar marcos y objetos. Auto Layout te permitirá ajustar la altura y el peso de un elemento, por ejemplo, con una configuración automática, reduciendo tu trabajo a la mitad.

Dado que el tamaño de la pantalla cambia según el dispositivo o navegador que utilizará el usuario para acceder al sitio web, Auto Layout hace que los elementos dentro de los marcos se ajusten a esos cambios. Esto hace que el diseño y la estructura parezcan más precisos y en sinergia. Continúe leyendo para aprender cómo utilizar el diseño automático en Figma y sus funciones.

Usando el diseño automático

Para utilizar el diseño automático y todas sus funciones, primero debe agregarlo a un marco en el que esté trabajando, que puede ser un marco nuevo o uno con contenido, objetos y componentes. Después de seleccionar el marco o los objetos, así es como se le agrega Diseño automático:

• Presione «Alt + A» en su teclado (funciona en Mac y Windows).
• Haga clic derecho en los objetos o componentes y haga clic en Diseño automático (debe agregar esta función a cada componente ya que es imposible de forma masiva).
• Toque el ícono más al lado de la opción «Diseño automático» en el menú de Figma.

Además de agregar Diseño automático a su marco, puede hacer varias cosas, desde apilar marcos hasta duplicar, organizar y eliminar objetos.

Agregar y quitar objetos

Agregar objetos a tu marco es bastante sencillo. Sólo necesitas tomar el objeto que deseas agregar y seguir el indicador. Y si va a eliminar uno, arrástrelo nuevamente y presione eliminar. Si elige agregar un objeto más grande que el marco principal, deberá evitar la configuración predeterminada de Figma para poder hacerlo. Puede hacerlo manteniendo presionado el botón «Ctrl» para Windows y «Comando» para Mac.

Duplicar objetos

Si desea agregar dos o más objetos idénticos al marco, puede duplicarlos, lo cual es una característica útil de Capa automática. Así es como puedes hacerlo:

1. Toca el objeto que deseas duplicar.

   

2. Mantenga presionados los botones «Ctrl» y «D» simultáneamente si tiene Windows.

   

3. Para Mac, duplique manteniendo presionados los botones «Comando» y «D».

   

Organizar objetos

Si no te gusta el aspecto de tu marco y la organización de los objetos y componentes dentro de él, puedes reorganizarlos. Si ha fusionado dos capas, debe omitir la configuración predeterminada de Figma presionando «Ctrl» para Windows y «Comando» para Mac para acceder a la opción de selección profunda y mover el componente desde la capa inicial. Sin embargo, si se trata de un cuadro, puede seleccionar un objeto y moverlo a otra parte, de forma similar a agregar objetos, o usar la tecla de flecha.

Niveles de diseño automático

Otra característica de Auto Layout es combinar más marcos en uno para crear una interfaz más complicada donde puedes superponer diferentes niveles de Auto Layout como botones y filas de botones, una publicación y una línea de tiempo. Cada nivel le permite agregar un objeto adicional a su marco. Los niveles de botones y filas de botones son horizontales, mientras que una publicación es una capa vertical donde puedes ingresar descripciones, imágenes, etc.

Cuando apilas dos marcos juntos, se fusionan y obtienen las propiedades de un marco principal. Esto permite al usuario implementar objetos ajustables. Puedes coger uno y ponerlo sobre otro para unir dos cuadros. Para hacer esto, tienes que:

1. Elige un marco y todo lo que quieras agregarle.

   

2. Presione «Shift + A» para agregar un marco de diseño automático.

   

Funciones de diseño automático

La opción Diseño automático en Figma tiene muchas propiedades o funciones valiosas, desde dirección y orden de apilamiento hasta espaciado, cambio de tamaño y alineación. Esta sección hablará sobre cada una de estas funciones con más detalle.

Dirección

Como sugiere el nombre, la dirección se refiere al orden de los objetos en un marco. Al utilizar Diseño automático, los objetos se pueden colocar:

• Verticalmente: los objetos se colocan en el eje y. Esta opción es adecuada para listas, menús, fuentes de noticias, etc.
• Horizontalmente: objetos y componentes en el eje x (botones, iconos, etc.).
• Posición de ajuste: los objetos se establecen en varias columnas y filas.

Orden de apilamiento

Puede elegir qué orden de apilamiento se adapta mejor a su estructura. Este es un cambio visual sólo porque el orden de apilamiento sigue siendo el mismo (si es 1,2,3, sigue siendo 1,2,3 pero con ajustes visuales). Cuando los objetos se apilan uno encima del otro, puedes elegir cuál estará encima. Entonces, por ejemplo, si tienes tres cosas marcadas 1, 2 y 3, puedes usar 1 o 3. Así es como puedes hacer esto:

1. Elija el marco Diseño automático.

   

2. Navegue hasta la opción Diseño automático a la derecha de la pantalla.

   

3. Toque los tres puntos horizontales para abrir opciones avanzadas.

   

4. Busque la opción «Apilamiento de lienzos».

   

5. Elija «Primero en la parte superior» o «Último en la parte superior».

   

Posición absoluta

Otra propiedad del «Flujo de capas» es una posición absoluta, además del orden y la dirección de apilamiento. Esta función le permite colocar un objeto donde desee, ignorando los límites del marco. Así es como habilitarlo:

1. Coge un objeto y colócalo dentro del marco.

   

2. En el menú del lado derecho, junto a los valores de «X» e «Y», toque el icono que se asemeja a un cuadrado sin bordes con un signo más en su interior.

   

3. Mueva el objeto a lo largo de las líneas del marco.

   

Configuración de espacios

Hay algunas características que puedes ajustar en lo que respecta al espaciado, como el espacio. Tienes dos formas de cambiar el espacio: automáticamente y escribiendo en un espacio específico. Si desea que su espacio sea lo más grande posible, debe seleccionar la configuración automática en el menú Diseño automático. Pero si va a ingresar sus valores, escríbalos dentro de los cuadros asignados.

Además, el ajuste de espacios se puede establecer para todas las direcciones. Si sus íconos son solo horizontales y verticales, puede seleccionar un espacio horizontal entre ellos. Sin embargo, si están en una posición envolvente, puede ajustar la configuración de espacio vertical y horizontal.

Configuración de alineación

Después de configurar las funciones de dirección, relleno y espacio, puede ajustar la alineación del objeto secundario en su marco, ya que esta función depende de la configuración de espaciado. No puede cambiar la alineación de cada objeto, pero elija un patrón ofrecido en el menú de Diseño automático. Puede hacer clic en la cuadrícula de 3 × 3 en el menú y seleccionar qué alineación desea. Esto se puede hacer con las teclas de flecha o los botones WSAD de su teclado.

Además, puede elegir aquí la configuración automática para cambiar las alineaciones horizontales y verticales como una fila. Con valores específicos, puede tener las nueve opciones (arriba a la izquierda, abajo a la izquierda, izquierda, derecha a la izquierda, abajo a la derecha, etc.).

También puede ajustar la alineación del texto habilitando esta opción en el menú y manteniendo presionado el botón «B».

Cambiar el tamaño

Las opciones de cambio de tamaño de Diseño automático tienen muchas propiedades adicionales, como abrazar contenido, opción de llenar contenedor, ajustar ancho y alto, dimensiones, etc. Puede seleccionar la opción automática si desea que sus valores sean fijos, pero eso limita las posibilidades. Para cambiar el tamaño, se recomienda establecer sus valores.

Puede seleccionar un valor fijo o establecerlo en las dimensiones máximas o mínimas posibles para ancho y alto. El contenido de abrazo le permite ajustar el tamaño de un marco según el objeto secundario, mientras que la opción de llenar el contenedor cambia el tamaño de un objeto según el marco principal.

Crear marcos únicos con diseño automático

El diseño automático, como una de las características esenciales de Figma, puede ajustar el marco y los objetos y compartimentos dentro de él según sus preferencias. Sus propiedades y características son múltiples, lo que permite crear un producto adecuado y cuidado. Auto Layout es una herramienta fundamental que debes dominar antes de trabajar en Figma.

¿Qué función de diseño automático utilizas más? Háganos saber en la sección de comentarios.