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 puede editar 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, ahorrando tiempo y haciendo que tus diseños sean responsivos y adaptables.
Los elementos en un marco con disposición automática se organizan automáticamente en un marco basado en la dirección, el espaciado, el margen interior, 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 automáticamente sin necesidad de un reposicionamiento manual.
Utiliza la disposición automática para crear diseños adaptables, como los siguientes:
- Botones que se expanden o contraen al editar la etiqueta de texto
- Listas que se adaptan a medida que se agregan, eliminan u ocultan elementos
- Cajas bento y paneles
- Una página web que se adapta a diferentes tamaños de pantalla
Agrega disposición automática
Para comenzar a usar la disposición automática en los diseños, selecciona una o varias capas y presiona ⇧ Shift A o haz clic en Agregar disposición automática en la barra lateral derecha. Figma intentará determinar qué flujo de disposición automática (vertical, horizontal o 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: varios elementos de una lista en una lista de tareas pendientes o publicaciones dentro de un feed de noticias o una 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 íconos en un menú de navegación móvil.
Cuando tengas seleccionada la opción horizontal, la opción Envolver estará disponible. La función para envolver empuja 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.
Cuadrícula beta abierta
🚧 La opción de cuadrícula para la disposición automática está actualmente en versión 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 errores o problemas de rendimiento durante la versión beta.
La opción de Cuadrícula coloca objetos en columnas y filas, lo cual te permite crear galerías, cajas bento y disposiciones de panel que se adaptan y redimensionan a diferentes tamaños de marco.
A diferencia de la configuración de ajuste para flujos horizontales y verticales, los objetos en una cuadrícula no se ajustan a la siguiente línea. En su lugar, se colocan en una “cuadrícula” y pueden extenderse a través de múltiples filas o columnas.
Los marcos con disposición automática de la cuadrícula también tendrán propiedades adicionales, como el redimensionamiento de columnas y filas, la extensión y más.
Aprende cómo utilizar el flujo de disposición automática de la cuadrícula.
Ajusta las propiedades de espaciado
Los tipos de propiedades disponibles en tu marco con 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 margen interior es el espacio vacío o en blanco entre el borde de un marco con disposición automática y sus objetos. Puedes configurar el margen interior de manera uniforme, vertical y horizontal, o tener valores diferentes para el margen interior superior, derecho, inferior e izquierdo.
Espacio entre es la distancia o distribución entre objetos en un marco con disposición automática. Utiliza un valor numérico para especificar exactamente qué tan separados deseas que estén los objetos. O bien, para los marcos con disposición automática vertical y horizontal, también tienes la opción de establecer el espacio entre objetos en Automático para que los objetos tengan la mayor distancia posible entre sí.
Consejo: Para obtener más información sobre las propiedades específicas de cada flujo de disposición automática, revisa los artículos de ayuda correspondientes:
Ajusta la capacidad de respuesta con el cambio de tamaño
Nota: Mientras la cuadrícula esté en versión beta, la opción de cuadrícula puede estar limitada en cuanto a las 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 la configuración y los objetos circundantes mediante la propiedad de redimensionamiento. Puedes configurar el comportamiento de redimensionamiento en un marco con disposición automática para determinar cómo se ajusta su tamaño 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.
|
Cambiar el tamaño de la propiedad |
Puede aplicarse a… |
Comportamiento de las dimensiones |
|---|---|---|
|
Marcos con disposición automática |
El tamaño del objeto cambia en función de sus objetos secundarios |
|
|
Objetos secundarios de marcos con disposición automática |
El objeto ocupa todo el espacio disponible |
|
|
Ambos |
El objeto permanece fijo |
|
|
Ambos |
El objeto es igual o superior al mínimo |
|
|
Ambos |
El objeto es igual o inferior al máximo |
Ajustar al contenido
Utiliza ajustar al contenido en cualquier marco con disposición automática, para mantener las dimensiones lo más pequeñas posibles alrededor de los objetos secundarios, respetando cualquier valor de espaciado.
Por ejemplo, supongamos que tienes una capa de texto de 40px de ancho dentro de un marco que utiliza la disposición automática. El margen interior del marco se establece en 10px en los lados izquierdo y derecho. Dado que su redimensionamiento está configurado para ajustarse al contenido, el ancho del marco es de 60px. Si la capa de texto se actualiza y ahora tiene 50px de ancho, entonces el ancho del marco se ajustará a 70px.
La función ajustar al contenido solo se puede aplicar a marcos con disposición automática.
Consejo: Haz doble clic en el borde vertical u horizontal del cuadro delimitador de un objeto con disposición automática para establecerlo en Ajustar al contenido.
Nota: Si algún objeto secundario dentro de un marco con disposición automática se establece en Rellenar contenedor, el marco principal ya no ajustará el contenido y se volverá a establecer en Fijo para el eje.
Ajustar al contenedor
Las capas configuradas en ajuste al contenedor se expanden para ocupar todo el espacio disponible en su marco principal, respetando los valores de espaciado.
El ajuste al contenedor solo se puede aplicar a los objetos secundarios de los marcos con disposición automática y no está disponible para los marcos de nivel superior.
Los objetos secundarios de un marco con disposición automática también se establecerán en ajuste al contenedor si se redimensionan manualmente para ocupar todo el espacio disponible del marco principal.
Sugerencia: Mantén presionada la tecla ⌥ Option o Alt y haz doble clic en el borde vertical u horizontal del cuadro delimitador de un objeto con disposición automática para configurarlo en ajuste al contenedor.
Ancho o alto fijo
Establece un ancho o alto fijo en una capa para asegurar que sus dimensiones permanezcan constantes e inalteradas, sin importar los cambios en los valores de espaciado circundante y en los objetos secundarios, principales o iguales.
La función Fijo se puede aplicar a cualquier marco con disposición automática y sus elementos secundarios.
Si redimensionas manualmente una capa o especificas un valor en 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 con disposición automática y su ancho está configurado para ajustarse 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 se puede utilizar al mismo tiempo que otras propiedades de redimensionamiento.
Establece el ancho o el alto mínimos o máximos de cualquier marco con disposición automática y sus objetos secundarios.
- Abre el menú desplegable Ancho para encontrar Agregar ancho mínimo y Agregar ancho máximo
- Abre el menú desplegable de Altura para encontrar Agregar altura mínima y Agregar altura máxima
Selecciona una opción del menú desplegable Ancho o Alto. En el nuevo campo que aparece, ingresa un valor o usa el menú desplegable para aplicar una variable numérica.
Si un objeto contiene una configuración mínima o máxima, su respectivo ícono de ancho y alto ganará dos líneas, una a cada lado. Puedes pasar el cursor sobre estos íconos para obtener una vista previa de los límites de dimensión en el lienzo.
Al deseleccionar 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 ícono de ancho o alto.
Para eliminar una configuración de mínimo o máximo, abre el menú desplegable de Ancho o Alto y selecciona Eliminar mínimo y máximo.
Ignorar la disposición automática
Nota: Ignorar la disposición automática se conocía anteriormente como posición absoluta. La función tiene un nuevo nombre, pero su funcionamiento no ha cambiado.
Un objeto con la opción Ignorar disposición automática habilitada no se incluye en un flujo con disposición automática y se mantiene en el marco con disposición automática. El objeto y sus objetos iguales circundantes se ignoran entre sí, incluso cuando cambian de tamaño y se mueven.
Al igual que la posición absoluta en CSS, un objeto que ignora la disposición automática se puede colocar precisamente donde desees en relación con su contenedor padre.
Los objetos con la función omitir disposición automática habilitada se tratan como objetos en un marco regular. Esto significa que puedes aplicar restricciones para determinar cómo responden cuando su marco principal con disposición automática cambia de tamaño. Otras opciones de configuración de disposición automática, como el cambio de tamaño y las opciones de disposición, no están disponibles para estos objetos.
Puedes hacer que un objeto ignore el flujo de disposición automática al realizar una de las siguientes acciones:
- Selecciona un objeto secundario de un marco con disposición automática y haz clic en el panel derecho
- Arrastra un objeto a un marco con disposición automática mientras pulsas ⌃ Control.
Anidar marcos con disposición automática
El verdadero poder de la capacidad de respuesta de la disposición automática se manifiesta al combinar comportamientos de redimensionamiento en marcos con disposición automática anidados.
El anidamiento se refiere al acto de colocar una capa dentro de otra, como colocar un botón dentro de un componente o una forma dentro de un marco.
Anidar un marco con disposición automática dentro de otro marco con disposición automática te permite combinar opciones de disposición automática horizontales, verticales y de cuadrícula para crear interfaces complejas. Los marcos anidados tendrán propiedades principales y secundarias, cada marco con su propio margen interior y valores de separación, lo que nos permite 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 funciones
Constraints
No puedes aplicar restricciones a objetos hijos en un marco con disposición automática, a menos que el objeto ignore el flujo de disposición automática. En su lugar, puedes emplear 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.
Aún puedes aplicar restricciones al marco con disposición automática si está anidado dentro de un marco regular. Aparecerá la sección Restricciones y las opciones de cambio de tamaño, lo que te permitirá establecer tanto las restricciones para el marco con disposición automática como el comportamiento de cambio de tamaño para cualquier objeto dentro de él.
Por ejemplo: Supongamos que tenemos una aplicación para registrar hábitos, donde cada hábito tiene una pantalla de analítica que incluye un calendario con el historial de finalización de hábitos y un panel en la parte inferior para notas en cualquier día dado. Esta pantalla utiliza la disposición automática, pero el panel de notas no sigue el flujo de la disposición automática. Podemos usar las restricciones Inferior y Izquierda y derecha para asegurarnos de que el panel de notas responda correctamente cuando se redimensiona su marco principal.
Más información sobre las restricciones.
Componentes e instancias
Como los componentes son marcos, puedes agregarles una disposición automática. Deberás agregar una disposición automática a cada componente. Actualmente, no hay una forma de añadir la disposición automática de forma masiva.
| Acción | Componente principal | Instancia |
| Ajustar el relleno vertical y horizontal | ✓ | ✓ |
| Ajustar el espacio entre elementos | ✓ | ✓ |
| Reordenar capas | ✓ | ✕ |
| Agregar nuevas capas | ✓ | ✕ |
| Borrar o eliminar capas | ✓ | (Solo oculta la capa) |
¿Deseas agregar íconos a las instancias? Recomendamos agregar un ícono de marcador de posición, con 0 % de opacidad, al componente principal. Luego, puedes cambiar el ícono por otro componente de tu biblioteca.
Prototipos con disposición automática
Hay algunas cuestiones para tener en cuenta a la hora de crear prototipos con disposición automática.
Las transiciones de animación inteligente no tienen en cuenta el fondo de un marco. Si deseas emplear una transición de desplazamiento hacia adentro o movimiento hacia dentro con Animación inteligente, deberás agregar un fondo. Puedes crear un rectángulo dentro de un marco regular y colocar tu marco con disposición automática dentro de este. Obtén más información sobre las transiciones de desplazamiento hacia adentro y movimiento hacia dentro.
Para aplicar el desbordamiento de desplazamiento a un marco, debes tener contenido que se extienda más allá de los límites del marco.
Como las dimensiones de un elemento principal con disposición automática están determinadas por el contenido, se cambiará su tamaño para que se adapte a los objetos. Para replicar el desbordamiento de desplazamiento, deberás colocar la disposición automática dentro de un marco normal.
Nota: La vista de presentación admite el desplazamiento de marcos largos de forma predeterminada. Solo tendrás que emplear esta solución alternativa cuando desees recortar contenido.
Capas de texto, altura máxima y líneas máximas
Las capas de texto no pueden tener un alto máximo y un número determinado de líneas máximas. Si se agrega una altura máxima, las líneas máximas se establecerán en Automático. Al establecer las líneas máximas en un número, se eliminará la configuración de alto máximo de la capa.
Obtén más información sobre las líneas máximas.
Redimensionamiento de texto
Las capas de texto también tienen sus propias propiedades de cambio de tamaño. Dentro de un marco con disposición automática, esto puede producir algunos resultados útiles.
Si deseas que tus marcos con disposición automática sean completamente fluidos, te recomendamos no emplear 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 con disposición automática.
Obtén más información sobre el cambio de tamaño del texto.
Guía de atajos de teclado
Atajos básicos
|
Acción |
Mac |
Windows |
|---|---|---|
|
Agrega disposición automática |
⇧ Shift A |
⇧ Shift A |
|
Sugerir disposición automática |
Ctrl ⇧ Shift A |
Ctrl Alt ⇧ Shift A |
|
Eliminar disposición automática |
⌥ Option ⇧ Shift A |
Alt ⇧ Shift A |
|
Editar margen interior en todos los lados (desde el panel derecho) |
⌘ Command + clic en el campo de entrada del margen interior |
Ctrl + clic en el campo de entrada del margen interior |
Desde el cuadro de alineación
Haz clic en el cuadro de alineación en el panel derecho y presiona las siguientes teclas para hacer lo siguiente:
|
Acción |
Mac y Windows |
|---|---|
|
Configurar la alineación |
↓ / → / ← / ↑ |
|
Ajustar la alineación al borde |
W / A / S / D |
|
Alternar la alineación de la línea de base |
B |
|
Alternar espacio entre elementos |
X |
Desde el lienzo
Usa estos atajos de teclado mientras arrastras los puntos de control en el lienzo para:
|
Acción |
Mac |
Windows |
|---|---|---|
|
Colocar el margen interior en los lados opuestos |
⌥ Opción |
Alt |
|
Colocar el margen interior en todos los lados |
⌥ Option⇧ Shift |
Alt⇧ Shift |
|
Establecer el margen interior o el espaciado con un desplazamiento grande |
⇧ Shift |
⇧ Shift |
Usa estos atajos de teclado y haz clic en áreas específicas en un marco con disposición automática para:
|
Acción |
Mac |
Windows |
|---|---|---|
|
Ingresar el valor del margen interior en lados opuestos |
⌥ Option + clic en el área de margen interior |
Alt + clic en el área de margen interior |
|
Ingresar el valor del margen interior en todos los lados |
⌥ Option⇧ Shift + clic en el área de margen interior |
Alt⇧ Shift + clic en el área de margen interior |
|
Establecer el ajuste al contenido |
Haz doble clic en el borde vertical u horizontal. |
Haz doble clic en el borde vertical u horizontal. |
|
Establecer el ajuste al contenedor |
⌥ 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
¿Todo 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 comenzar 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 crear componentes y pantallas totalmente adaptables.
Proyectos y aprendizaje práctico
-
Lista de tutoriales de Figma: Aprende a crear diseños y componentes flexibles
Esta lista incluye tutoriales en video que cubren los conceptos básicos de 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: Archivo de á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
Obtén una copia del archivo de área de pruebas de disposición automática de cuadrícula para practicar mientras aprendes. -
Proyecto: Crea una tarjeta adaptable con disposición automática y restricciones
En este proyecto, aprenderás a diseñar una tarjeta adaptable para una aplicación de pódcast, utilizando disposición automática, restricciones, componentes y herramientas de forma.