Guía definitiva para el diseño automático en Figma
Guía práctica sobre el diseño automático de Figma: cómo crear una ficha de producto, un formulario de envío y una página completa con esta función.
27 de noviembre de 2025
19 min
Contenido:
¿Qué es el diseño automático?
Auto Layout es la herramienta de Figma que permite organizar y espaciar automáticamente los elementos dentro de un grupo según las reglas que establezcas. Si cambias algo, como la longitud del texto o el tamaño de la imagen, todo lo demás se ajusta automáticamente, por lo que no es necesario realizar ajustes manuales.
En lugar de especificar valores exactos para varios ajustes, se definen reglas:
- Flujo ( antes denominado Dirección): horizontal, vertical o ajuste a una nueva línea.
- Espacio: Espacio entre elementos y relleno dentro del marco principal.
- Alineación y distribución de elementos secundarios.
- Comportamiento al cambiar el tamaño (Abrazo, Fijo, Rellenar): Para hacer que los componentes crezcan o se reduzcan con el contenido.
Cómo añadir diseño automático en Figma
Atajos de diseño automático:
- Mayús + A: aplicar diseño automático.
- Mayús + Alt/Opción + A: eliminar el diseño automático.
- Ctrl/Cmd + Mayús + G: desagrupar elementos.
- Ctrl/Cmd + D: duplica (clona) un marco de diseño automático.
Puedes aplicar el diseño automático a un solo marco, que puede contener varios elementos, como texto, formas e imágenes, o a una selección de elementos; Figma los envolverá automáticamente en un nuevo marco de diseño automático. Ejemplos de lo que se puede aplicar el diseño automático:
Veamos cómo funciona el diseño automático con marcos. Crea dos marcos, selecciónalos y haz clic en el botón «Usar diseño automático» o pulsa Mayús + A.
- Marco (individual)
- Marco + Marco
- Elemento + Elemento (Figma los envolverá en un nuevo marco)
Veamos cómo funciona el diseño automático con marcos. Crea dos marcos, selecciónalos y haz clic en el botón «Usar diseño automático» o pulsa Mayús + A.
Puede encontrar la configuración de Diseño automático en la barra lateral derecha del inspector cuando hay un fotograma o una selección activos.
Para comprobar si se ha aplicado el diseño automático, abra el panel Capas. Aparecerá un icono de diseño automático junto al nombre del fotograma y los fotogramas seleccionados se agruparán en un único fotograma de diseño automático.
El panel Capas se encuentra a la izquierda. También puede abrirlo utilizando el atajo Opt/Ctrl + 1.
Si ya tienes un marco con elementos en su interior, puedes seguir aplicando el diseño automático. Después, no tendrás que ajustar el tamaño del marco manualmente, solo tendrás que configurar los rellenos y el espaciado, y el marco cambiará de tamaño automáticamente para adaptarse a su contenido.
Diseño automático en acción: si cambia el tamaño del rectángulo verde, el marco se ajustará automáticamente al nuevo tamaño.
Propiedades clave del diseño automático
Repasemos los principales ajustes de Auto Layout y cómo se comportan en los diseños adaptables. Encontrarás estos controles en el panel derecho cuando selecciones un elemento con Auto Layout habilitado.
Flujo
El flujo define cómo se comportan los elementos cuando no hay suficiente espacio dentro de un marco de diseño automático. Esta configuración te permite elegir si los objetos permanecen en una sola fila/columna o se ajustan automáticamente a la siguiente línea cuando el marco se queda sin espacio.
1
Forma libre: puede mover los elementos a cualquier lugar dentro del marco. Aunque esta opción aparece en Diseño automático, en realidad desactiva el diseño automático para esos elementos.
Forma libre: coloca los elementos libremente (desactiva el diseño automático).
2
Vertical: Los elementos se colocan uno debajo del otro.
Los objetos se apilan automáticamente en una columna.
3
Horizontal: los objetos se alinean horizontalmente. En este modo, aparece una configuración adicional: Ajuste. Determina si los elementos se desbordan del marco (y se recortan) o se ajustan a la línea siguiente cuando se agota el espacio.
Diseño horizontal con ajuste automático desactivado.
Diseño horizontal con ajuste automático activado.
4
Cuadrícula: un nuevo modo que coloca automáticamente los elementos en una cuadrícula. Aparece un panel Cuadrícula para que puedas personalizarla, y los elementos se actualizan automáticamente cuando la modificas.
Cuando cambias la cuadrícula, los elementos se ajustan automáticamente a ella.
Cambiar el tamaño
Esta sección contiene controles W (anchura) y H (altura). Establecen la anchura y la altura de todo el marco con el diseño automático aplicado.
Puedes elegir entre dos modos:
- Corregido: El ancho y el alto del marco permanecen sin cambios, independientemente de otros ajustes o del tamaño de los elementos que contiene.
- Ajustar al contenido: El ancho y el alto del marco se ajustan en función del relleno configurado y del tamaño de los elementos que contiene.
Cuando Hug está activado, al cambiar el espacio entre los cuadrados, el marco se agranda o se reduce.
Brecha
Esta configuración controla el espaciado entre los elementos dentro de un diseño automático. Puede establecer los espacios horizontales y verticales de forma independiente.
Ejemplo: El espaciado vertical y horizontal entre los cuadrados dentro del diseño automático es de 40 píxeles.
Alineación
Esta configuración controla cómo se alinean los elementos dentro de un diseño automático: a la izquierda, a la derecha, al centro, arriba o abajo. Está disponible cuando el flujo del diseño se establece en horizontal o vertical.
Si la opción Envolver está activada, la alineación también determina cómo se posicionan las filas/columnas desiguales. Por ejemplo, el cuadrado morado puede situarse en el centro de forma predeterminada, pero puedes fijarlo a la izquierda o a la derecha.
Relleno
Esta configuración controla el espacio entre los bordes del marco y su contenido. El relleno se puede configurar individualmente para cada lado. Cualquier elemento nuevo que añadas se ajustará a su lugar y respetará esa configuración de relleno.
Configuración adicional
Hay varios ajustes adicionales disponibles para el diseño automático. Repasemos cada uno de ellos.
Para acceder a otros ajustes, haz clic en «Ajustes de diseño automático» en «Diseño automático».
1
Trazos: El contorno alrededor de un marco o elemento. Puede elegir si el contorno se coloca dentro o fuera de los bordes del elemento.
Así es como se ve el marco con el trazo habilitado y deshabilitado.
2
Apilamiento de lienzos: Definecómo se superponen los elementos cuando hay un espacio negativo. Elige si el primer o el último elemento debe colocarse delante.
Esta configuración no está disponible cuando el diseño está configurado en Cuadrícula.
3
Alinear la línea de base del texto: Alinea los elementos de texto a lo largo de la misma línea de base.
Esta configuración no está disponible cuando el diseño está configurado en Cuadrícula.
Cuando está activada, los elementos de texto se alinean perfectamente en la línea de base.
Ejemplos de casos de uso
Seamos sinceros: todos estos términos pueden resultar abrumadores. Sin práctica, no se quedan grabados y no tienen mucho sentido. Así que, en lugar de memorizar la teoría, veamos el Auto Layout en acción. Crearemos tres elementos comunes de la interfaz: un botón, una ficha de producto y un formulario de registro.
Si eres nuevo en las soluciones sin código, utiliza este código promocional exclusivo para obtener un mes del plan personal de Tilda en lugar de la prueba estándar de dos semanas.
Consulte las instrucciones para activarlo
Botón
Creemos un botón utilizando un marco y una capa de texto. Normalmente, ajustarías manualmente el ancho del marco para que coincida con la longitud del texto. Pero, ¿qué ocurre si el texto se alarga? Tendrías que volver a cambiar el tamaño del marco. Y si tu interfaz o sitio web tiene muchos botones, esto rápidamente se convierte en una tarea que requiere mucho tiempo.
Como puede ver, cuando la longitud del texto excede el marco, debe ajustar manualmente el segundo botón.
Habilitemos el diseño automático para reducir los ajustes manuales.
- Aplica el diseño automático al marco (Shift + A).
- Configure Hug para que el ancho del botón se adapte a la longitud del texto.
- Ajusta el relleno para que el texto no se pegue a los bordes del marco.
Con el diseño automático activado, el botón se ajusta automáticamente a la longitud del título.
Ficha del producto
Las fichas de productos se utilizan con mayor frecuencia en las tiendas online. Puede haber cientos o incluso miles de ellas. Cada ficha contiene títulos y descripciones de diferentes longitudes, además de imágenes de diferentes tamaños.
Con el diseño automático, solo tienes que sustituir el texto y las imágenes; todo lo demás se ajusta automáticamente.
Una tarjeta sin diseño automático: con una pequeña cantidad de texto, todo se ve bien.
Pero si el texto se alarga, parte del contenido se sale de la tarjeta.
Dentro de la tarjeta, los diferentes elementos requieren diferentes espaciados:
• El espacio entre el título y la descripción es un valor.
• El espacio entre el texto y la imagen es otro.
Para que la tarjeta cambie de tamaño automáticamente, la crearemos utilizando varias capas de diseño automático.
• El espacio entre el título y la descripción es un valor.
• El espacio entre el texto y la imagen es otro.
Para que la tarjeta cambie de tamaño automáticamente, la crearemos utilizando varias capas de diseño automático.
1
Comience aplicando el diseño automático a la capa del título y la descripción. Establezca un flujo vertical y un espacio de 12 píxeles para que la altura se ajuste automáticamente a las diferentes longitudes del texto.
2
A continuación, aplica el diseño automático a los elementos de imagen y texto juntos. Esto permite que la tarjeta se adapte a imágenes de diferentes tamaños. Añade un relleno alrededor de la tarjeta y establece el color de fondo en blanco.
Ahora puedes sustituir la imagen o añadir texto más largo: Figma ajusta automáticamente la altura de la tarjeta.
Cuando añadimos otra línea de texto, la tarjeta se reajusta y nada se rompe.
Formulario de contacto/envío
Un formulario en un sitio web suele incluir varios campos de entrada y un botón. Sin embargo, si se cambia el tamaño del marco, los campos no se estiran automáticamente y el espaciado entre ellos puede romperse.
Un formulario sin diseño automático: los campos no se amplían y nada se ajusta automáticamente.
Ahora apliquemos todo lo que hemos aprendido y creemos un formulario con tres campos de entrada estándar.
1
Añade una etiqueta de campo y un marco que actuará como entrada.
Etiqueta del campo de entrada futuro y el elemento que actuará como entrada.
2
Aplica el diseño automático y, a continuación, establece el flujo en horizontal. Asigna un ancho fijo a la etiqueta para que todos los nombres de los campos queden perfectamente alineados. Establece el ancho del campo de entrada en «Rellenar»: de esta forma, cuando cambies el tamaño del contenedor, el campo de entrada se ajustará automáticamente a su ancho.
3
Duplica el campo dos veces más (por ejemplo, Apellido y Correo electrónico).
4
Seleccione los tres campos, agrúpelos y vuelva a aplicar el diseño automático. Establezca el ancho del grupo en Rellenar. Ahora, cuando cambie el tamaño del contenedor del formulario, los campos del interior se ajustarán automáticamente.
El formulario está listo. Añade tantos campos como necesites y coloca el botón Enviar debajo, igual que el que hemos creado anteriormente.
Creación de un diseño «fluido» con el diseño automático
El diseño automático permite crear páginas web completas con un espaciado que se ajusta automáticamente. Se empieza por establecer la distancia entre el título y la descripción, y luego se añade espaciado debajo de la imagen, el botón y el resto del marco. Paso a paso, se obtiene un diseño totalmente automatizado en Figma.
Al crear cualquier diseño, resulta muy práctico que el contenido se adapte automáticamente a diferentes tamaños de pantalla. Esto es lo que a menudo se conoce como diseño responsivo. Para lograrlo, necesitamos crear un diseño fluido.
Para este ejemplo, tomemos nuestra ficha de producto, dupliquémosla dos veces y alineemos las tres fichas en una cuadrícula. De este modo, se adaptarán al ancho del marco.
1
Primero, crea un marco y, a continuación, añade una cuadrícula de 12 columnas.
2
Añade tres tarjetas de producto y colócalas de manera que cada una ocupe cuatro columnas.
3
Para cada contenedor de tarjetas, establezca el ancho en Rellenar para que las tarjetas se estiren cuando cambie el tamaño del contenedor principal.
4
Para el contenedor que contiene las tres tarjetas, establece un ancho fijo. En la configuración de Restricciones, elige la opción «L + R» para que el diseño se estire con el ancho del marco.
Ahora puedes sustituir o añadir rápidamente cualquier elemento, e incluso cambiar el tamaño del marco principal. Todos los elementos se ajustarán automáticamente a su anchura.
Ten en cuenta que en Figma, el ancho y las restricciones de un elemento están conectados, y algunas combinaciones no funcionarán juntas.
Si estableces el ancho de un marco de diseño automático en «Ajustar al contenido», se redimensionará en función del contenido que haya dentro. Pero si una capa dentro de ese marco utiliza restricciones «Izquierda + Derecha», se estirará de un lado al otro del contenedor principal. Esos dos ajustes se contradicen entre sí: en el primer caso, el contenido determina el tamaño, y en el segundo, lo hace el contenedor. Cuando eso ocurre, Figma dará prioridad automáticamente a uno de los ajustes.
Si necesitas que un elemento se estire junto con su marco principal (como en el ejemplo anterior con las tarjetas de productos), primero dale al elemento un ancho fijo. A continuación, puedes habilitar las restricciones «Izquierda + Derecha», y se redimensionará correctamente junto con el principal.
Si estableces el ancho de un marco de diseño automático en «Ajustar al contenido», se redimensionará en función del contenido que haya dentro. Pero si una capa dentro de ese marco utiliza restricciones «Izquierda + Derecha», se estirará de un lado al otro del contenedor principal. Esos dos ajustes se contradicen entre sí: en el primer caso, el contenido determina el tamaño, y en el segundo, lo hace el contenedor. Cuando eso ocurre, Figma dará prioridad automáticamente a uno de los ajustes.
Si necesitas que un elemento se estire junto con su marco principal (como en el ejemplo anterior con las tarjetas de productos), primero dale al elemento un ancho fijo. A continuación, puedes habilitar las restricciones «Izquierda + Derecha», y se redimensionará correctamente junto con el principal.
Cómo ignorar las propiedades de diseño automático (posicionamiento absoluto)
¿Qué pasa si necesitas añadir un pequeño elemento, como una etiqueta de descuento o un botón «Añadir a favoritos», dentro de una ficha de producto que utiliza el diseño automático?
En este caso, la solución es la configuración de posicionamiento absoluto. Te permite colocar libremente un elemento dentro de un marco de diseño automático, ignorando las reglas de diseño aplicadas a los demás elementos. Esta opción estará disponible una vez que habilites «Ignorar diseño automático».
Veamos más de cerca un ejemplo en el que necesitamos añadir una pequeña etiqueta de descuento a la ficha de un producto.
1
Primero, crea la etiqueta de descuento.
2
Añádalo a la ficha del producto. Si simplemente lo suelta dentro del marco de diseño automático, se reajustará según las reglas de diseño existentes y aparecerá en algún lugar entre los demás elementos.
3
Habilita «Ignorar diseño automático». Ahora puedes colocar la etiqueta donde quieras.
La configuración de posicionamiento absoluto anula el diseño automático, lo que te permite colocar elementos donde quieras, por ejemplo, justo encima de la imagen del producto.
Preguntas frecuentes: Matices principales del uso del diseño automático
Cómo eliminar todos los diseños automáticos
Puede eliminar el diseño automático utilizando el mismo botón de la barra de herramientas que utilizó para aplicarlo. También puede utilizar el atajo de teclado Mayús + Opción + A en Mac o Mayús + Alt + A en Windows. Esto cambia el marco de diseño automático a un marco normal.
Si luego desea desagrupar elementos individuales que están agrupados, puede utilizar el atajo Cmd/Ctrl + Mayús + G.
Cuándo utilizar el diseño automático
- Necesitas elementos para mantener un espaciado uniforme. Ejemplo: un botón con iconos y texto.
- Debe actualizar el contenido con regularidad. Ejemplo: una lista de servicios con un número variable de elementos.
- Tu diseño debe ser totalmente adaptable a diferentes tamaños de pantalla. Ejemplo: Diseñar una página con versiones para ordenador y móvil.
- A menudo modificas la estructura. Ejemplo: elementos del menú que añades o eliminas con frecuencia.
- Utilizas muchos elementos de diseño repetitivos. Ejemplo: encabezados y pies de página que aparecen en varias páginas.
¿Por qué la opción «Rellenar contenedor » está disponible para algunos elementos pero no para otros?
La opción de cambio de tamaño del contenedor de relleno solo aparece para los elementos colocados dentro de un marco de diseño automático. Esto se debe a que «Rellenar contenedor» indica al elemento secundario que crezca o se reduzca según la lógica del diseño automático principal.
No se puede configurar «Rellenar contenedor» en un marco de nivel superior ni en ningún elemento que no se encuentre dentro de un marco de diseño automático, ya que no hay ningún elemento principal de diseño automático cuyo espacio pueda «rellenar» el elemento.
Cuándo no utilizar el diseño automático
El diseño automático no siempre es necesario. Por ejemplo, si estás creando algo sencillo, como un banner único que no piensas reutilizar, no es necesario configurar reglas automáticas de espaciado o diseño. Solo tienes que colocar el título y la imagen dentro del marco una vez a distancias fijas. Configurar el diseño automático para un diseño que nunca vas a modificar ni repetir no ofrece ninguna ventaja real.
Un banner sencillo como este realmente no necesita Auto Layout.
Si te ha gustado el artículo, compártelo con tus amigos. Gracias.
Lea también:
Libro de texto gratuito sobre cómo diseñar, configurar y ejecutar páginas de destino de alta conversión
Guía práctica gratuita de animación web con ejemplos y técnicas,
y consejos para utilizarlos
