• 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

Módulo Auto Layout

Este es el último tutorial de la serie Auto Layout, hoy aprenderemos a crearlos utilizando el módulo Auto Layout presente en la columna derecha de Figma.

módulo auto layout
El módulo Auto Layout en el panel de propiedades de Figma / Icono: Freepik

En los tres tutoriales anteriores te expliqué cómo crear un Auto Layout utilizando los demás métodos que Figma pone a disposición de nosotros los diseñadores UX / UI.

Si estás buscando toda la información sobre esta herramienta visita el artículo Auto Layout de Figma, allí tienes todos los detalles.

Ahora te invito a ver el vídeo de la última clase de la serie, debajo del mismo encontrarás la transcripción de su contenido, quizás te interese usarlo como guía.

Crear un Auto Layout utilizando el propio módulo

Veamos cómo crear un Auto Layout de Figma utilizando el módulo del mismo nombre.

El vídeo estará disponible en breve.

Pero antes de comenzar quiero aclarar que este módulo, presente en la pestaña Design del sidebar derecho de Figma, sólo aparecerá cuando queramos crear un Auto Layout a partir de un Frame o si uno de los elementos seleccionados es un Frame.

Si en nuestra selección sólo hay un objeto simple como un texto, una foto o una forma, el módulo Auto Layout no aparecerá. En estos casos sólo podremos utilizar alguno de los tres métodos que expliqué en los tutoriales anteriores.

Veamos unos ejemplos rápidos, primero seleccionamos una imagen, luego un texto y por último una forma, como vemos el módulo no aparece en ningún momento en la columna derecha de la aplicación.

Suelo comentar este punto porque más de una vez me han dicho: “Juan, el módulo Auto Layout no aparece en Figma”.

Y ahora veamos cómo crear un Auto Layout con su módulo. Lo primero que hacemos es seleccionar los objetos que van a estar dentro del Auto Layout. Con la selección hecha vemos que el módulo aparece en la aplicación.

Y ahora tenemos dos opciones, nos vamos con el ratón al módulo y:

  • Podemos pinchar en el título del mismo.
  • O en el icono con el símbolo “+” o plus, el que se suele utilizar para añadir cosas.

Ya hemos creado un Auto Layout utilizando su módulo. Como he dicho en las clases anteriores de la serie, en el primer vídeo te dejo información que complementará lo que hemos aprendido.

Si tienes alguna duda por favor deja un comentario.

Nada más por ahora, te espero en el siguiente tutorial, 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.