Usar el flujo de disposición automática de la cuadrícula

Antes de empezar

Quién puede utilizar esta función

Disponible en todos los planes

Cualquier persona con acceso de puede editar puede usar la disposición automática

La cuadrícula es uno de los tres flujos de disposición automática que se pueden aplicar a los marcos. Consiste en “celdas” organizadas en filas y columnas donde puedes colocar capas y recursos. Los objetos pueden abarcar varias celdas, y cuando se redimensiona un marco que utiliza una cuadrícula, los objetos en esas celdas responderán con el redimensionamiento.

El flujo de disposición automática de cuadrícula es ideal para crear diseños como cajas bento, paneles y disposiciones editoriales.

Glosario

• Celda: la intersección entre una columna de cuadrícula y una fila de cuadrícula.
• Capa de celda u objeto de celda: una capa u objeto que reside dentro de una celda. Se consideran capas hijos que viven dentro de una cuadrícula.
• Elemento hijo: una capa que reside dentro de un contenedor
• Contenedor: una estructura (como una celda) o capa (como un marco o componente) que puede albergar otras capas.
• Anidada: describe una capa que se encuentra dentro de un contenedor.
• Elemento padre: una capa, es decir, marcos, componentes, grupos y secciones, que contiene otras capas.
• Alcance: la capacidad de un objeto de celda para ocupar múltiples celdas a la vez.
• Nivel superior: describe una capa que se encuentra directamente en el lienzo y no tiene un elemento padre.
• Segmento: una fila o columna individual.

Columnas y filas

El flujo de disposición automática de cuadrícula introduce el control de disposición bidimensional, filas y columnas, en tus diseños. Una vez que actives la cuadrícula en un marco, puedes elegir el número deseado de filas y columnas al hacer clic en el selector de cuadrícula en la barra lateral derecha. Ingresa un valor en el campo Número de columnas y el campo Número de filas, o usa el selector interactivo.

Redimensionar columnas y filas

El tamaño de cada columna y fila se establece en Automático, y se calcula en función del espacio restante después de considerar otros valores de espaciado y tamaños de columna o fila.

Para redimensionar un segmento (columna o fila):

1. Selecciona el marco.
2. Pasa el cursor sobre la parte superior o izquierda del marco. También puedes pasar el cursor sobre el segmento deseado o seleccionar un elemento del mismo. Aparecerá un punto azul.
3. Coloca el cursor sobre el punto azul y haz clic en la etiqueta que aparece, que indica el tamaño del segmento.
4. Desde allí, puedes redimensionar los segmentos de las siguientes maneras:
   • Dimensionamiento automático: para que el segmento se ajuste automáticamente al espacio disponible, escribe Auto o A y, luego, presiona Enter o Return
   • Tamaño específico: haz clic y arrastra el borde del segmento para cambiar el tamaño a un valor específico

Espaciamiento

Espacio entre

Espacio entre establece la distancia entre columnas y filas. Puedes hacer esto usando los campos Espacio entre filas y Espacio entre columnas en la barra lateral derecha cuando se selecciona el marco con disposición automática. Ingresa un valor numérico en el campo, desplaza los valores con las teclas de flecha o arrastra el cursor sobre el campo.

Margen interior

El margen interior controla el espacio vacío o en blanco entre el límite del marco con disposición automática y las celdas 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.

• Predeterminado: los controles de margen interior están separados en margen interior vertical (superior e inferior) y horizontal (izquierdo y derecho) de forma predeterminada.
• Margen interior individual: haz clic en para usar los campos de margen interior superior, derecho, inferior e izquierdo.
• Relleno inferior uniforme o abreviatura CSS: mantén presionadas las teclas ⌘ Command o Ctrl y haz clic en cualquier campo de margen interior. También puedes escribir la abreviatura CSS.
  • Ejemplo: al ingresar 1,2,3,4 se establecen valores en superior: 1 px, derecha: 2 px, inferior: 3 px e izquierda: 4 px
  • Ejemplo: al ingresar 1,2, se establecen valores en superior/inferior: 1 px e izquierda/derecha: 2 px

Cambiar de tamaño

Las opciones de redimensionamiento están disponibles para cualquier capa hijo de un marco con disposición automática de cuadrícula, incluidos los marcos con disposición automática de cuadrícula anidados. Las opciones de redimensionamiento no están disponibles para los marcos con disposición automática de nivel superior que utilizan cuadrícula. Obtén más información sobre cómo anidar los marcos con disposición automática.

Están disponibles las siguientes propiedades de redimensionamiento:

• Ancho o altura fijos: las dimensiones del objeto de celda o del marco con disposición automática de cuadrícula permanecen iguales, independientemente del tamaño de su celda padre o marco padre.
• Ajustar al contenedor: el objeto de celda o el marco de cuadrícula anidado se extiende para ocupar el ancho o la altura de la celda o del marco padre

Trabajar con objetos en celdas de cuadrícula

Agregar y mover objetos en una cuadrícula

• Crear formas, marcos y capas de texto: crea estos elementos directamente en una celda
• Mover objetos a una cuadrícula: arrastra una o más capas y suéltalas en cualquier celda vacía o entre dos celdas
• Reubicar objetos hijos: arrastra uno o más objetos hijos y suéltalos en una celda vacía o entre dos celdas
• Duplicar objetos existentes: selecciona uno o más objetos hijos y usa el atajo de teclado ⌘ Command D para Mac, y Ctrl D para Windows

Los objetos se colocarán en sucesión de izquierda a derecha, de arriba a abajo. En Figma, si no hay suficientes celdas vacías disponibles, Figma recolocará los objetos que obstruyen en las celdas disponibles o creará nuevas filas o columnas para acomodarlos.

Distribuir objetos a través de varias celdas

Puedes hacer que un objeto hijo abarque múltiples celdas de una cuadrícula, permitiéndole redimensionarse al cambiar el tamaño del objeto padre.

Para abarcar un objeto hijo, selecciónalo y redimensiónalo en el lienzo. Al redimensionar, si el objeto se ajusta al borde de una celda, su propiedad de disposición automática se actualizará a Ajustar al contenedor para la dimensión ajustada (ancho o altura).

Alinear objetos a sus celdas

Dentro de un marco con disposición automática de cuadrícula, un objeto hijo puede alinearse con su celda.

Selecciona un objeto secundario y usa los botones de alineación en la sección Posición de la barra lateral derecha.

• Alinear a la izquierda
• Alinear a los centros horizontales
• Alinear a la derecha
• Alinear a la parte superior
• Alinear a los centros verticales

Si tienes varios objetos hijos seleccionados, cada uno se alineará con su celda respectiva.

Pruébalo

Para ganar experiencia práctica, obtén una copia de nuestro archivo de la comunidad de cuadrícula.