Explorar las propiedades del diseño automático – Figma Learn - Centro de ayuda

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.

Explora el archivo del área de pruebas de diseño automático en la Comunidad Figma →

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.

tres conjuntos de diseños, todos con los mismos elementos: tres círculos, uno rosa, uno amarillo, un verde. El primer conjunto de círculos se coloca en dirección vertical. El segundo conjunto de círculos se coloca en dirección horizontal. El tercer conjunto de círculos está envuelto, con los círculos rosa y amarillo en la primera fila y el círculo verde en la segunda fila.

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

comparación en paralelo del último en la parte superior y el primero en la parte superior

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 .

En un archivo de Figma Design, un cursor arrastra un icono X a un marco de diseño automático mientras mantiene pulsada la tecla control. El cursor libera el icono X en la esquina superior derecha del marco.

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.

Una tarjeta de blog de color verde claro que contiene un título, una descripción y un botón para obtener más información. El diseño automático se aplica a este recurso. Debajo aparece el método abreviado de teclado para cambiar el espaciado en todos los lados. Un cursor utiliza ese atajo de teclado mientras hace clic y arrastra el controlador rosa superior del marco de diseño automático.

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 introducir 1,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.

Un marco de diseño automático verde con 3 cuadrados amarillos. Un cursor hace clic en las diferentes opciones del cuadro de alineación en el panel derecho.

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

Un marco de diseño automático verde con 3 cuadrados amarillos. Un cursor se desplaza por las distintas opciones del cuadro de alineación para cuando se aplica «Auto» al espacio intermedio.

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.

Comparación en paralelo de iconos y texto con y sin alineación de línea base 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.

se selecciona una capa dentro de un marco móvil. Un cuadro resalta la sección de cambio de tamaño del panel derecho.

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.

Más información sobre el cambio de tamaño del texto →

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.

Un componente de etiqueta de tema etiquetado como «tema» con un borde negro y un fondo blanco, que utiliza un diseño automático horizontal. Un cursor añade un ancho mínimo de 80 px al componente y, a continuación, cambia la etiqueta a «diseño interior». El componente se expande horizontalmente para acomodar el texto.

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.

Un marco móvil con un panel emergente en la parte inferior de una pantalla. Un cursor selecciona el panel, hace clic en el botón de limitaciones y cambia las limitaciones horizontales de «izquierda» a «izquierda y derecha». Al cambiar el tamaño del marco móvil horizontalmente, el panel se expande.

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