Explorar las propiedades del diseño automático
Este artículo es aplicable tanto a la anterior IU de Figma como a la nueva. Utiliza el botón en la parte izquierda de la página para seleccionar tu IU actual. Conoce UI3: el rediseño de Figma →
Antes de empezar
Quién puede utilizar esta función
Disponible en todos los planes
Los usuarios con acceso puede editar
en un archivo pueden añadir diseño automático a marcos y objetos
¿Ya estás familiarizado con las propiedades de diseño automático? Aprende a utilizar el diseño automático →
El diseño automático es una propiedad que se puede añadir a los marcos y componentes. Te permite crear diseños que crecen para rellenar o se encojen para encajar, y que cambian a medida que cambia su contenido. Esto es ideal cuando necesitas añadir nuevas capas, acomodar cadenas de texto más largas o mantener la alineación a medida que evolucionan tus diseños.
Hay muchas maneras de usar el diseño automático:
- Crear botones que crezcan o se reduzcan según edites la etiqueta de texto
- Crear listas que se adapten a medida que se añaden, eliminan u ocultan elementos
- Combinar marcos de diseño automático para crear interfaces completas
El diseño automático es una característica poderosa con muchas partes móviles y usos. En este artículo, desglosaremos cómo funcionan los diferentes aspectos del diseño automático.
Los marcos con diseño automático tienen propiedades diferentes a las de los marcos normales. Cuando apliques el diseño automático, verás algunos cambios en el panel derecho.
No puedes hacer lo siguiente para los marcos de diseño automático:
- 🚫 Añadir cuadrículas de diseño a ese marco
- 🚫 Aplicar limitaciones a cualquier objeto dentro de un marco de diseño automático, a menos que el objeto tenga activado Ignorar el diseño automático
- 🚫 Usa la selección inteligente en cualquier objeto dentro del marco
Flujo de diseño
Orientación
La dirección describe la forma en que fluirá el marco de diseño automático.
- Vertical: añade, elimina y reordena objetos a lo largo del eje Y. Por ejemplo: objetos dentro de una lista o publicaciones dentro de un canal de noticias o una línea temporal.
- Horizontal: añade, elimina y reordena objetos a lo largo del eje x. Por ejemplo: una fila de botones o iconos en un menú de navegación móvil.
- Envolver: organiza objetos en varias filas y columnas en un marco. Los objetos fluirán horizontalmente y se ajustarán a la siguiente línea. Por ejemplo: galerías de fotos o un conjunto de etiquetas.
Orden de apilamiento del lienzo
Cuando varias capas tienen un espaciado negativo que crea una pila, el último objeto (el que está más a la derecha o más abajo) de la pila estará en la parte superior de forma predeterminada.
Puedes cambiar el orden visual de la pila tal como se ve en el lienzo.
Con el marco de diseño automático seleccionado, haz clic en el panel derecho para abrir la configuración de diseño automático. Junto al apilamiento de lienzos, selecciona:
- Primera en la parte superior: la primera capa de la pila estará arriba
- Última en la parte superior: la última capa de la pila estará arriba
Nota: Ten en cuenta que cuando cambia el orden de apilamiento, el orden de las capas en el panel de capas permanece igual. El apilamiento de lienzos es únicamente un cambio visual que ocurre en el lienzo.
Ignorar el diseño automático
Nota: Ignorar el diseño automático antes se conocía como posición absoluta. La función tiene un nuevo nombre, pero sigue funcionando igual.
Un objeto con la opción Ignorar diseño automático habilitada se excluye de un flujo de diseño automático mientras se mantiene en el marco de diseño automático. 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 diseño automático habilitada se tratan como objetos de un marco normal. Esto significa que puedes aplicar limitaciones para determinar cómo responden cuando su marco de diseño automático principal cambia de tamaño. 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 diseño automático mientras pulsas ⌃ Control .
Espaciamiento
Espacio entre elementos
Utiliza el espacio entre elementos para definir la distancia, o distribución, entre los objetos de un marco de diseño automático.
El espacio entre elementos tiene dos variantes diferentes:
-
Automático: Establece el espacio entre objetos para que tenga la mayor distancia posible. Escribe
Auto
en el campo o selecciónalo en el menú desplegable. - Un espacio especificado: Especifica la distancia entre la que deseas que estén los objetos. Introduce un valor en el campo, desplaza los valores con las teclas de flecha o limpia el campo con el cursor.
Para alternar rápidamente entre estos dos ajustes, haz clic en el cuadro de alineación y pulsa X.
Si la dirección del marco de diseño automático está configurada en vertical u horizontal, podrás establecer el espacio entre los elementos de forma vertical u horizontal, respectivamente. Si tienes la dirección del marco configurada para envolver, podrás establecer un espacio horizontal y vertical entre los elementos.
¡Consejo! Mantén pulsada la tecla ⇧ Shift mientras arrastras los controladores para aumentar o disminuir usando los valores de gran desplazamiento.
Espaciado
El espaciado controla el espacio vacío o en blanco entre el límite de un marco de diseño automático y los objetos secundarios del marco. Puedes configurar el espaciado de manera uniforme, vertical y horizontal, o tener valores diferentes para el espaciado superior, derecho, inferior e izquierdo.
Ajusta el espaciado usando los controles del lienzo o los campos de espaciado en el panel derecho.
Para acceder a los controles del lienzo, selecciona un marco de diseño automático y coloca el cursor sobre él. Aparecerán controles rosas, similares a los de la selección inteligente.
- Haz clic en los controles para abrir los campos de entrada e introducir un valor numérico
- O bien, haz clic y arrastra el control para cambiar el espaciado
Consejo: Consulta nuestra guía de atajos de teclado ↓ para ver los atajos para configurar el espaciado en lados opuestos, en todos los lados y mucho más.
Los controles de espaciado en el panel derecho están separados en espaciado vertical (superior e inferior) y horizontal (izquierdo y derecho) de forma predeterminada.
- Para establecer el espaciado individual, haz clic en para usar los campos de espaciado superior, derecho, inferior e izquierdo.
- Para establecer un relleno uniforme o para usar la abreviatura CSS, mantén pulsado ⌘ Command o Control y haz clic en cualquier campo de relleno. También puedes escribir la abreviatura CSS. Por ejemplo, al introducir
1,2,3,4
, se establece la parte superior, derecha, inferior e izquierda en 1, 2, 3 y 4 respectivamente. Al introducir1,2
, se establecen los valores como arriba/abajo: 1 e izquierda/derecha: 2.
¡Sugerencia! Pulsa la tecla tabulación para moverte entre los campos de entrada.
Trazos en el diseño
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 principal ni a los hermanos que los rodean.
Es posible que esto no sea ideal durante la entrega al desarrollador, ya que no representa con precisión cómo CSS representa los bordes.
Para elegir si los trazos ocuparán espacio en un marco de diseño automático, dirígete a la configuración de diseño automático y utiliza el menú desplegable situado junto al trazo para seleccionar incluido en el diseño o excluido del diseño.
Alineación
Configurar la alineación en los objetos secundarios
Elige cómo alinear los objetos secundarios dentro de un marco de diseño automático. Tanto la dirección del marco de diseño automático 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 individualmente. Por ese motivo, estableces la alineación de los objetos secundarios en el marco de diseño automático principal.
Utiliza el cuadro de alineación en el panel derecho para seleccionar entre nueve opciones de diseño para los elementos en un marco.
- Selecciona la casilla y utiliza las teclas de flecha para cambiar entre los diferentes ajustes de alineación.
- Selecciona la casilla y pulsa 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:
- Diseño automático vertical: Izquierda, Centro, Derecha
- Diseño automático horizontal: Superior, Centro, Inferior
Si el espacio entre los elementos se establece en un número específico, tienes las mismas nueve opciones para cada dirección:
- Parte superior izquierda
- Centro superior
- Parte superior derecha
- Izquierda
- Centro
- Derecha
- Parte inferior izquierda
- Centro inferior
- Parte inferior derecha
Nota: Cuando una o más propiedades de redimensionamiento están configuradas para ajustarse al contenido, algunas selecciones no darán como resultado diseños visualmente diferentes en el lienzo. Esto se debe a que ajustar al contenido elimina cualquier espacio adicional alrededor de los objetos secundarios.
Alineación de la línea base del texto
Una línea base es la línea invisible en la que se encuentra el texto o una capa. En tipografía, los descendentes se extenderán 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 icono con una capa de texto.
Para alinear las capas por sus líneas base, selecciona las capas que deseas alinear y haz clic en el panel derecho para abrir la configuración de diseño automático. Junto a la alineación de la línea base del texto, haz clic en para permitir la alineación de la línea base.
¡Consejo! Haz clic en el cuadro de alineación del panel derecho y pulsa B para activar y desactivar la alineación de la línea de base del texto.
Redimensionar
Una de las funciones más poderosas del diseño automático es su capacidad de controlar las dimensiones de los objetos en un marco de diseño automático.
Establece el comportamiento de cambio de tamaño de los marcos de diseño automático principales para que se adapten a cualquier cambio realizado en sus objetos secundarios. La configuración de cambio de tamaño se puede aplicar a los objetos en los ejes X e Y individualmente utilizando los menús desplegables 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.
Nota: las capas de texto también tienen sus propias propiedades de cambio de tamaño. Dentro de un marco de diseño automático, esto puede producir algunos 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.
Ancho o alto fijo
Cuando un marco de diseño automático se establece en Anchura o altura Fija, los valores de las dimensiones del marco siguen siendo los mismos independientemente de su contenido. 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 la anchura y la altura mínimas o máximas de cualquier marco de diseño automático 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 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 mínima o máxima, abre el menú desplegable Anchura o Altura y selecciona Eliminar mín. y máx..
Nota: Las capas 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. Obtén más información sobre las líneas máximas →
Ajustar al contenido
Establece un marco de diseño automático como Ajustar al contenido para que cambie de tamaño en función de sus objetos secundarios. El marco mantendrá las dimensiones más pequeñas posibles para rodear los objetos dentro de él, respetando el valor de espaciado.
¡Sugerencia! Haz doble clic en el borde vertical u horizontal del cuadro delimitador de un objeto de diseño automático para configurarlo como Ajustar al contenido.
Nota: si algún objeto secundario dentro de un marco de diseño automático está configurado como Llenar contenedor, el marco principal ya no se ajustará al contenido y pasará a ser fijo para el eje.
Llenar el contenedor
Los objetos en un marco de diseño automático configurado como Llenar contenedor se estiran hasta la anchura o altura de su marco principal.
Los objetos secundarios de un marco de diseño automático también se configurarán como Llenar contenedor si se cambia el tamaño manualmente para que ocupen toda la anchura del marco principal.
¡Sugerencia! Mantén pulsada la tecla ⌥ Option o Alt y haz doble clic en el borde vertical u horizontal del cuadro de límite de un objeto de diseño automático para configurarlo como Llenar contenedor.
Una nota sobre las limitaciones
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: si has creado un conjunto de etiquetas con diseño automático, es posible que desees que se ajuste a diferentes tamaños de pantalla. Puedes utilizar limitaciones para asegurarte de que la barra de navegación responda correctamente cuando se cambia el tamaño de su marco primario y cambiar el tamaño para controlar cómo responden los objetos de la barra de navegación a dichos cambios.
Más información sobre las limitaciones →
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 |
Antes de empezar
Quién puede utilizar esta función
Disponible en todos los planes
Los usuarios con acceso puede editar
en un archivo pueden añadir diseño automático a marcos y objetos.
¿Ya estás familiarizado con las propiedades de diseño automático? Aprende a utilizar el diseño automático →
El diseño automático es una propiedad que se puede añadir a los marcos y componentes. Te permite crear diseños que crecen para rellenar o se encojen para encajar, y que cambian a medida que cambia su contenido. Esto es ideal cuando necesitas añadir nuevas capas, acomodar cadenas de texto más largas o mantener la alineación a medida que evolucionan tus diseños.
Hay muchas maneras de usar el diseño automático:
- Crear botones que crezcan o se reduzcan según edites la etiqueta de texto
- Crear listas que se adapten a medida que se añaden, eliminan u ocultan elementos
- Combinar marcos de diseño automático para crear interfaces completas
El diseño automático es una característica poderosa con muchas partes móviles y usos. En este artículo, desglosaremos cómo funcionan los diferentes aspectos del diseño automático.
Los marcos con diseño automático tienen propiedades diferentes a las de los marcos normales. Cuando apliques el diseño automático, verás algunos cambios en la barra lateral derecha.
No puedes hacer lo siguiente para los marcos de diseño automático:
- 🚫 Añadir cuadrículas de diseño a ese marco
- 🚫 Aplicar limitaciones a cualquier objeto dentro de un marco de diseño automático, a menos que el objeto tenga activada la posición absoluta
- 🚫 Usar Selección Inteligente en cualquier objeto dentro del marco
Flujo de diseño
Orientación
La dirección describe la forma en que fluirá el marco de diseño automático.
- Vertical: añade, elimina y reordena objetos a lo largo del eje Y. Por ejemplo: objetos dentro de una lista o publicaciones dentro de un canal de noticias o una línea temporal.
- Horizontal: añade, elimina y reordena objetos a lo largo del eje x. Por ejemplo: una fila de botones o iconos en un menú de navegación móvil.
- Envolver: organiza objetos en varias filas y columnas en un marco. Los objetos fluirán horizontalmente y se ajustarán a la siguiente línea. Por ejemplo: galerías de fotos o un conjunto de etiquetas.
Orden de apilamiento del lienzo
Cuando varias capas tienen un espaciado negativo que crea una pila, el último objeto (el que está más a la derecha o más abajo) de la pila estará en la parte superior de forma predeterminada.
Puedes cambiar el orden visual de la pila tal como se ve en el lienzo.
Con el marco de diseño automático seleccionado, haz clic en la barra lateral derecha para abrir la configuración avanzada de diseño automático. Junto al apilamiento de lienzos, selecciona:
- Primera en la parte superior: la primera capa de la pila estará arriba
- Última en la parte superior: la última capa de la pila estará arriba
Nota: Ten en cuenta que cuando cambia el orden de apilamiento, el orden de las capas en el panel de capas permanece igual. El apilamiento de lienzos es únicamente un cambio visual que ocurre en el lienzo.
Ignorar el diseño automático
Nota: ignorar el diseño automático se conocía anteriormente como posición absoluta. La función tiene un nuevo nombre, pero sigue funcionando igual.
Un objeto con la opción Ignorar diseño automático habilitada se excluye de un flujo de diseño automático mientras se mantiene en el marco de diseño automático. 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 diseño automático habilitada se tratan como objetos de un marco normal. Esto significa que puedes aplicar limitaciones para determinar cómo responden cuando su marco de diseño automático principal cambia de tamaño. Otras propiedades y configuraciones de diseño automático no están disponibles para los objetos que ignoran el diseño automático.
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 en la barra lateral derecha.
- Arrastra un objeto a un marco de diseño automático mientras pulsas ⌃ Control .
Espaciamiento
Espacio entre elementos
Utiliza el espacio entre elementos para definir la distancia, o distribución, entre los objetos de un marco de diseño automático.
El espacio entre elementos tiene dos variantes diferentes:
-
Automático: Establece el espacio entre objetos para que tenga la mayor distancia posible. Escribe
Auto
en el campo o selecciónalo en el menú desplegable. - Un espacio especificado: Especifica la distancia entre la que deseas que estén los objetos. Introduce un valor en el campo, desplaza los valores con las teclas de flecha o limpia el campo con el cursor.
Para alternar rápidamente entre estos dos ajustes, haz clic en el cuadro de alineación y pulsa X.
Si la dirección del marco de diseño automático está configurada en vertical u horizontal, podrás establecer el espacio entre los elementos de forma vertical u horizontal, respectivamente. Si tienes la dirección del marco configurada para envolver, podrás establecer un espacio horizontal y vertical entre los elementos.
¡Consejo! Mantén pulsada la tecla ⇧ Shift mientras arrastras los controladores para aumentar o disminuir usando los valores de gran desplazamiento.
Espaciado
El espaciado controla el espacio vacío o en blanco entre el límite de un marco de diseño automático y los objetos secundarios del marco. Puedes configurar el espaciado de manera uniforme, vertical y horizontal, o tener valores diferentes para el espaciado superior, derecho, inferior e izquierdo.
Ajusta el espaciado utilizando los controles de lienzo o los campos de espaciado en la barra lateral derecha.
Para acceder a los controles del lienzo, selecciona un marco de diseño automático y coloca el cursor sobre él. Aparecerán controles rosas, similares a los de la selección inteligente.
- Haz clic en los controles para abrir los campos de entrada e introducir un valor numérico
- O bien, haz clic y arrastra el control para cambiar el espaciado
Consejo: Consulta nuestra guía de atajos de teclado ↓ para ver los atajos para configurar el espaciado en lados opuestos, en todos los lados y mucho más.
Los controles de espaciado en la barra lateral derecha están separados en espaciado vertical (superior e inferior) y horizontal (izquierdo y derecho) de forma predeterminada.
- Para establecer el espaciado individual, haz clic para usar los campos de espaciado superior, derecho, inferior e izquierdo.
- Para establecer un relleno uniforme o para usar la abreviatura CSS, mantén pulsado ⌘ Command o Control y haz clic en cualquier campo de relleno. También puedes escribir la abreviatura CSS. Por ejemplo, al introducir
1,2,3,4
, se establece la parte superior, derecha, inferior e izquierda en 1, 2, 3 y 4 respectivamente. Al introducir1,2
, se establecen los valores como arriba/abajo: 1 e izquierda/derecha: 2.
¡Sugerencia! Pulsa la tecla tabulación para moverte entre los campos de entrada.
Trazos en el diseño
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 principal ni a los hermanos que los rodean.
Es posible que esto no sea ideal durante la entrega al desarrollador, ya que no representa con precisión cómo CSS representa los bordes.
Para elegir si los trazos ocuparán espacio en un marco de diseño automático, dirígete a la configuración avanzada de diseño automático y utiliza el menú desplegable situado junto al trazo para seleccionar incluido en el diseño o excluido del diseño.
Alineación
Configurar la alineación en los objetos secundarios
Elige cómo alinear los objetos secundarios dentro de un marco de diseño automático. Tanto la dirección del marco de diseño automático 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 individualmente. Por ese motivo, estableces la alineación de los objetos secundarios en el marco de diseño automático principal.
Utiliza el cuadro de alineación en la barra lateral derecha para seleccionar entre nueve opciones de diseño para los elementos en un marco.
- Selecciona la casilla y utiliza las teclas de flecha para cambiar entre los diferentes ajustes de alineación.
- Selecciona la casilla y pulsa 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:
- Diseño automático vertical: izquierda, centro, derecha
- Diseño automático horizontal: arriba, centro, abajo
Si el espacio entre los elementos se establece en un número específico, tienes las mismas nueve opciones para cada dirección:
- Parte superior izquierda
- Centro superior
- Parte superior derecha
- Izquierda
- Centro
- Derecha
- Parte inferior izquierda
- Centro inferior
- Parte inferior derecha
Nota: Cuando una o más propiedades de redimensionamiento están configuradas para ajustarse al contenido, algunas selecciones no darán como resultado diseños visualmente diferentes en el lienzo. Esto se debe a que ajustar al contenido elimina cualquier espacio adicional alrededor de los objetos secundarios.
Alineación de la línea base del texto
Una línea base es la línea invisible en la que se encuentra el texto o una capa. En tipografía, los descendentes se extenderán 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 icono con una capa de texto.
Para alinear las capas por sus líneas base, selecciona las capas que deseas alinear y haz clic en la barra lateral derecha para abrir la configuración avanzada de diseño automático. Junto a la alineación de la línea base del texto, haz clic en para permitir la alineación de la línea base.
¡Consejo! Haz clic en el cuadro de alineación de la barra lateral derecha y pulsa B para activar y desactivar la alineación de la línea de base del texto.
Redimensionar
Una de las funciones más poderosas del diseño automático es su capacidad de controlar las dimensiones de los objetos en un marco de diseño automático.
Establece el comportamiento de cambio de tamaño de los marcos de diseño automático principales para que se adapten a cualquier cambio realizado en sus objetos secundarios. La configuración de cambio de tamaño se puede aplicar a los objetos en los ejes X e Y individualmente utilizando 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.
Nota: las capas de texto también tienen sus propias propiedades de cambio de tamaño. Dentro de un marco de diseño automático, esto puede producir algunos 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.
Ancho o alto fijo
Cuando un marco de diseño automático se establece en Anchura o altura Fija, los valores de las dimensiones del marco siguen siendo los mismos independientemente de su contenido. 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 la anchura y la altura mínimas o máximas de cualquier marco de diseño automático 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 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 de la barra lateral derecha. Para volver a acceder a ellos, haz clic en el icono de anchura o altura.
Para eliminar una configuración mínima o máxima, abre el menú desplegable Anchura o Altura y selecciona Eliminar mín. y máx..
Nota: Las capas 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. Obtén más información sobre las líneas máximas →
Ajustar al contenido
Establece un marco de diseño automático como Ajustar al contenido para que cambie de tamaño en función de sus objetos secundarios. El marco mantendrá las dimensiones más pequeñas posibles para rodear los objetos dentro de él, respetando el valor de espaciado.
¡Sugerencia! Haz doble clic en el borde vertical u horizontal del cuadro delimitador de un objeto de diseño automático para configurarlo como Ajustar al contenido.
Nota: si algún objeto secundario dentro de un marco de diseño automático está configurado como Llenar contenedor, el marco principal ya no se ajustará al contenido y pasará a ser fijo para el eje.
Llenar el contenedor
Los objetos en un marco de diseño automático configurado como Llenar contenedor se estiran hasta la anchura o altura de su marco principal.
Los objetos secundarios de un marco de diseño automático también se configurarán como Llenar contenedor si se cambia el tamaño manualmente para que ocupen toda la anchura del marco principal.
¡Sugerencia! Mantén pulsada la tecla ⌥ Option o Alt y haz doble clic en el borde vertical u horizontal del cuadro de límite de un objeto de diseño automático para configurarlo como Llenar contenedor.
Una nota sobre las limitaciones
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: si has creado un conjunto de etiquetas con diseño automático, es posible que desees que se ajuste a diferentes tamaños de pantalla. Puedes utilizar limitaciones para asegurarte de que la barra de navegación responda correctamente cuando se cambia el tamaño de su marco primario y cambiar el tamaño para controlar cómo responden los objetos de la barra de navegación a dichos cambios.
Más información sobre las limitaciones →
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 la barra lateral derecha) |
⌘ 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 la barra lateral derecha 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 |