Nota: La función «cuadrícula de disposición» de Figma pasó a llamarse «guía de diseño» en mayo de 2025, y es una función diferente de la opción de cuadrícula en disposición automática.
Las guías de disposición son ayudas visuales que se añaden a los marcos con el fin de garantizar que los objetos estén alineados con precisión y ayudar a proporcionar una estructura que permita mantener diseños lógicos y coherentes en diferentes plataformas y dispositivos.
Utiliza las guías de disposición para:
- Establecer una coherencia en múltiples plataformas
- Tomar menos decisiones al definir disposiciones
- Reducir el tiempo necesario para definir disposiciones para maquetas o retículas
- Compatibilizar diversas técnicas de disposición, como galerías, iconos o disposiciones de página completas
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ícula para el diseño de pantallas.
Tipos de guías 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 para diseñar símbolos o iconos.
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 pt, cada cuadrado de la cuadrícula tendrá 10 píxeles por 10 píxeles, con un total de 100 píxeles por cuadrado.
Columna y fila
Columnas son guías verticales que abarcan la altura de un marco. Filas son guías horizontales que abarcan el ancho de un marco. Ambas son ideales para diseñar interfaces adaptativas para web y móvil.
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 usa el menú desplegable para elegir entre un número, aplicar una variable si hay alguna disponible o Auto.
Tipo
- Tipos de columna: Izquierda, Centro, Derecha o Estirar.
- Tipos de fila: Superior, Centro, Inferior o Estirar.
Estirar permite que el ancho de las columnas o la altura de las filas se adapten a su tamaño cada vez que se redimensiona el 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 está deshabilitado y se establece en Auto. El tipo Estirar también tiene una configuración única llamada margen.
El resto de los tipos de columna y fila (izquierda, derecha, arriba, abajo y centro) a veces se denominan "fijos". Esta configuración determina el lado del marco en el que comienza la guía de disposición.
Por ejemplo, una columna con un tipo fijo Derecho significa que la columna comenzará desde el lado derecho del marco y se desplazará hacia el lado izquierdo.
Con 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/Anchura
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, arriba, abajo y centro). El campo de altura/anchura está deshabilitado 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 columnas configuradas a la izquierda o derecha, y 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 del fondo del marco.
Margen (solo para el tipo Estirar)
Margen define cuánto espacio hay entre los lados de tus columnas o filas y el marco en píxeles (px). Esta configuración está disponible solo para el tipo Estirar.
Medianil (solo para el tipo Estirar)
Medianil define cuánto espacio hay entre cada columna o fila y el marco en píxeles (px). Esta configuración está disponible solo para el tipo Estirar.
Añadir y editar una guía de disposición
Puedes añadir una guía de disposición a cualquier marco. Recuerda que los componentes también son marcos, así que puedes añadirlos a componentes también.
Para añadir una guía de disposición:
- Selecciona un marco.
- Haz clic en Añadir guía de disposición en la sección Guía de disposición de la barra lateral derecha. Se aplicará una cuadrícula uniforme al marco de forma predeterminada.
Para editar una guía de disposición, puedes hacer clic en el icono Configuración de la guía de disposición para cambiar el tipo de guía de disposición y ajustar su configuración.
Consejo: puedes usar una guía de disposición por sí sola o combinar varias guías de disposición crear disposiciones más complejas. Más información sobre cómo combinar guías de disposición.
Combinar guías de disposición
Como mencionamos anteriormente, puedes añadir muchas guías de disposición a un solo marco. Esto resulta útil cuando se desarrollan disposiciones más complejas.
Por ejemplo, puedes añadir guías de disposición tanto de Columna como de Fila para tener un mayor control sobre la alineación vertical y horizontal.
- Selecciona el marco al que te gustaría añadir 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 para añadir 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 de un archivo a la vez:
- Abre el menú desplegable Opciones de zoom/visualización en la parte superior de la barra lateral derecha.
- Haz clic en Guías de disposición para marcar (habilitar) o desmarcar (deshabilitar) la configuración. También puedes pulsar Mayús G en tu 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 mostrar/ocultar.
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 que puedas usar en todos tus diseños.
Más información sobre la creación de 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 la guía o 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.
- Asigne un nombre y una descripción al estilo de la 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 en la barra lateral derecha.
- Cuando esté resaltada, utiliza los atajos de teclado para copiar la guía de disposición:
- Mac: ⌘ Comando C
- Windows: Ctrl C
- Selecciona el marco al que deseas aplicar la guía de disposición.
- Use el atajo de teclado para pegar la guía de disposición:
- Mac: ⌘ Comando V
- Windows: Ctrl V
Trabaja con guías de disposición y restricciones
Para diseños más complejos, necesitamos precisión y flexibilidad para asegurarnos de que nuestros diseños sigan funcionando correctamente al redimensionarse.
Las restricciones son excelentes para proporcionar un marco básico en el que colocar 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.
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 IU. Consiste en utilizar múltiplos de 8 para definir la ubicación de los objetos dentro de tu diseño.
Puedes usar este sistema a la hora de diseñar para restricciones fijas, como una aplicación móvil. Pero también puede ser una herramienta útil cuando diseñes disposiciones adaptativas.
Hay dos métodos comunes para implementar el sistema de 8 puntos:
- Cuadrícula rígida: consiste en colocar 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.
Más información sobre la cuadrícula de 8 puntos en este artículo 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ú Ver configuración, situado en la esquina superior derecha de Figma.
Más información en la sección sobre cómo alternar guías de disposición.
¿Por qué no se muestran mis guías de disposición?
Hay varias razones por las que una guía de disposición no se muestra:
- La guía de disposición se ha desactivado en la barra lateral derecha.
- Las guías de disposición se han desactivado globalmente.
- La capa seleccionada no es un marco. Las guías de disposición solo se pueden aplicar a 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 puedo copiar 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.
Más información en nuestra sección de estilos de guías de disposición.