Posicionamiento absoluto en Figma. No hay duda de que el diseño automático… | Anna Rzepka | mayo 2022

Imagen de portada con dos rectángulos superpuestos

TNo hay duda de que los marcos de diseño automático son excelentes para crear componentes genéricos. Pueden escalar fácilmente para adaptarse a su contenido. Pero, ¿qué haría si quisiera que algunas partes de su componente basado en flexbox permanecieran fuera de él? ¿O si necesita una capa superpuesta flexible encima de sus diseños?

Anteriormente, usaría este truco de fotograma cero:

Sin embargo, la reciente conferencia Config nos trajo actualizaciones de Figma con algunas características nuevas e interesantes. Entre muchos otros, ahora es posible colocar absolutamente sus elementos dentro de los cuadros de diseño automático. Ya no es necesario utilizar marcos nulos para esto. ¡Hurra!

El posicionamiento absoluto le permite excluir un elemento del flujo de diseño automático normal sin eliminarlo del marco mismo. No hay espacio reservado para este objeto dentro del contenedor, por lo que los hermanos simplemente ignoran su posición. Al igual que el truco de fotograma cero, pero sin piratear nada.

Un elemento absolutamente posicionado permite el uso de restricciones dentro del cuadro de diseño automático. De esta manera, puede colocarlo exactamente donde desee y mantener esa posición en relación con el marco principal. En este caso, las opciones de cambio de tamaño y diseño avanzado ya no estarán disponibles.

Habilitar el posicionamiento absoluto en Figma es tan fácil como hacer clic en un botón. Pero primero debe tener todos sus elementos agrupados dentro del cuadro de diseño automático. Luego, selecciona los que desea eliminar de la transmisión y establece su posición absoluta. El botón mágico se encuentra en la parte superior del panel Diseño, justo debajo de todas las opciones de alineación.

Un botón de posición absoluta ubicado en el panel Diseño.
El botón de posición absoluta está en el panel Diseño.

Contenido del Articulo

Elementos parcialmente fuera del diseño automático

Esta función se puede utilizar para insignias o tarjetas con elementos desbordados.

Supongamos que está desarrollando una tienda en línea. Es posible que desee mostrar la cantidad de artículos actualmente en el carrito sobre el ícono del carrito una vez que los usuarios agreguen artículos a sus carritos.

Así que empiezas creando un botón. Simplemente agrupe el icono y el icono con la capa de texto y aplique el diseño automático. Luego ajuste las propiedades para que los elementos internos estén alineados en el centro. Luego excluya el ícono del flujo regular y colóquelo como desee. Finalmente, agregue restricciones a su icono. ¡Voila! Acabas de crear tu primer ícono de posición absoluta en Figma.

Botón de icono fuera del flujo de diseño automático
Botón de icono fuera del flujo de diseño automático

¿Qué tal subir un poco el listón? 🙂 Con componentes más complejos como mapas, deberías hacerlo de forma similar.

Supongamos que desea que una imagen sobresalga de su tarjeta para crear una composición más dinámica. Supongamos que esta tarjeta es una opción seleccionable y necesita desarrollar varias versiones para diferentes estados (p. ej., predeterminado, flotante, activo, seleccionado). Asegúrese de no estropear accidentalmente la estructura de sus opciones, de lo contrario, la anulación de su instancia fallará. Si no sabe cómo crear una jerarquía de componentes, pruebe algunos consejos de este artículo:

Cuando tenga la estructura más compleja, simplemente agrupe el contenido en marcos de diseño automático y marque la imagen para eliminarla de la transmisión. Funciona a la perfección, incluso al cambiar entre diferentes opciones.

Tarjeta con imagen posicionada absolutamente
Tarjeta con imagen posicionada absolutamente

Elementos encima del diseño automático

A veces, es posible que desee componentes flexibles con elementos encima, o incluso una cobertura de malla completa.

Es posible que deba agregar alguna funcionalidad a los menús contextuales, mostrar etiquetas sobre imágenes o mostrar controles en la parte superior de su reproductor de video. Estos elementos generalmente se colocan encima de sus componentes. Es posible que deba habilitar ciertas funciones en los menús contextuales o etiquetar imágenes con etiquetas. Además, desea que sus componentes llenen el espacio horizontal y ajusten automáticamente su altura. ¿Parece imposible? Ya no.

Vamos a crear un componente de reproductor de video. Comience preparando una imagen de marcador de posición de relación de aspecto fija que se escale proporcionalmente a su ancho. Si necesita ayuda para crear un objeto de este tipo, consulte este artículo:

Una vez que tenga la miniatura del video lista y colocada en el diseño automático, puede comenzar a preparar la superposición escalable. Dentro del marco de diseño automático, agregue un rectángulo y un botón de reproducción. Luego asigne un posicionamiento absoluto a ambas partes. Ajuste la superposición para que cubra toda la imagen y cambie su opacidad para que se vea la imagen de abajo. Luego establezca las restricciones de la cuadrícula a la izquierda, derecha, arriba y abajo para mantener las proporciones de su padre. Finalmente, coloque el botón de reproducción en el medio y establezca su restricción para que se centre horizontal y verticalmente.

Componente de video superpuesto
Componente de video superpuesto

Ahora tienes un componente universal que también puedes usar, por ejemplo, en tus listas responsivas.

Lista de videos receptivos
Lista de videos receptivos

Figma está evolucionando gradualmente y constantemente se agregan nuevas características. Las actualizaciones de diseño automático introducidas durante Config 2022 sin duda facilitarán mucho la creación de objetos, ya que los componentes restringidos ya no requieren marcos adicionales para funcionar. Esta es una gran noticia porque ahora podemos dejar de ser hackers y centrarnos en ser diseñadores 🙂

Previous post El éxito de las ventas sociales depende de estas 8 métricas
Next post Facebook Pixel: la guía completa para especialistas en marketing digital

Deja una respuesta