Creador de Plantilla de Cuadrícula de Iconos | Exporta un PNG Transparente con Guías de Alineación

Define columnas, filas, tamaño de celda, relleno y espaciado en píxeles, y exporta una plantilla PNG transparente con guías de alineación. Es una forma rápida de maquetar hojas de iconos, hojas de sprites y andamiajes de kits de interfaz sin abrir una aplicación de diseño completa.

💡 Sobre esta herramienta

Colocar un conjunto de iconos con un espaciado uniforme implica calcular de memoria: una celda de 64px, un hueco de 8px, un margen exterior de 16px, multiplicado por cuantas columnas y filas haya. Basta equivocarse en un número para que toda la hoja pierda la alineación, algo que a menudo se descubre solo después de exportar y hay que rehacer el trabajo.

Esta herramienta hace ese cálculo por ti. Al escribir las columnas, filas, tamaño de celda, relleno y espaciado, muestra el ancho total, el alto y el número de iconos mientras editas. La vista previa superpone los contornos de cada celda, el relleno exterior, los espaciados entre celdas y la cruz central, de modo que ves dónde caerá cada icono antes de confirmar. La exportación es un PNG transparente que se integra de forma limpia en Figma, Sketch, Illustrator o cualquier editor por capas como cuadrícula base sobre la que alinear las ilustraciones reales. Activa o desactiva las guías y la exportación sigue ese estado, así que un solo botón te da un borrador de trabajo con guías o una plantilla terminada de solo celdas.

🧐 Preguntas Frecuentes

¿El fondo del PNG exportado es transparente? Sí. El PNG exportado tiene fondo transparente. El patrón de cuadros que aparece en la vista previa solo sirve para visualizar la transparencia en pantalla y no se incluye en la imagen.

¿Cuál es la diferencia entre espaciado y relleno? El relleno es el margen reservado alrededor del exterior de toda la cuadrícula; el espaciado es el hueco que se deja entre celdas adyacentes. Si pones ambos a cero, las celdas quedan pegadas entre sí sin separación.

¿Cómo decido si el PNG exportado incluye las guías? Usa el interruptor "mostrar guías". Activado, la exportación incluye la cruz central y las líneas de relleno, que ayudan a alinear durante la fase de boceto. Desactivado, solo quedan los contornos de las celdas, lo que da una plantilla más limpia cercana al diseño final. El interruptor afecta tanto a la vista previa como a la exportación, por eso hay un único botón de descarga.

¿Cómo se calcula el tamaño de salida? El ancho equivale a relleno por dos, más tamaño de celda por el número de columnas, más espaciado por el número de columnas menos uno. El alto sigue la misma lógica a partir de las filas, y el indicador de tamaño de salida se actualiza cada vez que cambias un valor.

¿Puedo colocar aquí las imágenes reales de los iconos? Esta herramienta genera una plantilla de cuadrícula vacía que sirve de capa base. Cada celda muestra solo su contorno; las ilustraciones reales de los iconos se superponen sobre cada celda en tu propia aplicación de diseño.

📚 Cómo funcionan las cuadrículas

El sistema de cuadrícula, que ordena los elementos a intervalos iguales, proviene directamente de la tradición de maquetación impresa, y el término "gutter" (espaciado) arrastra esa historia: originalmente nombraba el margen interior reservado en el lado de encuadernación de una página. En las hojas de sprites de iconos e interfaz, el espaciado también cumple una función práctica: evita que los bordes representados de iconos vecinos se mezclen, de modo que cada celda pueda exportarse o recortarse de forma independiente. Combinar un espaciado constante con un relleno exterior estable mantiene las proporciones intactas aunque añadas otra celda más adelante.