Landing page responsive con Auto Layout en Figma

Curso de Figma: Técnicas Avanzadas de Diseño

Contenido del curso

Cómo iniciar los proyectos en Figma

Diseño Responsive y Técnicas Avanzadas

Crea componentes avanzados

Variables en Figma

Inteligencia Artificial para Figma

Crear Landing Pages con Figma

Interacción Avanzada con Prototipos

Prototipado avanzado con Figma

Cómo trabajar con los equipos de desarrollo

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:006:30

Landing page responsive con Auto Layout en Figma

Curso de Figma: Técnicas Avanzadas de Diseño

Clase 21 de 29

Clase 21 / 29

Recursos

Diseñar una landing page responsive en Figma dejó de ser un dolor de cabeza. Con el nuevo auto layout y las variables, puedes construir interfaces que se adaptan al ancho del contenedor y, además, cambian de idioma con un clic. Aquí te muestro, sección por sección, cómo se arma esa landing usando componentes base como un logo, un botón, una tarjeta Visa y una imagen de iPhones.

¿Cómo se arma el navbar con Auto Layout en Figma?

El navbar es el punto de partida y el más simple de toda la estructura. Tiene solo dos elementos: el logo y la hamburguesa.

Lo construyes así:

Inserta un frame de tamaño desktop.
Crea un rectángulo y aplícale auto layout.
Añade los dos elementos dentro y deja que el espacio rosa los separe automáticamente, ahora con el nombre Auto en la interfaz [01:24].
Quita los márgenes del frame desktop para que la interfaz quede responsive.
Configura el auto layout en dirección vertical para que las siguientes secciones se vayan apilando.

Con eso ya tienes la primera sección lista y comportándose como en la web.

¿Cómo lograr que el hero salte de fila cuando el espacio se reduce?

El hero usa dos contenedores que conviven dentro de un padre. Aquí entra en juego la propiedad nueva de auto layout llamada group, que permite que un bloque empuje al de al lado y, cuando ya no cabe, salte automáticamente a la siguiente fila [02:15].

El truco está en aplicar fill container al elemento y en el margen interno, donde puedes elegir entre un número fijo o el valor auto. Cambiar a auto hace que la interfaz se reorganice sola en cualquier resolución.

¿Qué hace la propiedad group en auto layout? Permite que los elementos hijos se reorganicen como bloques: cuando el contenedor padre se reduce, el bloque que no cabe salta a la línea siguiente, igual que el comportamiento natural de un flex-wrap en web.

Esto importa mucho cuando trabajas con varios idiomas. Si el literal cambia y ocupa más espacio, la sección sigue comportándose bien sin que tengas que rehacer la estructura. Antes había que anidar muchos contenedores; ahora basta con activar auto layout y elegir group.

¿Cómo controlar el tamaño de imágenes con min y max width?

La siguiente sección repite el patrón: dos contenedores, uno a la izquierda y otro a la derecha. La diferencia es que la imagen necesita un límite para no encogerse demasiado.

Ahí entran min width y max width, dos propiedades que te dan control fino sobre el comportamiento responsive [03:42]:

Selecciona el elemento al que quieras fijar un límite.
Aplica un min width, por ejemplo, 400 píxeles.
Cuando el contenedor llegue a ese ancho, la imagen deja de encogerse y fuerza el salto del layout.
Si quieres usar breakpoints, puedes aplicar una variable de tamaño en lugar de un número fijo.
Si algo no funciona como esperas, usa remove min and max para resetear los valores.

¿Existe una variable para que el texto sea responsive en Figma? Todavía no. De momento, las variables no controlan el tamaño del texto de forma responsive, pero Figma lo incluirá en próximas actualizaciones.

Este pequeño handicap es importante tenerlo en cuenta para no perder tiempo buscando una opción que aún no existe.

¿Por qué el footer es la sección más compleja de una landing en Figma?

El footer parece simple, pero tiene varias columnas conviviendo dentro de un contenedor principal llamado columns. Para que entre todo el contenido, conviene asignarle un huge content al frame [05:10].

Cuando el contenedor se reduce, las columnas saltan una por una hasta acomodarse. Funciona muy bien, aunque en medidas intermedias quizá necesites ajustar paddings internos o tamaños específicos según el dispositivo.

Qué revisar si el responsive deja de funcionar

Un detalle frecuente: al tocar propiedades dentro de auto layout, Figma a veces resetea valores como el fill container. Si ves que un elemento no ocupa todo el ancho, revisa que esté en fill container dentro del frame. Esa es la pieza que mantiene el comportamiento responsive en toda la landing.

Qué habilidades se quedan contigo después de armar esta landing

Dominio del auto layout vertical y horizontal para apilar secciones.
Uso de la propiedad group o wrap para que los bloques salten de fila.
Aplicación de min width y max width para controlar imágenes y bloques [03:42].
Configuración de fill container y márgenes en auto para mantener el responsive.
Estructura de columnas en footer con un contenedor padre tipo columns.
Preparación de variables de texto en español e inglés para internacionalizar la interfaz [00:18].

Con todo esto montado, la landing se comporta de forma responsive en cualquier ancho y queda lista para conectar las variables de idioma. ¿Te animas a replicarla con tus propios componentes y compartir cómo te quedó?