Explorar las propiedades de la disposición automática

Antes de empezar

Quién puede utilizar esta función

Disponible en todos los planes.

Los usuarios con acceso de puede editar en un archivo pueden agregar disposición automática a marcos y objetos.

¿Ya estás familiarizado con las propiedades de la disposición automática? Obtén más información sobre cómo usar la disposición automática →

La disposición automática es una propiedad que se puede agregar a los marcos y componentes. Te permite crear diseños flexibles que se ajustan automáticamente al contenido, al aumentar o disminuir su tamaño según sea necesario. Esto es ideal cuando necesitas agregar nuevas capas, adaptar a cadenas de texto más largas o mantener la alineación a medida que tus diseños evolucionan.

Hay muchas maneras de usar la disposición automática:

• Crea botones que aumenten o disminuyan su tamaño a medida que editas la etiqueta de texto.
• Crea listas que se adapten a medida que se agregan, eliminan u ocultan elementos.
• Combina marcos con disposición automática para crear interfaces completas.

La disposición automática es una función poderosa con muchas partes dinámicas y usos. En este artículo, analizaremos cómo funcionan los diferentes aspectos de la disposición automática. 

Los marcos con disposición automática tienen propiedades diferentes a las de los marcos normales. Cuando apliques la disposición automática, verás algunos cambios en la barra lateral derecha.

No puedes hacer lo siguiente para modificar automáticamente la disposición de los marcos:

• 🚫 Agregar cuadrículas de disposición a ese marco.
• 🚫 Aplicar restricciones a cualquier objeto dentro de un marco con disposición automática, a menos que el objeto tenga activada la posición absoluta.
• 🚫 Usar la selección inteligente en cualquier objeto dentro del marco.

Flujo de la disposición

Dirección

La dirección determina el flujo del marco con disposición automática.

• Vertical: agrega, elimina y reordena objetos a lo largo del eje y. Por ejemplo: objetos dentro de una lista o publicaciones dentro de un feed o línea de tiempo.
• Horizontal: agrega, elimina y reordena objetos a lo largo del eje x. Por ejemplo: una fila de botones o íconos en un menú de navegación móvil.
• Ajuste automático: organiza objetos en varias filas y columnas en un marco. El flujo de los objetos será horizontal y estos pasarán a la línea siguiente. Por ejemplo: galerías de fotos o un conjunto de etiquetas.

Orden de apilamiento del lienzo

Cuando varias capas tienen un espacio negativo que crea una pila, el último objeto (ya sea el que está más a la derecha o más abajo) en la pila estará arriba de forma predeterminada.

Puedes cambiar el orden visual de la pila como se ve en el lienzo.

Con el marco con disposición automática seleccionado, haz clic en en la barra lateral derecha para abrir la configuración avanzada de disposición automática. Junto al apilamiento de lienzos, selecciona lo siguiente:

• Primero arriba: la primera capa de la pila estará arriba.
• Último arriba: la última capa en la pila estará arriba.

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 mientras lo mantiene en el marco con disposición automática. El objeto y sus objetos hermanos 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 con disposición automática padre cambia de tamaño. Otras configuraciones y propiedad de disposición automática no están disponibles para los objetos que ignoran la disposición automática.

Puedes hacer que un objeto ignore el flujo de disposición automática al realizar una de las siguientes acciones:

• Selecciona un objeto hijo de un marco con disposición automática y haz clic en la barra lateral derecha.
• Arrastra un objeto a un marco con disposición automática mientras pulsas ⌃ Control .

Espaciamiento

Espacio entre elementos

Usa espacio entre elementos para definir la distancia, o distribución, entre los objetos de un marco con disposición automática.

El espacio entre elementos tiene dos configuraciones distintas:

• Automático: establece el espacio entre objetos para que sea la mayor posible. Escribe Automático en el campo o selecciónalo del menú desplegable.
• Un espacio especificado: especifica la distancia entre la que deseas que estén los objetos. Ingresa un valor en el campo, desplaza los valores con las teclas de flecha o arrastra el cursor sobre el campo.

Para alternar rápidamente entre estas dos configuraciones, haz clic en el cuadro de alineación y presiona X.

Si la dirección del marco con disposición automática está configurada en vertical u horizontal, podrás establecer el espacio entre los elementos de forma vertical u horizontal, respectivamente. Si la dirección del marco está configurada en ajustar automáticamente, podrás ajustar tanto el espacio horizontal como vertical entre los elementos.

Margen interior

El margen interior controla el espacio vacío o en blanco entre el límite de un marco con disposición automática y los objetos hijos del marco. Puedes configurar el margen interior de manera uniforme, vertical y horizontal, o tener valores diferentes para el margen interior superior, derecho, inferior e izquierdo.

Ajusta el margen interior con los controles del lienzo o campos de espaciado en la barra lateral derecha.

Para acceder a los puntos de control del lienzo, selecciona un marco con disposición automática y coloca el cursor sobre él. Aparecerán puntos de control de color rosa, similares a los de la selección inteligente.

• Haz clic en los puntos de control para abrir los campos de entrada e ingresar un valor numérico.
• O bien, haz clic y arrastra el punto de control para cambiar el espaciado.

Los controles del margen interior en la barra lateral derecha están separados en margen interior vertical (superior e inferior) y horizontal (izquierdo y derecho) de forma predeterminada.

• Para establecer el margen interior individual, haz clic en para usar los campos de margen interior superior, derecho, inferior e izquierdo.
• Para establecer un margen interior uniforme o usar la abreviatura CSS, mantén pulsado el botón ⌘ Command o Control y haz clic en cualquier campo del margen interior. También puedes escribir la abreviatura CSS. Por ejemplo, al ingresar 1,2,3,4, se establecen los valores superior, derecho, inferior e izquierdo en 1, 2, 3 y 4 respectivamente. Al ingresar 1,2, se establecen los valores en superior/inferior: 1 e izquierda/derecha: 2.

Trazos en la disposición

De forma predeterminada, los trazos no se tienen en cuenta al calcular el tamaño de los objetos y, por lo tanto, no afectan a su marco padre ni a los objetos hermanos circundantes.

Esto puede no ser ideal durante la entrega al desarrollador, ya que no representa con precisión cómo CSS representa los bordes.

Elige si los trazos ocuparán espacio en un marco con disposición automática al visitar la configuración avanzada de la disposición automática y usar el menú desplegable junto a trazo para seleccionar se incluye en la disposición o no se incluye en la disposición.

Alineación

Configurar la alineación en objetos hijos

Elige cómo alinear los objetos hijos dentro de un marco con disposición automática. Tanto la dirección del marco con disposición automática como la distribución, o el espacio entre los elementos, determinarán las opciones de alineación que tienes disponibles.

A diferencia de los objetos en un marco regular, no puedes controlar la alineación de los objetos de manera individual. Por ese motivo, debes establecer la alineación de los objetos hijos en el marco con disposición automática.

Usa el cuadro de alineación en la barra lateral derecha para seleccionar entre nueve opciones de diseño para los objetos hijos en un marco.

• Selecciona el cuadro y emplea las teclas de flecha para cambiar entre las diferentes configuraciones de alineación. 
• Selecciona la casilla y presiona W/A/S/D para alinear al borde del marco.

Si el espacio entre elementos se establece en Automático, tienes tres opciones para cada dirección:

•  Disposición automática vertical: izquierda, central, derecha
•  Disposición automática horizontal: superior, central, inferior

Si el espacio entre los elementos se establece en un número específico, tienes las mismas nueve opciones para cada dirección:

• Superior izquierda
• Centro superior
• Superior derecha
• Izquierda
• Centro
• Derecha
• Inferior izquierda
• Centro inferior
• Inferior derecha

Alineación de la línea de base del texto

Una línea de base es la línea invisible en la que se encuentra el texto o una capa. En tipografía, las astas descendentes se extienden por debajo de esta línea.

En algunos casos, alinear las líneas de base de las capas puede crear más equilibrio, como al alinear las líneas de base de las capas de texto con distintos tamaños de fuente o al alinear un ícono con una capa de texto.

Para alinear las capas por sus líneas base, selecciona las capas que deseas alinear y haz clic en desde la barra lateral derecha para abrir la configuración avanzada de disposición automática. Junto a la alineación de la línea de base del texto, haz clic en para permitir la alineación de la línea de base.

Cambiar de tamaño

Una de las funciones más poderosas de la disposición automática es su capacidad de controlar las dimensiones de los objetos en un marco con disposición automática.

Establece el comportamiento de cambio de tamaño de los marcos con disposición automática padres para que se adapten a cualquier cambio realizado en sus objetos hijos. La configuración de cambio de tamaño se puede aplicar a los objetos en los ejes X e Y individualmente al usar los menús desplegables en la barra lateral derecha.

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.

Ancho o alto fijo

Cuando un marco con disposición automática se establece con un ancho o alto fijo, los valores de las dimensiones del marco siguen siendo los mismos independientemente del contenido dentro de ellos. El tamaño del marco no responde a los cambios en los objetos que contiene, como una cadena de texto que cambia de longitud.

Dimensiones mínimas y máximas

Puedes establecer el ancho o el alto mínimos o máximos de cualquier marco con disposición automática y sus objetos hijos. 

• Abre el menú desplegable Ancho para encontrar Agregar ancho mínimo y Agregar ancho máximo.
• Abre el menú desplegable Alto para encontrar Agregar alto mínimo y Agregar alto máximo.

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 de la barra lateral derecha. Para volver a acceder a ellos, haz clic en el ícono de ancho o alto.

Para eliminar una configuración mínima o máxima, abre el menú desplegable de Ancho o Alto y elige Eliminar mínimo y máximo.

Ajustar al contenido

Establece un marco con disposición automática en Ajustar al contenido para que cambie de tamaño en función de sus objetos hijos. El marco mantendrá las dimensiones más pequeñas posibles para rodear los objetos dentro de él, respetando el valor del margen interior.

Rellenar contenedor

Los objetos en un marco con disposición automática configurados en Rellenar contenedor se extienden hasta el ancho o alto de su marco padre.

Los objetos hijos de un marco con disposición automática también se establecerán en Rellenar contenedor si se cambia manualmente el tamaño al ancho completo del marco padre.

Una nota sobre las restricciones

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: si creaste un conjunto de etiquetas con la disposición automática, es posible que desees que se ajuste a diferentes tamaños de pantalla. Puede usar restricciones para garantizar que la barra de navegación responda correctamente cuando se cambia el tamaño de su marco padre, y para controlar cómo responden los objetos dentro de la barra de exploración a esos cambios.

Más información sobre las restricciones →

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 la barra lateral derecha)	⌘ 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 la barra lateral derecha 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 contenedor de relleno	⌥ Option + doble clic en el borde vertical u horizontal	Alt + doble clic en el borde vertical u horizontal