• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar al pie de página

Juanpol

Diseño UX y UI / Creación de productos digitales

  • Tutoriales de Figma
  • Blog
  • Newsletter
  • 🔴 YouTube

Auto Layout, Upgrade Noviembre 2020

Figma no deja de evolucionar, los profesionales que trabajamos con esta herramienta sabemos bien que durante varias veces al año los ingenieros añaden detalles y funciones que nos ayudan a trabajar de manera más rápida y óptima.

upgrade auto layout noviembre 2020

Hagamos un repaso a las novedades del upgrade de Figma del mes de noviembre de 2020.

Índice del artículo

  • Resizing
    • Hug Contents
    • Fixed
    • Fill Container
  • Padding
  • Alineación y Distribución
  • Inspect

Resizing

La gran novedad del Auto Layout es el Resizing de los objetos que contiene. Ahora podemos definir cómo se comportan cuando su contenedor o el contenido que tienen a su alrededor cambian de tamaño.

Tenemos tres opciones o comportamientos y los podemos aplicar al ancho, al alto o en ambas dimensiones de un objeto.

Hug Contents

Es el comportamiento más parecido al que teníamos en la versión anterior de Auto Layout. El contenedor se ajusta a su contenido, lo abraza, se adapta a su anchura y a su altura.

Fixed

Dará igual si su contenedor o sus objetos “hermanos» cambian de tamaño, un Auto Layout con comportamiento Fixed (o Fijo) mantendrá siempre la anchura y la altura que definamos.

Fill Container

Un Auto Layout con Fill Container se va a estirar para llenar el espacio que tiene dentro del contenedor principal, a lo ancho o a lo alto.

La propiedad Fill Container sólo está disponible para objetos que están dentro de un contenedor con Auto Layout. Si su padre no tiene Auto Layout sólo podremos configurarlo como Hug Contents o Fixed.

Padding

Hasta ahora podíamos aplicar un padding único a todos los lados de un Auto Layout, pero con la nueva versión podemos definirlo de manera individual: izquierda, derecha, arriba y abajo.

Podemos usar el configurador visual o introducir los valores separados por comas como si escribiéramos una clase dentro de un archivo CSS.

Veamos un par de ejemplos:

  • «10, 20, 10, 30»: siendo estos los valores de padding top, right, bottom y left.
  • «10, 20»: siendo estos padding top y bottom con 10 píxeles y left y right con 20 píxeles.

Sigamos con otras novedades…

Alineación y Distribución

Los objetos dentro de un Auto Layout se pueden alinear de forma horizontal o vertical como antes. La alineación por defecto ajusta los elementos juntos o empaquetados con una alineación superior izquierda.

Desde el módulo Auto Layout podemos modificar esa alineación con dos controles, los vamos a ver cuando pinchemos en el icono Alignment and Padding.

El primer control es muy visual, tenemos un grid con las alineaciones disponibles.

El segundo control lo vemos en un dropdown, por defecto vemos que todos los objetos están en modo Packed. Si queremos podemos cambiar a Space Between para que Figma ajuste los objetos de manera uniforme a lo ancho o a lo alto del contenedor y lo hará dependiendo de la dirección que tengan, horizontal o vertical.

Importante: el control visual muestra nueve opciones cuando los elementos se muestran como Packed y tres cuando se muestran como Space Between.

Desde este panel podemos definir los paddings del Auto Layout de manera individual como lo comentamos antes.

Inspect

Con las novedades que Figma ha lanzado en noviembre nuestros compañeros de Frontend o Backend podrán entender mejor el comportamiento de los elementos con Auto Layout porque cuentan con más información que les ayudará a generar el código necesario para que nuestros diseños cobren vida.

Si quieres aprender a usar las novedades que acabo de comentar y todas las demás características de la herramientas te dejo un link a mi clase de Auto Layout.

Creo que no me olvido de nada, si crees que falta algún detalle por favor deja un comentario, muchas gracias.

Aprende a usar Figma, Sketch y Webflow

Suscríbete gratis para recibir notificaciones cuando publique nuevos contenidos.

Revisa tu bandeja de entrada o la carpeta de spam para confirmar tu suscripción.

Información de privacidad

En este sitio web te solicito algunos datos para enviarte correos electrónicos con las publicaciones que hago. Finalidad de los datos: Enviar correos electrónicos con las novedades publicadas en el blog. Legitimación: Aceptación expresa de la política de privacidad. Almacenamiento de los datos: Base de datos alojada en Siteground España. Duración: Hasta que lo solicites. Derechos: En cualquier momento puedes limitar, recuperar y borrar tu información.

juanpol

Acerca de Juanpol

Product Designer, Diseñador UX/UI y creador de contenido con 29 años de experiencia. Trabaja en Freepik Company.

Interacciones con los lectores

Deja una respuesta Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *


En este sitio web te solicito algunos datos para poder moderar y responder comentarios de usuarios. Responsable de los datos: Juan Pablo Olmo / Finalidad de los datos: Gestionar los comentarios y evitar el spam. / Legitimación: Aceptación expresa de la política de privacidad. / Almacenamiento de los datos: Base de datos alojada en Siteground España. / Duración: Hasta que lo solicites. / Derechos: En cualquier momento puedes limitar, recuperar y borrar tu información.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Footer

Te puede interesar

  • Componentes interactivos de Figma
  • Los mejores plugins de Figma en 2023
  • Cómo crear un scroll en Figma
  • ¿Qué es Figma y para qué sirve?

Información

  • Juanpol
  • Contacto

Juanpol

Juanpol

Diseño UX y UI / Creación de productos digitales

  • info@juanpol.com
  • LinkedIn
  • YouTube
  • Telegram
  • Twitter

  • Privacidad

Utilizamos cookies propias y de terceros para fines analíticos y para mostrarte publicidad personalizada o a partir de tus hábitos de navegación. Puedes informarte más sobre ellas en los ajustes

Resumen de privacidad

Utilizamos cookies propias y de terceros para fines analíticos y para mostrarte publicidad personalizada o a partir de tus hábitos de navegación. Puedes cambiar la configuración u obtener más información consultando la política de cookies.

Cookies de terceros

Esta web utiliza herramientas de estadística para recopilar información anónima tal como el número de visitantes del sitio, o las páginas más populares.

Dejar esta cookie activa nos permite mejorar nuestra web.

¡Por favor, activa primero las cookies estrictamente necesarias para que podamos guardar tus preferencias!

Política de cookies

Más información sobre nuestra política de cookies.