Agrega disposición automática a un diseño
Este artículo está disponible tanto para la UI anterior de Figma como para la nueva. Utiliza el conmutador de la parte inferior izquierda de la página para seleccionar tu UI 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 de puede editar en un archivo pueden agregar la disposición automática a marcos y objetos.
Usa la disposición automática para crear diseños que se ajustan automáticamente al contenido, al aumentar o disminuir su tamaño y reordenar su contenido según sea necesario. Por ejemplo:
- 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.
Nota: Este artículo explica cómo añadir la disposición automática a los diseños y de qué manera reorganizar los objetos secundarios en un flujo de disposición automática. Para obtener más información sobre el cambio de tamaño, el espaciado, la alineación y otras propiedades de la disposición automática, consulta Explorar las propiedades 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 el panel derecho. 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.
Agrega disposición automática
Puedes agregar una disposición automática a un marco o a una selección de objetos. Esto incluye:
- Fotogramas nuevos o vacíos
- Marcos con contenido existente
- Componentes y conjuntos de componentes
- Grupos u otras selecciones de capas y/u objetos
Hay algunas formas de agregar disposición automática a una selección:
- Usa el atajo de teclado ⇧ Shift A.
- En el panel derecho, haz clic en junto a Disposición automática.
- Haz clic con el botón derecho en un marco u objeto y selecciona Agregar disposición automática.
Una vez que utilices la disposición automática, los objetos anidados se configurarán en espaciado automático entre, relleno del contenedor y alineación al centro. Aprende sobre las diferentes propiedades de la disposición automática →.
Nota: El diseño automático solo se admite en marcos. Si seleccionas objetos que no están en un marco, Figma creará un marco con disposición automática alrededor de ellos.
Sugerir disposición automática
La opción de Sugerir disposición automática te permite hacer un diseño adaptable con solo el clic de un botón.
Cuando usas Sugerir disposición automática, Figma intentará determinar qué objetos en un marco o componente deben colocarse en un marco con disposición automática y, luego, agregará tantos marcos con disposición automática como sea necesario para que el diseño completo responda. Se crean todos estos marcos a la vez, mientras se intenta preservar la ubicación de sus diseños.
Esto te ahorra tiempo y te evita tener que realizar el tedioso trabajo de agregar la disposición automática marco por marco.
Nota: La opción Sugerir disposición automática puede manejar diseños moderadamente complejos, como tarjetas, barras de navegación o pantallas móviles. Si estás trabajando con un diseño grande o complejo, como un sitio web, usa la opción Sugerir disposición automática en lotes.
Puedes acceder a esta opción desde varios lugares:
- Utilice los atajos 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 disposición automática > Sugerir disposición automática.
- Selecciona Sugerir diseño automático en el menú Acciones.
Después de usar esta acción, cualquier marco con disposición automática anidado que se haya creado se indica con un punto azul en la sección de capas del panel izquierdo.
Nota: Ocasionalmente, puedes encontrar un objeto en un marco con disposición automática que no es el deseado o con una dirección horizontal aplicada cuando querías que fuera vertical. Es posible que la sugerencia de disposición automática no siempre sea correcta, pero su objetivo es acelerar el flujo de trabajo.
En el caso de los elementos que pueden ser un poco más complicados, se recomienda enmarcar, agrupar o usar la disposición automática en los elementos anidados antes de usar la opción Sugerir disposición automática en el marco padre.
Agregar, editar y eliminar objetos
Agregar objetos a un marco con disposición automática
Puedes agregar cualquier capa u objeto a un marco con disposición automática.
- Haz clic en un objeto y arrástralo sobre un marco con disposición automática.
- Usa el indicador azul para elegir dónde colocar el objeto.
Nota: El tamaño del objeto determina si se puede agregar al marco con disposición automática. Si alguna de las dimensiones del objeto es mayor que el marco padre, no verás la opción para agregarlo a la disposición automática.
Usa la tecla modificadora para omitir el comportamiento predeterminado de Figma y agregar objetos más grandes a una disposición automática. O bien, para agregar objetos a una disposición automática anidada.
- Mac: ⌘ Command
- Windows: Ctrl
Obtén más información sobre las relaciones entre objetos padres, hijos y hermanos →
Anidar marcos con disposición automática
Puedes anidar un marco con disposición automática dentro de otro marco con disposición automática. Esto te permite combinar diseños horizontales y verticales para crear interfaces complejas.
Cuando anidas un marco con disposición automática, el marco anidado tendrá propiedades padre y propiedades hijo.
En nuestro siguiente ejemplo, hay cuatro niveles de disposición automática:
- Botón: cada botón es una disposición automática horizontal. Esto permite que el botón aumente y disminuya de tamaño a medida que cambiamos el texto de la etiqueta.
- Fila de botones: A continuación, agregamos ambos botones a otra disposición automática horizontal. Esto permite que los objetos respondan cuando realizamos cambios en el contenido de un hermano.
- Publicación: luego agregamos nuestros botones a una disposición automática vertical con los otros objetos en la publicación. Esto incluye una descripción, una imagen y el perfil del usuario.
- Línea de tiempo: hemos agregado tres a una disposición automática vertical para crear nuestra línea de tiempo. El marco con disposición automática es el marco de nivel superior que se encuentra en el lienzo.
Puedes anidar marcos con disposición automática de varias maneras:
- Arrastra un marco con disposición automática a un marco con disposición automática existente.
- Crea un nuevo marco con disposición automática alrededor de una selección de marcos con disposición automática (y otros objetos).
- Selecciona el marco con disposición automática y las otras capas que deseas incluir.
- Usa el atajo de teclado ⇧ Shift A para agregar la disposición automática.
- Figma creará un marco alrededor de tu selección y agregará disposición automática.
Consejo: Puedes omitir el comportamiento parental predeterminado de Figma. Mantén presionada la tecla modificadora para mantener un objeto dentro del marco actual o evitar que Figma lo anide.
- Mac: ⌘ Command
- Windows: Ctrl
Obtén más información sobre las relaciones entre objetos padres, hijos y hermanos →
Objetos duplicados
Puedes duplicar objetos existentes para agregarlos a la disposición automática. Figma agregará el duplicado a la derecha (horizontal) o debajo (vertical) del objeto original.
- Selecciona un objeto hijo en un marco con disposición automática.
- Duplícalo usando el atajo de teclado:
- Mac: ⌘ Command D
- Windows: Ctrl D
Organizar o reordenar objetos
Nota: No se pueden reordenar los objetos de una instancia. Deberás cambiar el orden del objeto en el componente principal o separar la instancia para reordenar los objetos. Disposición automática en componentes ↓
Puedes cambiar el orden en que aparecen los objetos en un marco con disposición automática. Esto solo se admite en componentes principales o marcos con disposición automática fuera de un componente.
- 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
- Hay algunas maneras de reordenar objetos:
- Usa 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.
Eliminar objetos
Para eliminar un objeto de un componente principal o de un marco con disposición automática:
- Arrastra el objeto fuera del marco con disposición automática
- Haz clic en junto a Aspecto en el panel derecho, o junto a la capa en el panel izquierdo para activar o desactivar la visibilidad de la capa.
- Selecciona el objeto y pulsa la tecla Eliminar 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.
¡Sugerencia! Al activar o desactivar la visibilidad de una capa o un objeto, este se ocultará del marco con disposición automática. Si deseas crear un espacio en el lugar donde debería estar el objeto, puedes ajustar la opacidad del objeto. En el panel derecho, actualiza la configuración de la Capa a 0 %.
Eliminar disposición automática
Cuando elimines la disposición automática, tendrás acceso a las propiedades normales de un marco.
Hay algunas formas de eliminar el diseño automático:
- Haz clic con el botón derecho en el marco y selecciona Eliminar disposición automática.
- En el panel derecho, haz clic en junto a Disposición automática.
- Usa los atajos de teclado:
- Mac: ⌥ Option⇧ ShiftA
- Windows: Alt⇧ ShiftA
Consejo: Puedes eliminar la disposición automática del marco de nivel superior actualmente seleccionado y de todos sus objetos anidados utilizando Eliminar toda la disposición automática desde Acciones.
Otras consideraciones
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. 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.
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 espaciado entre | ✓ | ✓ |
| 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.
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 la disposición automática a marcos y objetos.
Usa la disposición automática para crear diseños que se ajustan automáticamente al contenido, al aumentar o disminuir su tamaño o reordenar su contenido según sea necesario. Por ejemplo:
- 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.
Nota: Este artículo explica cómo añadir la disposición automática a los diseños y de qué manera reorganizar los objetos secundarios en un flujo de disposición automática. Para obtener más información sobre el cambio de tamaño, el espaciado, la alineación y otras propiedades de la disposición automática, consulta Explorar las propiedades 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.
Agrega disposición automática
Puedes agregar una disposición automática a un marco o a una selección de objetos. Esto incluye:
- Fotogramas nuevos o vacíos
- Marcos con contenido existente
- Componentes y conjuntos de componentes
- Grupos u otras selecciones de capas y/u objetos
Hay algunas formas de agregar la disposición automática a un marco o componente seleccionado:
- Usa 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 Agregar disposición automática.
Una vez que utilices la disposición automática, los objetos anidados se configurarán en espaciado automático entre, relleno del contenedor y alineación al centro. Aprende sobre las diferentes propiedades de la disposición automática →.
Nota: El diseño automático solo se admite en marcos. Si seleccionas objetos que no están en un marco, Figma creará un marco con disposición automática alrededor de ellos.
Sugerir disposición automática
La opción de Sugerir disposición automática te permite hacer un diseño adaptable con solo el clic de un botón.
Cuando usas Sugerir disposición automática, Figma intentará determinar qué objetos en un marco o componente deben colocarse en un marco con disposición automática y, luego, agregará tantos marcos con disposición automática como sea necesario para que el diseño completo responda. Se crean todos estos marcos a la vez, mientras se intenta preservar la ubicación de sus diseños.
Esto te ahorra tiempo y te evita tener que realizar el tedioso trabajo de agregar la disposición automática marco por marco.
Nota: La opción Sugerir disposición automática puede manejar diseños moderadamente complejos, como tarjetas, barras de navegación o pantallas móviles. Si estás trabajando con un diseño grande o complejo, como un sitio web, usa la opción Sugerir disposición automática en lotes.
Puedes acceder a esta opción desde varios lugares:
- Utilice los atajos 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 disposición automática > Sugerir disposición automática.
- Selecciona Sugerir diseño automático en el menú Acciones.
Después de usar esta acción, cualquier marco con disposición automática anidado que se haya creado se indica con un punto azul en la sección de capas del panel izquierdo.
Nota: Ocasionalmente, puedes encontrar un objeto en un marco con disposición automática que no es el deseado o con una dirección horizontal aplicada cuando querías que fuera vertical. Es posible que la sugerencia de disposición automática no siempre sea correcta, pero su objetivo es acelerar el flujo de trabajo.
En el caso de los elementos que pueden ser un poco más complicados, se recomienda enmarcar, agrupar o usar la disposición automática en los elementos anidados antes de usar la opción Sugerir disposición automática en el marco padre.
Agregar, editar y eliminar objetos
Agregar objetos a un marco con disposición automática
Puedes agregar cualquier capa u objeto a un marco con disposición automática.
- Haz clic en un objeto y arrástralo sobre un marco con disposición automática.
- Usa el indicador azul para elegir dónde colocar el objeto.
Nota: El tamaño del objeto determina si se puede agregar al marco con disposición automática. Si alguna de las dimensiones del objeto es mayor que el marco padre, no verás la opción para agregarlo a la disposición automática.
Usa la tecla modificadora para omitir el comportamiento predeterminado de Figma y agregar objetos más grandes a una disposición automática. O bien, para agregar objetos a una disposición automática anidada.
- Mac: ⌘ Command
- Windows: Ctrl
Obtén más información sobre las relaciones entre objetos padres, hijos y hermanos →
Anidar marcos con disposición automática
Puedes anidar un marco con disposición automática dentro de otro marco con disposición automática. Esto te permite combinar diseños horizontales y verticales para crear interfaces complejas.
Cuando anidas un marco con disposición automática, el marco anidado tendrá propiedades padre y propiedades hijo.
En nuestro siguiente ejemplo, hay cuatro niveles de disposición automática:
- Botón: cada botón es una disposición automática horizontal. Esto permite que el botón aumente y disminuya de tamaño a medida que cambiamos el texto de la etiqueta.
- Fila de botones: A continuación, agregamos ambos botones a otra disposición automática horizontal. Esto permite que los objetos respondan cuando realizamos cambios en el contenido de un hermano.
- Publicación: luego agregamos nuestros botones a una disposición automática vertical con los otros objetos en la publicación. Esto incluye una descripción, una imagen y el perfil del usuario.
- Línea de tiempo: hemos agregado tres a una disposición automática vertical para crear nuestra línea de tiempo. El marco con disposición automática es el marco de nivel superior que se encuentra en el lienzo.
Puedes anidar marcos con disposición automática de varias maneras:
- Arrastra un marco con disposición automática a un marco con disposición automática existente.
- Crea un nuevo marco con disposición automática alrededor de una selección de marcos con disposición automática (y otros objetos).
- Selecciona el marco con disposición automática y las otras capas que deseas incluir.
- Usa el atajo de teclado ⇧ Shift A para agregar la disposición automática.
- Figma creará un marco alrededor de tu selección y agregará disposición automática.
Consejo: Puedes omitir el comportamiento parental predeterminado de Figma. Mantén presionada la tecla modificadora para mantener un objeto dentro del marco actual o evitar que Figma lo anide.
- Mac: ⌘ Command
- Windows: Ctrl
Obtén más información sobre las relaciones entre objetos padres, hijos y hermanos →
Objetos duplicados
Puedes duplicar objetos existentes para agregarlos a la disposición automática. Figma agregará el duplicado a la derecha (horizontal) o debajo (vertical) del objeto original.
- Selecciona un objeto hijo en un marco con disposición automática.
- Duplícalo usando el atajo de teclado:
- Mac: ⌘ Command D
- Windows: Ctrl D
Organizar o reordenar objetos
Nota: No se pueden reordenar los objetos de una instancia. Deberás cambiar el orden del objeto en el componente principal o separar la instancia para reordenar los objetos. Disposición automática en componentes ↓
Puedes cambiar el orden en que aparecen los objetos en un marco con disposición automática. Esto solo se admite en componentes principales o marcos con disposición automática fuera de un componente.
- 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
- Hay algunas maneras de reordenar objetos:
- Usa 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.
Eliminar objetos
Para eliminar un objeto de un componente principal o de un marco con disposición automática:
- Arrastra el objeto fuera del marco con disposición automática
- Haz clic en el para activar o desactivar la visibilidad de la capa.
- Selecciona el objeto y pulsa la tecla Eliminar 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.
Consejo: Al activar o desactivar la visibilidad de una capa o un objeto, este se ocultará del marco con disposición automática. Si deseas crear un espacio en el lugar donde debería estar el objeto, puedes ajustar la opacidad de este. En la barra lateral derecha, actualiza la configuración de Capa a 0 %.
Eliminar disposición automática
Cuando elimines la disposición automática, tendrás acceso a las propiedades normales de un marco.
Hay algunas formas de eliminar el diseño automático:
- Haz clic con el botón derecho en el marco y selecciona Eliminar disposición automática.
- En la barra lateral derecha, haz clic en junto a Disposición automática.
- Usa los atajos de teclado:
- Mac: ⌥ Option⇧ ShiftA
- Windows: Alt⇧ ShiftA
Consejo: Puedes eliminar la disposición automática del marco de nivel superior actualmente seleccionado y de todos sus objetos anidados utilizando Eliminar toda la disposición automática desde Acciones.
Otras consideraciones
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. 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.
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 espaciado entre | ✓ | ✓ |
| 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.