Guía de disposición automática
Antes de empezar
Quién puede utilizar esta función
Disponible en todos los planes
Disponible en Figma Design y Figma Sites. También puedes acceder a la disposición automática desde el modo de diseño en Figma Slides y Figma Buzz.
Cualquier persona con acceso de edición a un archivo puede usar la disposición automática
La disposición automática se puede aplicar a los marcos para que los diseños respondan de manera dinámica a los cambios de contenido, ahorrándole tiempo y haciendo que sus diseños sean responsivos y adaptables.
Los elementos en un marco de disposición automática se organizan automáticamente en un marco según la dirección, el espaciado, el relleno, la alineación y otras propiedades de disposición automática. Cuando el contenido cambia o se agregan, eliminan o redimensionan elementos, la disposición se ajusta sin necesidad de reposicionamiento manual.
Utiliza la disposición automática para crear diseños adaptativos, como:
- Botones que crecen o se reducen según editas la etiqueta de texto
- Listas que se adaptan a medida que se añaden, eliminan u ocultan elementos
- Cajas bento y paneles de control
- Una página web que se adapta a distintos tamaños de pantalla
Añadir diseño automático
Para empezar a usar la disposición automática en los diseños, selecciona una o más capas y pulsa ⇧ Shift A o haz clic en Añadir disposición automática desde la barra lateral derecha. Figma intentará determinar qué flujo de disposición automática —vertical, horizontal o de cuadrícula— deseas usar. Puedes cambiar a un flujo diferente en cualquier momento.
Obtén más información sobre cómo alternar la disposición automática en los diseños.
Elige un flujo de disposición automática
Una vez que se está utilizando la disposición automática en un marco, puedes elegir entre tres opciones para determinar el flujo y la disposición de los objetos en el marco:
- Vertical
- Horizontal
- Cuadrícula
Horizontal y vertical
La opción Vertical coloca los objetos en tu marco a lo largo del eje Y. Cualquier objeto que agregues, elimines o reordenes seguirá el eje Y. Por ejemplo: múltiples elementos de una lista de tareas pendientes, o publicaciones dentro de un feed de noticias o línea de tiempo.
La opción Horizontal coloca los objetos en tu marco a lo largo del eje X. Cualquier objeto que agregues, elimines o reordenes seguirá el eje X. Por ejemplo: una fila de botones o iconos en un menú de navegación móvil.
Cuando tengas seleccionada la opción horizontal, Ajustar estará disponible. Ajustar inserta cualquier objeto que se desborde a la siguiente línea en tu marco.
Las opciones de disposición automática horizontal y vertical también tienen propiedades adicionales como redimensionamiento, espaciado, alineación y más.
Obtén más información sobre los flujos de disposición automática horizontal y vertical.
Beta abierta de cuadrícula
🚧 La opción de cuadrícula para la disposición automática está actualmente en beta abierta. Es posible que algunas funciones y configuraciones aún no estén disponibles para la cuadrícula. La función puede cambiar y podrías experimentar bugs o problemas de rendimiento durante el período beta.
La opción Cuadrícula coloca objetos en columnas y filas, y te permite crear galerías, cajas bento y diseños de panel que se adaptan y redimensionan a diferentes tamaños de marco.
A diferencia de la configuración de ajuste para los flujos horizontales y verticales, los objetos en una cuadrícula no se ajustan en la siguiente línea. En su lugar, se colocan en una «cuadrícula» y tienen la opción de abarcar varias filas o columnas.
Los marcos de disposición automática de cuadrícula también tendrán propiedades adicionales como redimensionamiento de columnas y filas, extensión y otras.
Aprende cómo utilizar el flujo de disposición automática de cuadrículas.
Ajusta las propiedades de espaciado
Los tipos de propiedades disponibles en tu marco de disposición automática dependerán del flujo de disposición automática que se esté utilizando. Sin embargo, todos los flujos comparten un par de propiedades clave de espaciado:
El espaciado es el espacio vacío o en blanco entre el borde de un marco de disposición automática principal y sus objetos. Puedes configurar el espaciado de manera uniforme, vertical y horizontal, o tener valores diferentes para el espaciado superior, derecho, inferior e izquierdo.
El espacio entre es la distancia o distribución entre objetos en un marco de disposición automática. Utiliza un valor numérico para especificar exactamente a qué distancia quieres que estén los objetos. Para los marcos de disposición automática verticales y horizontales, también tienes la opción de establecer el espacio entre los elementos en Auto para que los objetos tengan la mayor distancia posible entre sí.
Consejo: para ver más información más sobre las propiedades específicas de cada flujo de disposición automática, consulta sus respectivos artículos de ayuda:
Ajusta la capacidad de respuesta mediante el redimensionamiento
Nota: Mientras la cuadrícula esté en versión beta, la opción de cuadrícula puede estar limitada en propiedades de redimensionamiento y funcionalidad.
Una de las funciones más potentes de la disposición automática es su capacidad para permitir que los objetos ajusten sus dimensiones a las configuraciones y objetos circundantes mediante la propiedad de redimensionamiento. Puede establecer el comportamiento de redimensionamiento en un marco de disposición automática principal para determinar cómo se ajusta en función de los cambios realizados en su contenido, y viceversa.
Los ajustes de redimensionamiento se pueden aplicar en los ejes X e Y utilizando los menús desplegables de ancho y alto en el panel derecho.
Cuando pasas el cursor sobre una opción de cambio de tamaño del menú desplegable, aparecen líneas en el lienzo para indicar cómo se redimensionará y cambiará el cuadro delimitador del diseño.
|
Redimensionar la propiedad |
Puede aplicarse a… |
Comportamiento de la dimensión |
|---|---|---|
|
Marcos de disposición automática |
El objeto se redimensiona según sus objetos secundarios |
|
|
Objetos secundarios de los marcos de disposición automática |
El objeto ocupa todo el espacio disponible |
|
|
Ambos |
El objeto se mantiene fijo |
|
|
Ambos |
El objeto es igual o superior al mínimo |
|
|
Ambos |
El objeto es igual o menor que el máximo |
Ajustar al contenido
Utiliza ajustar al contenido en cualquier marco de disposición automática, para que mantenga las dimensiones más pequeñas posibles alrededor de sus objetos mientras respeta cualquier valor de espaciado.
Por ejemplo, supongamos que tienes una capa de texto de 40 px de ancho dentro de un marco que utiliza disposición automática. El espaciado del marco se establece en 10 px en los lados izquierdo y derecho. Dado que su redimensionamiento está configurado para ajustarse al contenido, el ancho del marco es de 60 px. Si la capa de texto se actualiza y ahora tiene 50 px de ancho, entonces el ancho del marco cambiará a 70 px.
El ajuste al contenido solo se puede aplicar a marcos de disposición automática.
Sugerencia: haz doble clic en el borde vertical u horizontal del cuadro de límite de un objeto de disposición automática para configurarlo como Ajustar al contenido.
Nota: Si algún objeto secundario dentro de un marco de diseño automático está configurado como Rellenar contenedor, el marco principal ya no se ajustará al contenido y pasará a ser fijo para el eje.
Llenar el contenedor
Las capas configuradas para Rellenar contenedor se expanden para ocupar todo el espacio disponible en su marco principal, respetando los valores de espaciado.
El relleno del contenedor solo se puede aplicar a los objetos secundarios de los marcos de disposición automática y no está disponible para los marcos de nivel superior.
Los objetos secundarios de un marco de diseño automático también se establecerán en Rellenar contenedor si se redimensionan manualmente para que ocupen todo el espacio disponible del marco principal.
Consejo: mantén pulsadas ⌥ Option o Alt y haz doble clic en el borde vertical u horizontal del cuadro de límite de un objeto de disposición automática para configurarlo como Rellenar contenedor.
Ancho o alto fijo
Establece un ancho o alto fijo en una capa para asegurarte de que sus dimensiones permanezcan fijas e inalteradas, independientemente de los cambios en los valores de espaciado circundante y en los objetos secundarios, principales o hermanos.
Fijo se puede aplicar a cualquier marco de disposición automática y a sus elementos secundarios.
Si redimensionas manualmente una capa o especificas un valor para su campo de ancho o alto, la propiedad de redimensionamiento se establecerá como fija en el eje correspondiente.
Por ejemplo, supongamos que tienes un componente de botón que utiliza disposición automática y su ancho está configurado para ajustar al contenido. Si introduces un valor como 125 en el campo de ancho, la propiedad de redimensionamiento cambiará a Ancho fijo.
Dimensiones mínimas y máximas
Nota: Las dimensiones mínimas y máximas son una configuración adicional que puede utilizarse simultáneamente con otras propiedades de redimensionamiento.
Establece la anchura y la altura mínimas o máximas de cualquier marco de disposición automática y sus elementos secundarios.
- Abre el menú desplegable Anchura para encontrar Añadir anchura mínima y Añadir anchura máxima
- Abre el menú desplegable de Altura para encontrar Añadir altura mínima y Añadir altura máxima
Selecciona una opción del menú desplegable Anchura o Altura. En el nuevo campo que aparece, introduce un valor o utiliza el menú desplegable para aplicar una variable numérica.
Si un objeto contiene una configuración mínima o máxima, su respectivo icono de anchura o altura ganará dos líneas, una a cada lado. Puedes pasar el cursor sobre estos iconos para obtener una vista previa de los límites de dimensión en el lienzo.
Al cancelar la selección y volver a seleccionar un objeto, sus campos de dimensión mínima y máxima se ocultarán del panel derecho. Para volver a acceder a ellos, haz clic en el icono de anchura o altura.
Para eliminar una configuración de mínimo o máximo, abre el menú desplegable de Anchura o Altura y elige Eliminar mínimo y máximo.
Ignorar el diseño automático
Nota: Ignorar disposición automática antes se conocía como posición absoluta. La función tiene un nuevo nombre, pero sigue funcionando igual.
Un objeto con Ignorar disposición automática habilitado se excluye de un flujo de disposición automática mientras se mantiene en el marco de disposición automática. El objeto y los hermanos que lo rodean se ignoran, incluso cuando cambian de tamaño y se mueven.
Al igual que la posición absoluta en CSS, un objeto que ignora el diseño automático se puede colocar precisamente donde desee en relación con su contenedor principal.
Los objetos con la opción Omitir disposición automática habilitada se tratan como objetos de un marco normal. Esto significa que puedes aplicar restricciones para determinar cómo responden cuando se cambia el tamaño de su marco de diseño automático principal. Otras opciones de configuración de diseño automático, como el cambio de tamaño y las opciones de diseño, no están disponibles para estos objetos.
Puedes hacer que un objeto ignore el flujo de diseño automático realizando una de las siguientes acciones:
- Selecciona un elemento secundario de un marco de diseño automático y haz clic en el panel derecho
- Arrastra un objeto a un marco de disposición automática mientras pulsas ⌃ Control.
Anidar marcos de diseño automático
El verdadero poder de la capacidad de respuesta de la disposición automática se manifiesta al combinar comportamientos de redimensionamiento en marcos de disposición automática anidados.
El anidamiento se refiere al acto de colocar una capa dentro de otra capa, como colocar un botón dentro de un componente, o una forma dentro de un marco.
Anidar un marco de disposición automática dentro de otro marco de disposición automática permite combinar opciones de disposición automática horizontal, vertical y de cuadrícula para crear interfaces complejas. Los marcos anidados tendrán propiedades de principal y de secundario, cada marco con su propio espaciado y valores de separación, lo que nos permitirá crear diseños multidimensionales con elementos que fluyen en diferentes direcciones y disposiciones.
Aprende a crear flujos de disposición automática multidimensionales.
Consideraciones sobre otras características
Restricciones
No puede aplicar restricciones a objetos secundarios en un marco de diseño automático, a menos que el objeto ignore el flujo de diseño automático. En su lugar, puedes utilizar la propiedad de cambio de tamaño para definir cómo responden los objetos a medida que el marco o los objetos en el marco cambian de tamaño.
Sigues pudiendo aplicar restricciones al marco de diseño automático si está anidado dentro de un marco regular. Aparecerá la sección Limitaciones y las opciones de cambio de tamaño, lo que te permitirá establecer tanto las limitaciones para el marco de diseño automático como el comportamiento de cambio de tamaño para cualquier objeto dentro del mismo.
Por ejemplo: supongamos que tenemos una aplicación para registrar hábitos, donde cada hábito tiene una pantalla de análisis que incluye un historial de calendario de las finalizaciones de hábitos y un panel en la parte inferior para notas en cualquier día. Esta pantalla utiliza la disposición automática, pero el panel de notas ignora el flujo de la disposición automática. Podemos usar las limitaciones Inferior y Izquierda y derecha para asegurarnos de que el panel de notas responda correctamente cuando se redimensione su marco principal.
Más información sobre las limitaciones.
Componentes e instancias
Como los componentes son marcos, puedes añadirles un diseño automático. Deberás añadir un diseño automático a cada componente individualmente. Actualmente no hay una forma de añadir diseño automático de forma masiva.
| Acción | Componente principal | Instancia |
| Ajustar el relleno vertical y horizontal | ✓ | ✓ |
| Ajustar el espacio entre | ✓ | ✓ |
| Reordenar capas | ✓ | ✕ |
| Añadir nuevas capas | ✓ | ✕ |
| Borrar o eliminar capas | ✓ | (Oculta solo la capa) |
¿Deseas añadir iconos a las instancias? Recomendamos añadir un icono de marcador de posición, con 0 % de opacidad, al componente principal. A continuación, puedes cambiar el icono por otro componente de la biblioteca.
Prototipos con diseño automático
Hay algunas cosas que hay que tener en cuenta a la hora de crear prototipos con diseño automático.
Las transiciones de animación inteligente no tienen en cuenta el fondo de un marco. Si deseas utilizar una transición de deslizamiento hacia dentro o entrada con animación inteligente, deberás añadir un fondo. Puedes crear un rectángulo dentro de un marco regular y colocar tu marco de disposición automática dentro de él. Obtenga más información sobre las transiciones de deslizarse hacia dentro y entrada.
Para aplicar el desbordamiento de desplazamiento a un marco, es necesario que el contenido se extienda más allá de los límites del marco.
Como las dimensiones de un elemento principal de diseño automático están determinadas por el contenido, se redimensionará para adaptarse a los objetos. Para replicar el desbordamiento de desplazamiento, tendrás que situar el diseño automático dentro de un marco normal.
Nota: la vista de presentación admite el desplazamiento de marcos largos de forma predeterminada. Solo necesitarás usar esta solución alternativa cuando quieras recortar contenido.
Capas de texto, altura máxima y líneas máximas
Las capas de texto no pueden tener una altura máxima y un número determinado de líneas máximas. Si se añade una altura máxima, las líneas máximas se establecerán en Auto. Al establecer un número máximo de líneas, se eliminará la configuración de altura máxima de la capa.
Más información sobre las líneas máximas.
Redimensionar texto
Las capas de texto también tienen sus propias propiedades de redimensionamiento. Dentro de un marco de disposición automática, esto puede producir resultados útiles.
Si deseas que tus marcos de diseño automático sean completamente fluidos, te recomendamos que no utilices cuadros de texto de tamaño fijo. Las capas de texto de tamaño fijo no cambiarán de tamaño para adaptarse al texto, lo que puede provocar superposiciones entre las capas de un marco de diseño automático.
Más información sobre el redimensionamiento del texto.
Guía de atajos de teclado
Atajos básicos
|
Acción |
Mac |
Windows |
|---|---|---|
|
Añadir diseño automático |
⇧ Shift A |
⇧ Shift A |
|
Sugerir diseño automático |
Ctrl ⇧ Shift A |
Ctrl Alt ⇧ Shift A |
|
Eliminar el diseño automático |
⌥ Option ⇧ Shift A |
Alt ⇧ Shift A |
|
Editar espaciado en todos los lados (desde el panel derecho) |
⌘ Command + Clic en el campo de entrada de espaciado |
Ctrl + Clic en el campo de entrada de espaciado |
Desde el cuadro de alineación
Haz clic en el cuadro de alineación en el panel derecho y pulsa las siguientes teclas para:
|
Acción |
Mac y Windows |
|---|---|
|
Establecer alineación |
↓ / → / ← / ↑ |
|
Establecer la alineación en el borde |
W / A / S / D |
|
Alternar la alineación de la línea de base |
B |
|
Alternar espaciado entre |
X |
Desde el lienzo
Usa estos métodos abreviados de teclado mientras arrastras los controladores del lienzo para:
|
Acción |
Mac |
Windows |
|---|---|---|
|
Colocar el espaciado en lados opuestos |
⌥ Opción |
Alt |
|
Colocar el espaciado en todos los lados |
⌥ Option⇧ Shift |
Alt⇧ Shift |
|
Establecer el espaciado con un gran desplazamiento |
⇧ Shift |
⇧ Shift |
Utiliza estos atajos de teclado y haz clic en áreas específicas en un marco de diseño automático para:
|
Acción |
Mac |
Windows |
|---|---|---|
|
Completar el valor de espaciado en lados opuestos |
⌥ Option + Clic área de espaciado |
Alt + Click área de espaciado |
|
Completar el valor de espaciado en todos lados |
⌥ Option⇧ Shift + Clic en el área de espaciado |
Alt⇧ Shift + Clic en el área de espaciado |
|
Establecer Ajustar al contenido |
Haz doble clic en el borde vertical u horizontal |
Haz doble clic en el borde vertical u horizontal |
|
Establecer contenedor de relleno |
⌥ Option + Doble clic en el borde vertical u horizontal |
Alt + Doble clic en el borde vertical u horizontal |
Recursos
Artículos
-
Artículo: Alternar la disposición automática en un diseño
¿Listo para empezar a usar la disposición automática? Aprende a usar la disposición automática en marcos y capas para que puedas empezar a hacer que tus diseños sean adaptables. -
Artículo: Usar los flujos horizontales o verticales en la disposición automática
Aprende sobre las propiedades disponibles para los flujos horizontales y verticales en la disposición automática. -
Artículo: Usar la cuadrícula en el flujo de disposición automática
Aprende a trabajar con columnas, filas y celdas en el flujo de disposición de cuadrícula. -
Artículo: Crear flujos de disposición automática multidimensionales
Combina múltiples flujos de disposición automática para construir componentes y pantallas completamente adaptables.
Proyectos y aprendizaje práctico
-
Lista de reproducción de tutoriales de Figma: Aprende a crear diseños y componentes flexibles
Esta lista de reproducción incluye tutoriales en vídeo que cubren los conceptos básicos de la disposición automática, cómo aplicar la disposición automática a los diseños, y tutoriales prácticos para más práctica. -
Archivo de la Comunidad: Área de pruebas de disposición automática
Obtén una copia del archivo de área de pruebas de disposición automática para practicar mientras aprendes. -
Archivo de la Comunidad: Área de pruebas de cuadrícula
Consigue una copia del archivo de área de pruebas de disposición automática de Cuadrícula para practicar mientras aprendes. -
Proyecto: Crear una tarjeta adaptable con disposición automática y limitaciones
En este proyecto, aprenderás a diseñar una tarjeta adaptable para una aplicación de pódcast utilizando disposición automática, limitaciones, componentes y herramientas de formas.