Añadir el diseño automático a un diseño

Utiliza el diseño automático para crear diseños adaptables que crecen para rellenar, se encogen para encajar o se adaptan al contenido. Por ejemplo:

• 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

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
• 🚫 Usa la selección inteligente en cualquier objeto dentro del marco

Añadir diseño automático

Puedes añadir un diseño automático a un marco o a una selección de objetos. Esto incluye:

• Marcos nuevos o vacíos
• Marcos con contenido existente
• Componentes y conjuntos de componentes
• Grupos u otras selecciones de capas y/o objetos

Hay varias formas de añadir un diseño automático a un marco o componente seleccionado:

• Utiliza el atajo de teclado ⇧ Shift A
• En la barra lateral derecha, haz clic en junto a disposición automática con un marco seleccionado
• Haz clic con el botón derecho en un marco u objeto y selecciona Añadir diseño automático

Una vez que utilices la disposición automática, los objetos anidados se configurarán en espacio automático entre medias, rellenar contenedor y alineación centrada. Descubre las diferentes propiedades de la disposición automática →

Sugerir diseño automático

Sugerir diseño automático te permite convertir un diseño en adaptativo con solo pulsar un botón.

Cuando utilizas Sugerir diseño automático, Figma intentará determinar qué objetos de un marco o componente deben colocarse en un marco de diseño automático y, a continuación, añade tantos marcos de diseño automático como sea necesario para hacer el diseño completo adaptativo. Estos marcos de diseño automático se crean todos a la vez, mientras se intenta preservar la ubicación de tus diseños.

Esto te ahorra tiempo y te evita tener que realizar el tedioso trabajo de añadir diseño automático marco por marco.

Puedes acceder a esta opción desde varios lugares:

• Utilizar el atajo de teclado:
  • Mac: ⌃ Control ⇧ Shift A
  • Windows ⌃ Control Alt ⇧ Shift A
• Haz clic derecho en el marco u objeto y dirígete a Más opciones de diseño > Sugerir diseño automático
• Selecciona Sugerir diseño automático en el menú Acciones

Tras usar esta acción, todos los marcos anidados de diseño automático que se hayan creado se indican con un punto azul en la sección de capas del panel izquierdo.

Añadir, editar y eliminar objetos

Añadir objetos a un marco de diseño automático

Puedes añadir cualquier capa u objeto a un marco de diseño automático.

1. Haz clic en un objeto y arrástralo sobre un marco de diseño automático.
2. Usa el indicador azul para elegir dónde colocar el objeto.

Anidar marcos de diseño automático

Puedes anidar un marco de diseño automático dentro de otro marco de diseño automático. Esto te permite combinar diseños horizontales y verticales para crear interfaces complejas.

Cuando anidas un marco de diseño automático, el marco anidado tendrá propiedades tanto principales como secundarias.

En nuestro ejemplo a continuación, hay cuatro niveles de diseño automático:

1. Botón: cada botón es un diseño automático horizontal. Esto permite que el botón crezca y se reduzca a medida que cambiamos el texto de la etiqueta.
2. Fila de botones: a continuación, añadimos ambos botones a otro diseño automático horizontal. Esto permite que los objetos respondan cuando realizamos cambios en el contenido de un elemento hermano.
3. Publicación: a continuación, añadimos nuestros botones a un diseño automático vertical con el resto de objetos en la publicación. Esto incluye una descripción, una imagen y el perfil del usuario.
4. Línea temporal: hemos añadido tres a un diseño automático vertical para crear nuestra línea temporal. El marco de diseño automático es el marco de nivel superior que se sitúa sobre el lienzo.

Puedes anidar los marcos de diseño automático de varias maneras:

• Arrastra un marco de diseño automático a un marco de diseño automático existente
• Crea un nuevo marco de diseño automático alrededor de una selección de marcos de diseño automático (y otros objetos).

1. Selecciona el marco de diseño automático y las otras capas que deseas incluir.
2. Usa el método abreviado de teclado Shift A para añadir un diseño automático.
3. Figma creará un marco alrededor de tu selección y añadirá un diseño automático.

Duplicar objetos

Puedes duplicar objetos existentes para añadirlos al diseño automático. Figma añadirá el duplicado a la derecha (horizontal) o debajo (vertical) del objeto original.

1. Selecciona un objeto secundario en un marco de diseño automático.
2. Duplícalo usando el atajo de teclado:
   • Mac: ⌘ Command D
   • Windows: Ctrl D

Organizar o reordenar objetos

Puedes cambiar el orden en que aparecen los objetos en un marco de diseño automático. Esto solo se admite en los componentes principales o en los marcos de diseño automático fuera de un componente.

1. Selecciona el objeto secundario. Si la capa está anidada, tendrás que usar la tecla modificadora para realizar una selección profunda:
   • Mac: ⌘ Command
   • Windows: Ctrl
2. Hay varias formas de reordenar los objetos:
   • Utiliza las teclas de flecha del teclado para colocar el objeto en una nueva posición.
   • Haz clic y arrastra el objeto a una nueva posición.

Quitar objetos

Para eliminar un objeto de un componente principal o de un marco de diseño automático:

• Arrastra el objeto fuera del marco de diseño automático
• Haz clic en para cambiar la visibilidad de la capa
• Selecciona el objeto y pulsa la tecla Supr o Retroceso

No se puede eliminar una capa u objeto de una instancia. Si lo intentas, Figma solo alternará la visibilidad de la capa en lugar de eliminarla.

Eliminar el diseño automático

Al eliminar el diseño automático, tendrás acceso a las propiedades normales de un marco.

Hay un par de formas de eliminar el diseño automático:

• Haz clic con el botón derecho en el marco y selecciona Eliminar diseño automático
• En la barra lateral derecha, haz clic en junto a disposición automática
• Usar atajos de teclado:
  • Mac: ⌥ Option⇧ ShiftA
  • Windows: Alt⇧ ShiftA

Otras consideraciones

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. Transiciones de deslizamiento 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.

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.