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

Cómo usar las nuevas funciones de Auto Layout de Figma

Scroll to top
Read Time: 5 mins

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

En este video, ¡te enseñaré cómo las nuevas y mejoradas funciones de Auto Layout de Figma hacen que diseñar componentes y diseños responsivos sea más fácil que nunca!

Las funciones originales de Auto Layout de Figma se introdujeron en diciembre de 2019 y ahora, casi un año después, Auto Layout ha sido totalmente reinventado, reconstruido y es (en mi opinión) mucho mejor.

Mira el video

¿Qué es Auto Layout de Figma?

Auto Layout de Figma te permite crear marcos o estructuras dinámicas que se ajustan a su contenido. Aquí, por ejemplo, hay un simple marco que contiene algunas formas:

simple frame in Figmasimple frame in Figmasimple frame in Figma

Al seleccionar el marco y luego hacer clic en el botón Auto Layout en la barra lateral, las formas dentro del marco se ordenan de forma más eficiente y el marco en sí se ajusta en respuesta al área que ocupan:

auto layout frame figmaauto layout frame figmaauto layout frame figma

Notarás en las propiedades de Auto Layout que hemos seleccionado Horizontal. Esto organiza las formas de manera horizontal dentro del marco. También podemos escoger Vertical y aplicar una serie de  ajustes que nos ofrecen excelentes niveles de control sobre la alineación, la distribución y el espaciado.

Esta es una demostración muy básica, pero con las funciones de Auto Layout podemos crear botones que cambien de tamaño según su contenido, o menús que hagan lo mismo, incluso diseños completos que cambien y se ajusten de manera responsiva. Es sin duda mi función favorita dentro de Figma.

Las nuevas funciones de Auto Layout de Figma

Como lo señalé anteriormente, el concepto de Auto Layout no es nada nuevo en Figma, pero esta encarnación reciente viene con muchas características nuevas. Mira el video anterior para que veas demostraciones completas de estas funciones; aquí tienes un breve resumen:

Relleno (Padding)

Imagina que estás creando un objeto de texto para un botón. Añade el texto al espacio de trabajo, luego haz clic con el botón derecho en Auto Layout. Al hacer esto, inmediatamente se crea un marco alrededor del objeto de texto (mira el panel Layers), se aplica un relleno predeterminado de 10 px entre los elementos (veremos esto en un momento) y un relleno predeterminado de 10 px alrededor del objeto (mira el panel Properties):

default padding on auto layout framedefault padding on auto layout framedefault padding on auto layout frame

Estos valores pueden ser cambiados ingresando diferentes números. En la versión anterior de Auto Layout de Figma, podías aplicar el relleno especificando valores horizontales y verticales, pero en este nueva versión puedes introducir valores para la parte superior, inferior, izquierda y derecha, todo dentro del panel Alignment and Padding:

alignment and paddingalignment and paddingalignment and padding

Cambiar el tamaño

También tenemos algunas opciones nuevas e interesantes para cambiar el tamaño. Por ejemplo, podemos aplicar Auto Layout a un botón (como arriba) y luego, en las propiedades Resizing, podemos aplicar Hug Contents (Abrazar contenidos) tanto de forma vertical como de forma horizontal. Esto hace que el marco principal «abrace» el botón cambiando su tamaño según el tamaño del botón.

Como alternativa, podemos establecer este valor de cambio de tamaño en Fixed Width (Ancho fijo) y Fixed Height (Alto fijo). Como es de esperar, esto te permite introducir un valor fijo para el ancho y alto del botón.

El valor final posible aquí es Fill Container (Llenar contenedor), que hará que el botón sea tan ancho o alto como lo permita el espacio disponible en el contenedor principal.

Estos tres métodos para el tamaño de los objetos, especialmente porque puedes utilizar cualquier combinación que quieras en un objeto, permiten un control total cuando se trata de diseños de componentes y páginas completas.

Alineación (Alignment)

El nuevo Auto Layout de Figma también nos ofrece un nuevo control de alineación. En la versión anterior, se realizaba cualquier alineación en el «nivel secundario», es decir, en los propios objetos. Ahora, aplicas las propiedades de alineación al contenedor principal.

Puedes ver cómo la alineación afecta a los objetos secundarios en el panel Alignment and Padding que vimos anteriormente:

alignment of objectsalignment of objectsalignment of objects

En la imagen de arriba, puedes ver que los objetos dentro de este marco están alineados en la parte superior izquierda. El espacio entre los elementos se especifica en el cuadro Spacing Between Items (Separación entre elementos) que vimos antes. También puedes ver que el puntero del mouse está situado sobre lo que sería la alineación central superior. Puedes hacer clic en cualquier lugar de este espacio para cambiar la alineación visualmente.

Personalmente, me gustaba bastante la versión anterior en la que podía alinear objetos individualmente, pero puedo ver que este enfoque tiene sentido. Si alguna vez has visto a Flexbox y cómo aplica la alineación en CSS, verás elementos comunes en su comportamiento.

En el diseño que se mostró anteriormente se utilizó la distribución Packed, pero también hay otras formas de distribución, por ejemplo Space Between, que distribuye eficazmente los objetos en todo el ancho o alto del contenedor principal (según la dirección de la alineación), con el mismo espacio entre cada uno.

Aprende más sobre Auto Layout de Figma

¡Eso concluye esta introducción a las nuevas funciones de Auto Layout de Figma! Hace poco creé un curso en el que explicaba con mayor detalle las «antiguas» características de Auto Layout. Las características han sido replanteadas por completo desde entonces, pero los principios y las mejores prácticas que trato siguen siendo perfectamente relevantes. ¡Revisa el curso!

Recursos útiles y tutoriales de Figma

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.