Diseñar interfaces que otros quieran abrir y copiar pasa por algo más que estética: pasa por orden. Las buenas prácticas en Figma combinan guías, retículas de ocho píxeles, componentes reutilizables y atajos que mantienen tu archivo limpio y replicable. Aquí están los tips para que tu espacio de trabajo se sienta perfecto y profesional.

¿Qué son las guías o layout grids en Figma y cómo se configuran?

Las guías, conocidas tradicionalmente como grillas, son líneas que indican dónde van ubicados los elementos dentro de un frame. No son objetos visibles en el diseño final, pero aparecen en el panel de propiedades bajo layout grid cuando seleccionas un frame que las tiene aplicadas [02:04].

Al crear una guía nueva desde cero, Figma propone por defecto una grilla de ocho píxeles, un valor casi sagrado en diseño de interfaces. Escalar elementos en base a múltiplos de cuatro y ocho hace que todo encaje, y esa retícula se convierte en tu lenguaje común con cualquier otro diseñador [02:31].

Encima de esa grilla puedes superponer otras configuraciones, como columnas. En el ejercicio se configuran cuatro columnas con estos parámetros recomendados para mobile:

• Tipo de columna stretch (responsiva), ideal para diseños que se adaptan a distintas resoluciones.
• Margen de 16 píxeles entre los bordes del frame y la primera columna.
• Gutter de 16 píxeles como distancia entre columnas.
• Color azul para diferenciarla de la grilla base de ocho puntos.

¿Qué es un gutter en una grilla de Figma? Es la distancia entre columnas. En diseño mobile se recomienda dejarlo en 16 píxeles para mantener consistencia con la grilla de ocho puntos.

¿Cómo guardar una grilla como estilo reutilizable?

En lugar de configurar la grilla cada vez, conviértela en un estilo. Desde los cuatro puntos a la derecha del layout grid, eliges aplicar estilo, creas uno nuevo y le das un nombre como guía mobile [04:18]. A partir de ahí, ese estilo aparece en tus estilos locales junto con los de texto y color, y puedes aplicarlo a cualquier otro frame del archivo con un clic.

¿Por qué usar la regla de los ocho puntos al mover elementos?

Cuando seleccionas un elemento en Figma y lo mueves con las flechas del teclado, se desplaza un píxel a la vez. Para mantener consistencia con tu grilla, conviene cambiar ese comportamiento.

Presiona Command K, escribe nudge y aparece el menú nudge amount. Ahí defines cuánto se mueve un elemento al usar las flechas:

• Small nudge: se activa al presionar solo la flecha. Suele dejarse en 1 píxel.
• Big nudge: se activa con Shift + flecha. Cámbialo a 8 en lugar del valor por defecto de 10 [05:43].

Con esa configuración, cada vez que muevas un elemento con Shift, caerá exactamente sobre la retícula de ocho puntos, vertical u horizontalmente. Trabajar con cualquier diseñador se vuelve más fácil porque todos hablan el mismo idioma de espaciado.

¿Cómo crear componentes que reutilicen otros componentes?

Una de las técnicas más potentes es construir un componente que contenga una instancia intercambiable de otros componentes. El ejemplo es un botón de navegación que puede mostrar cualquier ícono de tu librería [07:03].

El flujo se ve así:

1. Copia un ícono existente, por ejemplo arrow back, dentro del frame del botón.
2. Conviértelo en componente con Command + Option + K y renómbralo, por ejemplo, nav button.
3. Selecciona la instancia del ícono dentro del componente.
4. En la barra de propiedades, haz clic en Create Instance Swap Property y nómbrala icon.

Ahora ese botón aparece con un dropdown que permite buscar visualmente cualquier ícono de la librería —share, check, bookmark— y reemplazarlo sin romper el componente principal. Replicas el botón a la derecha y a cada copia le asignas el ícono correspondiente.

¿Para qué sirve Instance Swap Property en Figma? Permite intercambiar un componente anidado por otro desde el panel de propiedades, sin necesidad de duplicar el componente padre. Es ideal para botones con íconos variables.

¿Cómo ordenar capas cuando el archivo se vuelve caótico?

En pantallas con scroll vertical, listas largas y muchos elementos anidados, el panel de capas puede colapsar de tanta información [10:02]. Mi atajo favorito para esos momentos es Option + L: Figma colapsa todo lo que está abierto en tu espacio de trabajo a su mínima expresión, ya sean secciones o frames. Recuperas la vista racional y vuelves a respirar.

¿Cómo corregir errores repetidos con Find and Replace?

A veces detectas un error que se repite en decenas de pantallas. En el ejercicio aparece Italy en lugar de Italia en una lista de países, y revisarlo a mano sería tedioso [11:20].

La solución es usar Find and Replace: presiona Command K, escribe Find and Replace y el panel izquierdo cambia para mostrarte el buscador. Indicas qué texto encontrar —Italy— y Figma localiza, en este caso, 55 resultados en toda la interfaz. Revisas las instancias, confirmas que el cambio aplica en todas y presionas Replace all. En segundos, Italy pasa a Italia en todo el archivo.

Estas prácticas son las que separan un archivo improvisado de uno que cualquier diseñador quisiera abrir. Si tienes dudas, desacuerdos o quieres profundizar en alguna, déjalas en los comentarios.