Auto layout nos permite configurar y personalizar componentes, pudiendo reutilizarlos infinidad de veces y con un coste de esfuerzo muy bajo a la hora de realizar modificaciones sobre ellos.
En este pequeño tutorial voy a explicarte cómo configurar una típica tarjeta de publicación, que puedes encontrar en plataformas como Facebook o Linkedin, de manera que ilustre cómo aplicar la funcionalidad Auto layout de Figma.
Paso 1. Diseña y punto
Hasta aquí, nada nuevo. Simplemente debemos diseñar el que será el componente en cuestión, sin preocuparnos demasiado de nada más.
Consejo: diseña «a máximos». Es decir, teniendo en cuenta todos los elementos que podrá tener nuestro componente. Ya habrá tiempo de ocultar alguno si no queremos mostrarlo.
Paso 2. Agrupa y separa por bloques
Mi sugerencia es que visualizes y dividas el componente o módulo en grupos, ya que los trabajaremos por separado aplicando, si es necesario, Auto layout en cada uno de ellos.
Paso 3. Aplicando Auto layout
Como hemos adelantado en el paso anterior, iremos aplicando Auto layout en cada uno de los 4 grupos, antes de aplicar la funcionalidad a todo el conjunto.
Nota importante: Las opciones de la funcionalidad Resizing varían dependiendo de si el elemento o la agrupación de elementos que se quiere configurar está o no contenido en otra agrupación «padre» con Auto layout aplicada. Por ejemplo, la opción Fill container para el grupo formado por Nombre + Profesión, que veremos en el paso 3.1, no se mostrará hasta que no se aplique Auto layout a la agrupación de la Cabecera, formada a su vez por Avatar + (Nombre + Profesión) + Botón.
3.1 Cabecera
De lo más pequeño a lo más grande, empezaremos aplicando Auto layout a las relaciones de elementos más simples.
Teniendo en cuenta los espacios que hemos definido en nuestro diseño (en nuestro caso hay un padding de 16 píxeles alrededor de los elementos con 16 píxeles entre ellos) configuraremos Auto layout de esta manera para la Cabecera. Alinearemos los elementos horizontalmente (centro-izquierda).
Como hemos dicho antes, la opción Fill Container no podremos aplicarla hasta que no agrupemos con Auto layout las 4 partes principales de nuestro componente, como se explica en el Paso 4.
3.2 Imagen
Para la imagen no necesitamos aplicar Auto layout, pero sí tener en cuenta su comportamiento cuando queramos modificar el ancho o el alto de todo el componente: Fill container, tanto horizontal como verticalemente.
3.3 Información de la publicación
Aplicamos Auto layout a la información de la publicación, añadiendo un color de fondo gris a la misma agrupación que genera automáticamente la funcionalidad.
3.4 Acciones
En esta última parte del componente tendremos un máximo de 3 acciones que podremos modificar para que disminuyan en número o sólo se muestren los iconos.
Paso 4. Define Auto layout a todo el conjunto
Una vez hayamos trabajado las 4 partes de nuestro diseño, es momento de relacionarlas entre sí con Auto layout. Recuerda revisar las propiedades de Resizing de cada una de esas partes para asegurar que se ajustan bien a su contenedor.
A la misma agrupación generada por Auto layout, le puedes asignar estilos: un fondo blanco, curvatura en las esquinas y una ligera sombra paralela. No es necesario que crees un rectángulo para el fondo con esas propiedades.
Paso 5. Convierte todo en un componente
Tan sencillo como seleccionarlo todo y hacer click en Create component.
Resultado
Si me he explicado bien y logramos tener todas las relaciones correctamente configuradas con Auto layout, tendremos la posibilidad (además de la capacidad de modificar textos, imágenes, iconos y estilos) de poder ajustar las dimensiones de nuestro componente como necesitemos:
