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

Antes de empezar

Quién puede utilizar esta función

Disponible en todos los planes

Cualquiera con acceso de edición puede utilizar la disposición automática

La cuadrícula es uno de los tres flujos de disposición automática que puedes 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 estas celdas responderán en consecuencia.

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

Glosario

• Celda: la intersección entre una columna de la cuadrícula y una fila de la cuadrícula
• Capa de celda u objeto de celda: una capa u objeto que reside dentro de una celda. Se consideran instancias secundarias que viven dentro de una cuadrícula.
• Secundaria: una capa que se aloja dentro de un contenedor
• Contenedor: una estructura (como una célula) o capa (como un marco o componente) que puede albergar otras capas
• Anidada: describe una capa que se encuentra dentro de un contenedor
• Principal: una capa (es decir, marcos, componentes, grupos y secciones) que contiene otras capas
• Extensión: la capacidad de un objeto de celda para abarcar múltiples celdas a la vez
• Nivel superior: describe una capa que se sitúa directamente en el lienzo y no contiene una principal
• Pista: una fila o columna individual

Columnas y filas

El flujo de disposición automática de cuadrícula ofrece control bidimensional de disposición —filas y columnas— en tus diseños. Una vez que hayas habilitado la cuadrícula en un marco, puedes seleccionar el número deseado de filas y columnas haciendo clic en el selector de cuadrícula en la barra lateral derecha. Introduce un valor en el campo Número de columnas y en 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 Auto, 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 una pista (columna o fila):

1. Selecciona el marco.
2. Pasa el cursor por la parte superior o izquierda del marco. También puedes pasar el cursor sobre la pista deseada o seleccionar un elemento de la misma. Aparecerá un punto azul.
3. Coloca el cursor sobre el punto azul y haz clic en la etiqueta que aparece, indicando el tamaño de la pista.
4. Desde allí, puedes redimensionar la pista de las siguientes maneras:
   • Tamaño automático: para que la pista se redimensione automáticamente según el espacio disponible, escriba Auto o A y luego pulse Enter / Return
   • Tamaño específico: haz clic y arrastra el borde de la pista para redimensionar a un valor específico

Espaciamiento

Espaciado entre

Espacio entre define 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 de disposición automática de cuadrícula. Introduce un valor numérico en el campo, desplaza los valores con las teclas de flecha o limpia el campo con el cursor.

Espaciado

El espaciado controla el espacio vacío o en blanco entre el límite del marco de disposición automática y las celdas del marco. Puedes configurar el espaciado de manera uniforme, vertical y horizontal, o tener valores diferentes para el espaciado superior, derecho, inferior e izquierdo.

• Predeterminado: los controles de espaciado se dividen en vertical (superior e inferior) y horizontal (izquierdo y derecho) por predeterminado.
• Espaciado individual: haz clic en para usar los campos de espaciado superior, derecho, inferior e izquierdo.
• Espaciado uniforme o abreviatura CSS: mantén pulsada la tecla Comando o Ctrl y haz clic en cualquier campo de espaciado. También puedes escribir la abreviatura CSS.
  • Ejemplo: al introducir 1,2,3,4 se establece la parte superior: 1px, la derecha: 2px, la parte inferior: 3px y la izquierda: 4px
  • Ejemplo: al introducir 1,2 se establece arriba/abajo: 1px y izquierda/derecha: 2px

Redimensionar

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

Están disponibles las siguientes propiedades de redimensionamiento:

• Anchura o altura fija: las dimensiones del objeto de celda o del marco de disposición automática de cuadrícula anidada permanecen iguales, independientemente del tamaño de su celda principal o marco principal
• Relleno del contenedor: el objeto de celda o el marco de cuadrícula anidado se extiende para rellenar el ancho o alto de la celda o del marco principal

Trabajar con objetos en celdas de cuadrícula

Añadir 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 secundarios: arrastra uno o más objetos secundarios y suéltalos en una celda vacía o entre dos celdas
• Duplicar objetos existentes: selecciona uno o más objetos secundarios y utiliza 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 y de arriba a abajo. Si no hay suficientes celdas vacías disponibles, Figma reposicionará los objetos que obstruyen en las celdas disponibles o creará nuevas filas o columnas para acomodarlos.

Distribuir objetos en varias celdas

Puedes extender un objeto secundario para que se extienda a lo largo de varias celdas de una cuadrícula, lo que te permitirá redimensionarlo cuando se redimensione el objeto principal.

Para extender un objeto secundario, selecciónalo y redimensiónalo en el lienzo. Mientras se redimensiona, si el objeto se ajusta al borde de una celda, su propiedad de disposición automática se actualizará a Rellenar contenedor para la dimensión ajustada (ancho o alto).

Alinear objetos a sus celdas

Dentro de un marco de disposición automática de cuadrícula, un objeto secundario se puede alinear según su celda.

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

• Alinear a la izquierda
• Alinear centros horizontales
• Alinear a la derecha
• Alinear arriba
• Alinear centros verticales

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

Pruébalo

Para seguir practicando, copia nuestro Archivo de la comunidad de cuadrícula.