Cómo crear una cuadrícula en Figma – maquetación simplificada

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

Vídeos y documentación de producto con IA al instante a partir de grabaciones de pantalla en bruto

Empieza gratis

Esta guía te guía a través del proceso de añadir y personalizar líneas de cuadrícula en Figma, asegurando un diseño bien organizado.
Sigue los pasos a continuación para añadir eficazmente líneas de cuadrícula a tus proyectos de Figma.

Figma te permite aplicar cuadrículas de diseño a los marcos, facilitando la alineación y organización de los elementos de diseño.

1. Selecciona un marco

Haz clic en el marco al que quieres 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 (útil para diseños adaptables)
Filas (bueno 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

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

5. Alternar 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

Vamos a empezar 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 hasta la configuración de la cuadrícula de capas.

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 la cuadrícula de capas. En la configuración de la 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 las filas dentro de la configuración de la cuadrícula para que se adapten 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 configurar el número de filas y columnas, procede a 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 la cuadrícula intacta. Guárdalo con el nombre de un estilo concreto, para 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 las rejillas de diseño para mantener la coherencia:
Selecciona el frame o mesa de trabajo al que quieres añadir líneas de cuadrícula. En el panel derecho, en la sección Rejilla de diseño, haz clic en el icono + para añadir una cuadrícula. Esto garantiza 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 los márgenes 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 diseño adaptable:
Para diseño web o móvil adaptable, usa una cuadrícula de columnas y ajusta el ancho de la cuadrícula y el gutter para adaptarlo a distintos tamaños de pantalla. Esto ayuda a mantener la proporción y la legibilidad en varios dispositivos.
Alterna la visibilidad de la cuadrícula:
Alterna 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 agregar líneas de cuadrícula en Figma

Espaciado incorrecto de la cuadrícula:
Solución: Revisa dos veces la configuración de tu 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 adapten al contenido. Quédate con un solo estilo de cuadrícula (por ejemplo, columnas) a menos que tengas una necesidad específica de usar cuadrículas diferentes.
Elementos de diseño desalineados:
Solución: Usa la cuadrícula para alinear tus elementos, pero asegúrate de que queden totalmente alineados con ella. Acércate con 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 diseñas para que otros lo vean, asegúrate de que tus cuadrículas no recarguen 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 Rejillas de diseño para reducir su visibilidad sin dejar de hacerlas útiles para la alineación.

Preguntas frecuentes comunes sobre añadir líneas de cuadrícula en Figma

¿Puedo añadir líneas de cuadrícula a una parte específica de mi diseño, como una imagen?
Las cuadrículas se aplican a los marcos y las mesas de trabajo en Figma. Para centrar la cuadrícula en una parte específica, crea un marco alrededor del área que quieras 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 la separación de la cuadrícula ajustando los valores en la sección Cuadrículas de diseño del panel derecho cuando tengas seleccionado un marco.
¿Cómo oculto las líneas de cuadrícula cuando presento o exporto?
Simplemente desactiva las líneas de cuadrícula pulsando Shift + G o desmarcando la opción Cuadrículas de diseño en el panel derecho para quitarlas de la vista y de la exportación.
¿Se pueden imprimir las líneas de cuadrícula 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, asegurándote de que tu diseño se adapte bien a distintos tamaños de pantalla.
Esta es la guía paso a paso para añadir 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, añadir voz en off y hacer zoom in y out en el vídeo. Con la función de traducción de vídeo con IA de Trupeer, puedes traducir el vídeo 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 vídeos con varios avatares y también te ayuda a crear tu propio avatar para el vídeo.
¿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 de IA avanzada 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 vídeo?
Para añadir voz en off a los vídeos, descarga la extensión de Chrome de trupeer ai. Una vez registrado, sube tu vídeo con voz, elige la voz en off deseada de Trupeer y exporta tu vídeo 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 permiten acercar y alejar en momentos específicos, mejorando el impacto visual del contenido de tu vídeo.