Ese espacio en blanco dentro de un frame puede resultar intimidante cuando no sabes por dónde empezar. Las guías y retículas son precisamente las herramientas que transforman un lienzo vacío en una estructura organizada donde cada elemento encuentra su lugar. Dominar estas funciones en Figma es fundamental para construir interfaces consistentes en cualquier dispositivo.
¿Cómo crear una retícula en Figma?
Crear una retícula es un proceso directo. Solo necesitas seleccionar tu frame, ir al panel de propiedades a la derecha y buscar la opción layout grid [2:42]. Desde ahí puedes elegir entre tres tipos de retícula:
- Grilla: convierte tu frame en un papel cuadriculado.
- Columnas: el tipo más utilizado en diseño de interfaces.
- Filas: líneas horizontales para organizar contenido vertical.
Lo interesante es que puedes combinar varios tipos dentro del mismo frame. No estás limitado a una sola retícula; puedes agregar columnas y filas simultáneamente para ubicarte mejor dentro de tu espacio de trabajo.
¿Qué significan el margen y el gutter?
Al configurar columnas aparecen dos valores esenciales. El margen es la distancia desde el borde del frame hasta donde comienzan las columnas [3:20]. El gutter es el espacio que separa una columna de otra. Para un desktop, se recomienda usar entre seis y 12 columnas.
Cuando arrastras un elemento dentro del frame, este se colapsa automáticamente dentro del espacio de las retículas [3:52]. Esto facilita la alineación y mantiene la coherencia visual. Para ocultar o mostrar las retículas, usa el atajo Control + G en Mac [4:18].
¿Cómo funcionan las guías en Figma?
Las guías son líneas auxiliares independientes de las retículas. Para crearlas, primero debes activar las reglas con Shift + R [4:28]. Luego jalas desde la regla vertical u horizontal y llevas la línea hasta el punto que necesitas.
Un uso práctico muy común es marcar el fold de una página [4:50]. El fold indica el punto donde se corta la vista visible de un landing page o un desktop estándar. Todo lo que quede por debajo de esa línea probablemente no será visible sin hacer scroll, y es clave tenerlo en cuenta al priorizar contenido.
¿Cómo diseñar una página responsive con retículas?
El ejercicio propuesto consiste en crear una página web con tres versiones: mobile, tablet y desktop [5:38]. Cada versión usa su propio frame y sus propias retículas.
Para empezar, crea los tres frames desde el panel de propiedades. Puedes presionar la tecla F o seleccionar frame en la esquina superior [5:52]:
- iPhone 8 para mobile.
- iPad Pro 11 pulgadas para tablet.
- Desktop estándar.
¿Qué medidas usar para cada dispositivo?
Estas son las configuraciones recomendadas para cada frame [6:18]:
- iPhone: seis columnas, margen de 20, gutter de 12.
- iPad Pro: seis columnas, margen de 30, gutter de 20.
- Desktop: seis columnas, margen de 42, gutter de 32.
El número de columnas se mantiene constante, pero los márgenes y gutters crecen proporcionalmente al tamaño del dispositivo.
¿Cómo replicar objetos entre frames de distintos tamaños?
Una vez que posiciones elementos en el frame mobile, el siguiente paso es traducirlos a los otros dispositivos. Selecciona tu objeto, usa Command + C para copiar y Command + V para pegar dentro del frame destino [6:58].
Al pegar, el objeto conserva su tamaño original, que probablemente será más pequeño de lo necesario. Si un círculo ocupaba dos columnas en mobile, debes arrastrarlo desde la esquina para que ocupe las dos columnas equivalentes en tablet o desktop [7:12].
Sin embargo, no todos los elementos deben escalarse. Un texto como un título puede mantener su tamaño en los tres dispositivos si ya es lo suficientemente legible [7:42]. Lo importante es verificar que la posición relativa entre elementos sea consistente.
Para medir distancias entre objetos, mantén presionada la tecla Option y observa los píxeles de separación [8:10]. Si necesitas ajustar, usa las flechas del teclado para mover de a un píxel, o Shift + flechas para mover de a 10 píxeles [8:22].
Ahora es tu turno de crear los tres frames, aplicar las retículas y replicar cada elemento. Comparte tu resultado y cualquier duda que surja en el camino.
