Nota: La función de Figma "cuadrícula de disposición" cambió de nombre a "guía de disposición" a partir de mayo de 2025, y es una función diferente de la opción de cuadrícula de la disposición automática.
Las guías de disposición son ayudas visuales que se agregan a los marcos para garantizar que los objetos estén alineados con precisión y ayudar a proporcionar estructura para que podamos mantener los diseños lógicos y consistentes en diferentes plataformas y dispositivos.
Utiliza guías de disposición para lo siguiente:
- Establecer consistencia en varias plataformas
- Tomar menos decisiones al definir disposiciones
- Reducir el tiempo necesario para definir disposiciones para maquetas o wireframes
- Apoyar diversas técnicas de disposición como galerías, íconos o disposiciones de página completa
Consejo: Obtén más información sobre el uso de sistemas de cuadrícula en Figma Design en el artículo del blog Sistemas de cuadrículas para e diseño de pantallas.
Tipos de guía de disposición
Hay tres tipos de guías de disposición: cuadrícula uniforme, columna y fila.
Cuadrícula uniforme
Una cuadrícula uniforme es una cuadrícula cuadrada, útil cuando se requiere precisión, como al diseñar símbolos o íconos.
Si seleccionas una cuadrícula uniforme, puedes ajustar su color y tamaño.
Color
El color predeterminado de una guía de disposición es rojo (#FF0000), con una opacidad del 10 %. Puedes cambiar el color y la opacidad de cualquier guía de disposición.
Tamaño
El tamaño determina el tamaño en píxeles de cada cuadrado de la cuadrícula.
Por ejemplo, en una cuadrícula predeterminada de 10 puntos, cada cuadrado de la cuadrícula tendrá 10 píxeles por 10 píxeles, lo que suma un total de 100 píxeles por cuadrado.
Columna y fila
Las columnas son guías verticales que abarcan la altura de un marco. Las filas son guías horizontales que abarcan el ancho de un marco. Ambas son ideales para diseñar interfaces adaptables para web y dispositivos móviles.
Tanto las columnas como las filas tienen tipos de propiedades similares que puedes ajustar.
Color
El color predeterminado de una guía de disposición es rojo (#FF0000), con una opacidad del 10 %. Puedes cambiar el color y la opacidad de cualquier guía de disposición.
Recuento
El recuento determina el número de columnas o filas de tu guía.
Haz clic en el campo para escribir un número, o utiliza el menú desplegable para elegir un número, aplicar una variable si hay alguna disponible o Automático .
Tipo
- Tipos de columna : izquierda, centro, derecha o estirar.
- Tipos de Fila : superior, centro, inferior o estirar.
El tipo Estirar permite que el ancho de las columnas o la altura de las filas se adapten a su tamaño cada vez que se cambia el tamaño del marco. Cuando se selecciona este tipo, el campo de ancho o altura en la ventana de configuración de la guía de disposición se desactiva y se establece en Automático. El tipo Estirar también tiene una configuración única llamada margen.
El resto de los tipos de columna y fila (izquierda, derecha, superior, inferior y centro) a veces se denominan "fijos". Esta configuración determina el lado del marco donde empieza la guía de disposición.
Por ejemplo, una columna con un tipo fijo Derecha significa que la columna comenzará desde el lado derecho del marco y se desplazará hacia el lado izquierdo.
Con las guías de disposición fijas, tienes la opción de establecer el ancho de las columnas o la altura de las filas, así como su desplazamiento.
Altura/Ancho
Establece la altura de las filas o el ancho de las columnas para definir su tamaño exacto en píxeles (px). Disponible solo para tipos fijos (izquierda, derecha, superior, inferior y centro). El campo de altura/ancho está desactivado y configurado en automático para los tipos Estirar.
Desplazamiento (solo para el tipo fijo)
La configuración Desplazamiento define la posición en píxeles donde comienzan las columnas y las filas. El desplazamiento está disponible para las columnas configuradas a la izquierda o a la derecha, y las filas configuradas en la parte superior o inferior.
Por ejemplo, si tienes una guía de disposición de Fila configurada en Inferior con un desplazamiento de 16, la primera fila de tu guía de disposición comenzará a 16 píxeles de la parte inferior del marco.
Margen (solo para el tipo Estirar)
El margen define cuánto espacio hay entre ambos lados de las columnas o filas y el marco en píxeles (px). Esta configuración solo está disponible para el tipo Estirar.
Medianil (solo para el tipo Estirar)
El medianil define cuánto espacio hay entre cada columna o fila y el marco en píxeles (px). Esta configuración solo está disponible para el tipo Estirar.
Agregar y editar una guía de disposición
Puedes agregar una guía de disposición a cualquier marco. Recuerda que los componentes también son marcos, por lo que también puedes agregarlos a los componentes.
Para agregar una guía de disposición:
- Selecciona un marco.
- Haz clic en Agregar guía de disposición en la sección Guía de disposición de la barra lateral derecha. De forma predeterminada, se aplicará una cuadrícula uniforme al marco.
Para editar una guía de disposición, puedes hacer clic en el ícono Configuración de la guía de disposición para cambiar el tipo de guía de disposición y y ajustar tu configuración.
Consejo: Puedes utilizar una sola guía de disposición o combinar varias guías de disposición para crear disposiciones más complejas. Obtén más información sobre cómo combinar guías de disposición.
Combinar guías de disposición
Como mencionamos anteriormente, puedes agregar muchas guías de disposición a un solo marco. Esto resulta útil cuando se desarrollan disposiciones más complejas.
Por ejemplo, puedes agregar guías de disposición de columnas y filas para tener un mayor control sobre la alineación vertical y horizontal.
- Selecciona el marco al que deseas agregar otra guía de disposición.
- Haz clic en junto a Guía de disposición en la barra lateral derecha.
- Selecciona la guía de disposición en el menú desplegable proporcionado.
- Define cualquier otra propiedad relevante.
- Repite el proceso para agregar más guías de disposición al marco.
Ocultar o mostrar guías de disposición
Puedes alternar la visibilidad de tus guías de disposición. Esto es ideal para situaciones en las que necesitas ocultar tus guías de disposición sin eliminarlas por completo. Las guías de disposición seguirán funcionando, incluso cuando no sean visibles.
Para alternar la visibilidad de todas las guías de disposición en un archivo a la vez:
- Abre el menú desplegable de Opciones de zoom/vista en la parte superior de la barra lateral derecha.
- Haz clic en Guías de disposición para marcar (activar) o desmarcar (desactivar) la configuración. También puedes presionar Shift G en el teclado.
Para ocultar o mostrar guías de disposición específicas:
- Selecciona el marco donde se encuentra la guía de disposición.
- En la sección Guía de disposición de la barra lateral derecha, busca la guía de disposición que deseas alternar y haz clic en / para mostrarla u ocultarla.
Crear y aplicar estilos de guía de disposición
Una vez que hayas perfeccionado la guía de disposición ideal, puedes crear un estilo para reutilizarlo en todos tus diseños.
Obtén más información sobre cómo crear estilos.
Crear un estilo de guía de disposición
Para crear un nuevo estilo de guía de disposición:
- Selecciona un marco en el lienzo con las guías de disposición aplicadas.
- En la barra lateral derecha, haz clic en Aplicar estilos en la sección Guía de disposición.
- Haz clic en Crear estilo.
- Asigna un nombre y una descripción al estilo de guía de disposición.
- Haz clic en Crear estilo.
Aplicar un estilo de guía de disposición
Para aplicar un estilo de guía de disposición:
- Crea o selecciona un marco en el lienzo.
- En la barra lateral derecha, haz clic en Aplicar estilos en la sección Guía de disposición.
- Elige un estilo de guía de disposición de la lista para aplicarlo al marco.
Nota: Los componentes relacionados se determinarán de la siguiente manera:
- Selecciona el marco que deseas copiar.
- Haz clic en la guía de disposición de la barra lateral derecha.
- Cuando esté resaltada, utiliza los atajos de teclado para copiar la guía de disposición:
- Mac: ⌘ Command /
- Windows: Ctrl C
- Selecciona el marco al que deseas aplicar la guía de disposición.
- Utiliza el atajo de teclado para pegar la guía de disposición:
- Mac: ⌘ Command /
- Windows: Ctrl V
Trabajar con guías de disposición y restricciones
Para diseños más complejos, necesitamos precisión y flexibilidad para garantizar que nuestros diseños se comporten correctamente al cambiar de tamaño.
Las restricciones son ideales para proporcionar un marco básico sobre la ubicación de los objetos dentro de un marco. Cuando se combinan con guías de disposición, proporcionan el marco para un sólido sistema de disposición .
Obtén más información sobre cómo combinar guías y restricciones.
Sistema de cuadrícula de 8 puntos
El sistema de cuadrícula de 8 puntos es una herramienta muy utilizada para diseñar disposiciones de UI. Consiste en utilizar múltiplos de 8 para definir la ubicación de los objetos dentro del diseño.
Este sistema se puede utilizar cuando se diseña con restricciones fijas, como en el caso de una app móvil. Pero también puede ser una herramienta útil a la hora de diseñar diseños adaptables.
Existen dos métodos comunes para implementar el sistema de 8 puntos:
- Cuadrícula rígida: consiste en colocar los objetos en una cuadrícula fija con incrementos de 8 puntos. En Figma, esto implicaría aplicar una cuadrícula uniforme al marco con un tamaño de 8.
- Cuadrícula flexible: consiste en colocar los objetos a distancias entre sí que sean divisibles por 8. Esto implicaría aplicar una guía de disposición de filas o columnas con propiedades divisibles por 8.
Obtén más información sobre la cuadrícula de 8 puntos en esta publicación de Spec.fm.
Preguntas frecuentes
¿Puedo alternar todas las guías de disposición a la vez?
Sí. Esto se puede hacer desde el menú Configuración de vista, situado en la esquina superior derecha de Figma.
Obtén más información en la sección sobre como alternar guías de disposición.
¿Por qué no aparecen mis guías de disposición?
Hay varias razones por las que una guía de disposición puede no aparecer:
- La guía de disposición se desactivó en la barra lateral derecha.
- Las guías de disposición se desactivaron globalmente.
- La capa seleccionada no es un marco. Las guías de disposición solo pueden aplicarse a los marcos.
- Se ha girado el marco. Asegúrate de que la rotación de tus objetos esté establecida en 0º antes de aplicar una guía de disposición.
¿Cómo copio las guías de disposición?
Puedes copiar una sola guía de disposición y aplicarla a otro marco. O bien, puedes crear un estilo de guía de disposición que se pueda reutilizar en todos tus diseños.
Obtén más información en nuestra sección de estilos de guías de disposición.