Cómo instalar fuentes en Figma

Mientras hacía las primeras pruebas con la aplicación me pregunté cómo instalar fuentes en Figma. La duda era razonable porque podía tener la necesidad de usar fuentes personalizadas, tipos de letra que no estén dentro de las opciones que la app ofrece por defecto.

Veamos entonces cómo diseñar nuestros sitios web y apps con estilo.

Fuentes de Figma

Las fuentes que vienen “instaladas” en Figma son muchas de las que puedes encontrar en el catálogo de fuentes de Google (Google Web Fonts).

Yo creo que las fuentes de Figma cubren prácticamente todas las necesidades de los diseñadores UX / UI, pero siempre hay casos puntuales. En algún momento nos veremos trabajando en un proyecto que tenga una fuente comprada, una Premium o una diseñada a medida. En esos casos usaremos Figma con fuentes personalizadas.

Fuentes personalizadas

Para usar tipos de letra especiales siempre vamos a instalar las fuentes en nuestro sistema operativo. Podemos hacerlo de muchas formas:

• Utilizando el gestor de fuentes del propio sistema: Catálogo Tipográfico en macOS o la Lista de fuentes de Windows 10.
• Instalar fuentes en un gestor externo como Suitcase Fusion, Typeface, RightFont, FontExplorer X, FontExpert, FontBase o NexusFont. Hay muchos más, pero estos son los más utilizados en ordenadores Mac o con el sistema operativo de Microsoft.

Hablemos de los dos escenarios en los que un usuario de Figma puede trabajar: utilizar la aplicación en el navegador web o instalar la app de escritorio.

Figma Font Helper

Si usamos Figma en browsers como Google Chrome, Safari, Mozilla Firefox, etc, tendremos que “conectar” a Figma con las fuentes que hemos instalado en nuestro ordenador (o computadora).

Para hacerlo vamos a utilizar la aplicación Figma Font Helper, esta app es gratuita.

• Se ejecutará en segundo plano cuando abras una sesión de Figma en tu navegador.
• Si utilizas mucho la aplicación, la puedes incluir en la lista de aplicaciones que se ejecutan automáticamente al encender tu computadora u ordenador.

La puedes conseguir en la sección Fuentes de la configuración de tu cuenta. Pero si quieres ir más rápido te dejo un link para descargar Figma Font Helper.

Algunos lectores me han dicho que Figma Font Helper no detecta las fuentes instaladas en el sistema. Eso podría ocurrir por estar usando Figma Font Helper en un sistema operativo para el que no se ofrece soporte. Recomiendo entonces comprobar siempre los requerimientos mínimos.

No me quiero olvidar de Adobe Fonts, los diseñadores que usan las fuentes de Adobe (antes conocido como Adobe Typekit) también necesitan instalar Figma Font Helper.

Si en algún momento necesitas desinstalar Figma Font Helper te recomiendo borrar la aplicación con el programa desinstalador que también encontrarás en la configuración de tu cuenta.

Figma en tu escritorio

Si como yo utilizas la aplicación de escritorio de Figma, tanto la versión de Mac como la de Windows, no necesitas instalar Figma Font Helper. La aplicación desktop se encargará de conectar Figma con tus fuentes personalizadas.

Fuentes perdidas

Cuando abras un archivo de Figma en el que uses fuentes a medida y por alguna razón la aplicación no las encuentre, te mostrará una ventana de aviso. En ella verás una lista con las familias y los estilos de las fuentes perdidas.

Deberás entonces comprobar si las fuentes están instaladas en tus sistema, si necesitas ejecutar tu gestor de fuentes o el Figma Font Helper. Desde la misma ventana podrás también reemplazarlas por otras.

Ya sabemos cómo instalar o añadir fuentes a Figma. Si todavía tienes dudas o necesitas hacer una pregunta puntual por favor deja un comentario, te responderé rápidamente.

Muchas gracias.

Más trucos sobre Figma

Si te interesan los tips de Figma te dejo dos enlaces a los siguientes artículos:

• Guía de herramientas de Figma más completa 100% en idioma español.
• Aprende a usar la mejor herramienta para diseño UX y UI
• Monta diseños y prototipos en Figma como un profesional

Template UX Designer para usar en Figma Sites

Duplica la plantilla y úsala en tus proyectos.

Cómo pasar un diseño de Figma Sites a WordPress

Te explico la mejor solución para hacerlo.

Cómo hacer un presupuesto de diseño UX

Evita dolores de cabeza y no pierdas dinero.