Cómo crear una cuadrícula en Figma – Diseño sencillo

Aprende a crear rejillas en Figma usando cuadrículas de diseño para columnas, filas o cuadrados. Perfecto para el diseño de UI, el espaciado y una alineación perfecta al píxel.

Crea vídeos y documentación de producto impactantes con IA

Este tutorial se creó con Trupeer en menos de 5 minutos

Crea gratis

Esta guía te muestra el proceso de añadir y personalizar líneas de cuadrícula en Figma, garantizando una disposición de diseño bien organizada.
Sigue los pasos a continuación para añadir líneas de cuadrícula de forma eficiente a tus proyectos de Figma.

Figma te permite aplicar cuadrículas de diseño a los marcos, lo que facilita alinear y organizar los elementos de diseño.

1. Selecciona un marco

Haz clic en el marco al que quieras aplicar la cuadrícula. Las cuadrículas de diseño solo están disponibles para marcos, no para elementos individuales.

2. Añade una cuadrícula de diseño

Ve a la barra lateral derecha (panel Diseño), desplázate hasta la sección Cuadrícula de diseño y haz clic en el icono "+".

3. Elige un tipo de cuadrícula

Figma ofrece tres tipos de cuadrícula:

Cuadrícula (cuadrados uniformes)
Columnas (útiles para diseños adaptables)
Filas (buenas para la alineación horizontal)

Usa el menú desplegable para seleccionar el tipo de cuadrícula que prefieras.

4. Personaliza la configuración de la cuadrícula

Número de columnas/filas: establece el número de columnas o filas.
Separación: ajusta el espaciado entre columnas/filas.
Margen: establece el espacio entre el marco y la cuadrícula.
Alineación: elige cómo se alinean las columnas o filas:
- Columnas: izquierda, centro, derecha o estirar
- Filas: arriba, centro, abajo o estirar
Color y opacidad: cambia el color y la transparencia de las líneas de la cuadrícula para adaptarlos a tu diseño.

5. Alterna la visibilidad de la cuadrícula

Usa el atajo Shift + G para mostrar u ocultar la cuadrícula de diseño en cualquier momento.

Guía paso a paso: cómo crear una cuadrícula en Figma

Paso 1

Empecemos a aprender - 'Cómo añadir líneas de cuadrícula en Figma'. Abre tu archivo de Figma. Selecciona la opción de marco para crear un nuevo marco.

Lets begin learning - 'How to add gridlines in Figma'. Open your Figma file. Select the frame option to create a new frame.

Paso 2

Si aún no has creado un marco, asegúrate de crear uno y establecer sus dimensiones en consecuencia. Navega a la configuración de cuadrícula de la capa.

If you haven't created a frame yet, ensure you create one and set its dimensions accordingly. Navigate to the layer grid settings.

Paso 3

En la configuración de cuadrícula de la capa. En la configuración de cuadrícula, elige el tipo de cuadrícula que prefieras, como una cuadrícula cuadrada, y personalízalo según tus necesidades.

In the Navigate to the layer grid settings. In the grid settings, choose the grid type you prefer, such as a square grid, and customize it to your needs.

Paso 4

Ajusta las columnas y filas dentro de la configuración de cuadrícula para adaptarlas a los requisitos de tu diseño.

Adjust the columns and rows within the grid settings to suit your design requirements.

Paso 5

Después de establecer el número de filas y columnas, continúa para finalizar la personalización de tu cuadrícula.

After setting the number of rows and columns, proceed to finalize your grid customization.

Paso 6

Haz clic en 'Crear estilo' para guardar tu cuadrícula como un archivo con la configuración de cuadrícula intacta. Guárdalo con el nombre de un estilo concreto, de modo que tenga sentido para el proyecto y puedas usarlo en el futuro.

Click 'Create Style' to save your grid as a file with grid settings remaining intact. Save it with the name of a particular style - so that it makes sense for the project and you can use it in future.

Consejos profesionales para crear una cuadrícula en Figma

Usa cuadrículas de diseño para mantener la coherencia:
Selecciona el frame o la mesa de trabajo al que quieras añadir líneas de cuadrícula. En el panel derecho, en la sección Cuadrícula de diseño, haz clic en el icono + para añadir una cuadrícula. Esto garantiza la coherencia en todo tu diseño y ayuda a alinear los elementos con precisión.
Personaliza el tipo de cuadrícula:
Figma te permite elegir entre Cuadrícula, Columnas y Filas para tu diseño. Selecciona Cuadrícula para una rejilla uniforme, Columnas para un diseño basado en columnas o Filas para una estructura horizontal. Personaliza el espaciado, el número y el margen según tus necesidades.
Configura varias cuadrículas:
Puedes añadir varias cuadrículas a un solo frame. Usa distintos tipos de cuadrícula para trabajar en diferentes aspectos de tu diseño, como usar una cuadrícula de columnas para el texto y una cuadrícula estándar para la alineación general.
Usa la cuadrícula para el diseño adaptable:
Para un diseño web o móvil adaptable, usa una cuadrícula de columnas y ajusta el ancho de la cuadrícula y el margen entre columnas para adaptarlo a diferentes tamaños de pantalla. Esto ayuda a mantener la proporción y la legibilidad en varios dispositivos.
Alterna la visibilidad de la cuadrícula:
Activa o desactiva la visibilidad de las cuadrículas pulsando Mayús + G. Esto te permite ver y ocultar las cuadrículas rápidamente sin cambiar el diseño.

Errores comunes y cómo evitarlos al añadir líneas de cuadrícula en Figma

Espaciado de cuadrícula incorrecto:
Solución: Revisa la configuración de la cuadrícula y asegúrate de que el espaciado y las columnas/filas sean adecuados para tu diseño. Usa medidas coherentes para mantener la alineación.
Saturar el frame con cuadrículas:
Solución: Evita añadir demasiadas cuadrículas o usar cuadrículas que no se ajusten al contenido. Cíñete a un solo estilo de cuadrícula (por ejemplo, columnas) a menos que tengas una necesidad específica de usar distintas cuadrículas.
Elementos de diseño desalineados:
Solución: Usa la cuadrícula para alinear tus elementos, pero asegúrate de que queden perfectamente alineados con ella. Haz zoom para comprobar que todo encaje correctamente con las líneas de la cuadrícula.
Diseño poco claro para los espectadores:
Solución: Si estás diseñando para que otras personas lo vean, asegúrate de que las cuadrículas no sobrecarguen el diseño. Usa las cuadrículas solo como guía y desactívalas para la exportación final.
Confusión con la visibilidad de la cuadrícula:
Solución: Si las cuadrículas distraen demasiado, usa el control deslizante de opacidad en el panel Cuadrículas de diseño para reducir su visibilidad sin dejar de ser útiles para la alineación.

Preguntas frecuentes comunes para agregar cuadrículas en Figma

¿Puedo agregar cuadrículas a una parte específica de mi diseño, como una imagen?
Las cuadrículas se aplican a los marcos y mesas de trabajo en Figma. Para centrar la cuadrícula en una parte específica, crea un marco alrededor del área que deseas y aplica la cuadrícula a ese marco.
¿Cómo personalizo el tamaño de la cuadrícula?
Puedes personalizar el tamaño, el espaciado y el margen entre columnas ajustando los valores en la sección Rejillas de diseño del panel derecho cuando tienes un marco seleccionado.
¿Cómo oculto las líneas de cuadrícula al presentar o exportar?
Simplemente desactiva las líneas de cuadrícula presionando Shift + G o desmarcando la opción Rejillas de diseño en el panel derecho para quitarlas de la vista y de la exportación.
¿Las líneas de cuadrícula se pueden imprimir en Figma?
No, las líneas de cuadrícula no se imprimen ni se exportan de forma predeterminada. Puedes desactivar su visibilidad antes de exportar tu diseño para asegurarte de que no aparezcan en el resultado final.
¿Puedo usar líneas de cuadrícula para diseño móvil o web?
Sí, las líneas de cuadrícula son extremadamente útiles para el diseño web y móvil. Puedes usar cuadrículas de columnas para alinear elementos, asegurando que tu diseño se adapte bien a distintos tamaños de pantalla.
Esta es la guía paso a paso para agregar líneas de cuadrícula en Figma.
¿Cómo grabar la pantalla en Mac?
Para grabar la pantalla en un Mac, puedes usar Trupeer AI. Te permite capturar toda la pantalla y ofrece capacidades de IA como añadir avatares de IA, agregar voz en off y hacer zoom in y zoom out en el video. Con la función de traducción de videos con IA de Trupeer, puedes traducir el video a más de 30 idiomas.
¿Cómo añadir un avatar de IA a una grabación de pantalla?
Para añadir un avatar de IA a una grabación de pantalla, necesitarás usar una herramienta de grabación de pantalla con IA. Trupeer AI es una herramienta de grabación de pantalla con IA, que te ayuda a crear videos con múltiples avatares y también te ayuda a crear tu propio avatar para el video.
¿Cómo grabar la pantalla en Windows?
Para grabar la pantalla en Windows, puedes usar la barra de juegos integrada (Windows + G) o una herramienta avanzada de IA como Trupeer AI para funciones más avanzadas como avatares de IA, voz en off, traducción, etc.
¿Cómo añadir voz en off a un video?
Para añadir voz en off a los videos, descarga la extensión de Chrome de trupeer ai. Una vez registrado, sube tu video con voz, elige la voz en off deseada de trupeer y exporta tu video editado.
¿Cómo hago zoom en una grabación de pantalla?
Para hacer zoom durante una grabación de pantalla, usa los efectos de zoom en Trupeer AI, que te permite acercar y alejar en momentos específicos, mejorando el impacto visual de tu contenido de video.