¿Alguna vez te has preguntado cómo añadir iconos elegantes y escalables a tu aplicación sin sacrificar la velocidad ni la calidad? ¡Para eso están las fuentes de iconos! Las fuentes de iconos son como las fuentes normales, pero en lugar de números y letras, utilizamos iconos. Estos iconos pueden ser cualquier cosa, desde formas y flechas simples hasta representaciones más complejas de objetos o conceptos. Las fuentes de iconos se hicieron populares por primera vez en el diseño web porque permiten a los desarrolladores y diseñadores insertar fácilmente iconos vectoriales escalables en los sitios web. Posteriormente, se convirtieron en imprescindibles en el mundo de las aplicaciones por la misma razón.
Ambos en Kit de interfaz de usuario de prueba, y en nuestros servicios personalizados, utilizamos fuentes de iconos porque nos facilitan mucho la vida. El uso de fuentes de iconos tiene muchas ventajas:
En este artículo, cubriremos todo lo que necesita saber sobre las fuentes de iconos, desde la elección de las fuentes de iconos existentes hasta una guía paso a paso sobre cómo crear su propia fuente.
Hay muchas bibliotecas de íconos dedicadas a proporcionar íconos, muchas de ellas están basadas en suscripciones, ¡pero no te preocupes! Hay otras excelentes opciones gratuitas para empezar a crear tu propia fuente de iconos. Diseño de materiales de Google, cuenta con una amplia biblioteca de iconos que puedes descargar de forma gratuita.
Otra gran biblioteca que no solo ofrece un plan gratuito sino que también tiene un complemento de Figma es Fuente Awesome. Pero si siempre puedes seguir buscando otras bibliotecas de iconos que se adapten al estilo de tu aplicación, hay muchísimas.
Aunque es muy simple, este paso es importante porque para tener una fuente de iconos perfecta, necesitamos que los íconos tengan algunas características especiales. Dentro de nuestro archivo de proyecto de Figma, deberíamos tener un marco que contenga estos íconos, incluso podemos agruparlos en subtítulos para organizarlos. Los íconos deben tener las siguientes propiedades:
Eso es todo, si tus iconos cumplen con estos requisitos, estás listo para exportarlos como SVG y seguir estos últimos pasos.
Ahora que hemos elegido y preparado nuestros iconos, el siguiente paso es crear nuestra fuente de iconos. En UXDivers utilizamos IcoMoon, ¡y tengo una gran noticia! IcoMoon ofrece un plan gratuito y un plan de pago. La única diferencia entre los dos es que con el plan gratuito, guardas los datos de forma local en la memoria caché de tu navegador, lo que significa que si cambias de ordenador o limpias la caché, ya está, no puedes volver a editar.
1. Retire el conjunto libre: Lo primero que verás es un conjunto de iconos llamado «IcoMoon - Free». Puedes continuar y eliminar ese conjunto de iconos haciendo clic en las tres líneas a la derecha de ese título y haciendo clic en «Eliminar conjunto».
2. Iconos de importación: En el lado izquierdo de la barra de navegación hay un botón morado que dice «Importar iconos». Al hacer clic en él, aparece un cuadro de diálogo en el que puedes importar tus iconos.
3. Selección: Ahora que has importado tus iconos, debería aparecer un nuevo conjunto llamado «Conjunto sin título». Selecciona todos los iconos que quieras en la fuente.
Consejo profesional: Para seleccionar rápidamente los iconos, basta con hacer clic y arrastrar el cursor sobre los iconos que desea seleccionar.
4. Generar fuente: Después de seleccionar sus íconos, un botón llamado «Generar fuente» debería estar disponible en la barra de navegación inferior, haga clic en él.
5. Preferencias: En esta etapa, puede acceder al botón «Preferencias» ubicado en el lado izquierdo de la barra de navegación para cambiar el nombre de la fuente y otros ajustes que desee editar.
6. Descargar: ¡Eso es! Ahora puedes descargar tu fuente haciendo clic en el botón «Descargar» en el lado derecho de la barra de navegación inferior.
Si sigues estos pasos, ahora tienes las herramientas para crear e implementar tus propias fuentes de iconos, mejorando tanto la funcionalidad como el atractivo visual de tus aplicaciones.
Las fuentes de iconos ofrecen una forma perfecta de mantener la coherencia, la escalabilidad y la organización de tus diseños. Ya sea que las estés usando en Kit de prueba Para tus propios proyectos personales, las fuentes de iconos son una parte esencial del desarrollo de aplicaciones modernas que pueden hacer que tu flujo de trabajo sea más fluido y que tus aplicaciones sean más atractivas. Así que, ¿por qué no pruebas y compruebas cómo las fuentes de iconos pueden mejorar tu próximo proyecto?
