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.
Artículos relacionados
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
Aprende a usar Figma, Sketch y Webflow
Suscríbete gratis para recibir notificaciones cuando publique nuevos contenidos.
Información de privacidad
En este sitio web te solicito algunos datos para enviarte correos electrónicos con las publicaciones que hago. Finalidad de los datos: Enviar correos electrónicos con las novedades publicadas en el blog. Legitimación: Aceptación expresa de la política de privacidad. Almacenamiento de los datos: Base de datos alojada en Siteground España. Duración: Hasta que lo solicites. Derechos: En cualquier momento puedes limitar, recuperar y borrar tu información.
No entendí claramente como es que hago para instalar la fuente, necesito instalar la fuente de san francisco en figma pero no entiendo muy bien, yo ya tengo descargada figma en mi pc, pero no sé como aplicar la fuente, mi pc es un mac pero con una versión muy antigua
Viviana, veamos… en tu caso si tienes un Mac lo que deberías hacer es instalar la fuente San Francisco (si es que tu Mac no la tiene) a través del Catálogo tipográfico o algún otro gestor de fuentes. Pero primero comprobaría si tu Mac ya la tienes instalada… ¿qué modelo de Apple es y qué versión de macOS estás utilizando? Por último, con la fuente instalada en tu sistema puedes usar la aplicación de Figma y utilizar la San Francisco en tus diseños.
Juan, gracias, gracias, gracias por esta información! Descubrí algo nuevo que puedo implementar en Figma y me hace amar más esta app. :)
Muchas gracias Camila por dejar tu comentario, y qué bueno que guste tanto Figma. Es una aplicación que sin duda ha llegado para cambiar el trabajo con diseño UX/UI.
Hola Juanpol! Me podrías explicar qué debo hacer una vez que instalo el Figma Font Helper?
Hola Paola, cuenta con ello! Una pregunta, qué sistema operativo utilizas? Te lo pregunto para centrar el artículo en tu caso de uso. Gracias.
Hola Juanpol, tengo la versión 10.9.5 de Mac de escritorio, he instalado Figma Font Helper ya que por ser un procesador un poco viejo no me permite descargar la App, es solo que ya descargue Figma Font Helper y no logro encontrar mis tipografías dentro de Figma… estoy haciendo algo mal?
Muchas gracias
Ana
Hola Ana, ante todo gracias por dejar tu inquietud… veamos, me queda claro que no puedes instalar la aplicación de escritorio de Figma. Y por otro lado quieres usar Figma en el browser con el Figma Font Helper… y no encuentras las fuentes que tienes montadas en tu sistema. Lo primero que se me viene a la mente es ver los requerimientos mínimos de Figma Font Helper… y encuentro esto «macOS: Must be running 10.11 (OS X El Capitan), or later». Por lo visto no funciona en tu sistema Ana. Creo que -si puedes- es momento de actualizar tu ordenador o trabajar con fuentes de Figma, es decir… Google Fonts.
Espero que esta respuesta sirva, cualquier otra duda avísame. Gracias.
Hola. no tengo la fuente calibri en la App online de Figma. Y sin embargo si que la tengo instalada en mi Windows 10 Pro.
¿alguna manera de solucionarlo?
Hola Noelia… si estás usando Figma desde tu navegador (browser) y quieres usar las fuentes instaladas en tu sistema Windows 10 debes instalar la aplicación Figma Font Helper.
Hola! necesito instalar San francisco para usar en Figma, en teoría ya la tengo instalada en el computador, pero no aparece en Figma, yo tengo Windows… :( no se si eso sea un problema. (Ya descargué Figma Font Helper pero no se ni cómo usarlo) ¿Qué debería hacer?
Natalia, nunca me he visto delante de un caso como el tuyo, así que investigaré el tema y publicaré un nuevo post en el blog con el análisis y las pruebas que haga. Para ir ganando tiempo te pregunto algunas cosas, qué versión de Windows tienes instalada? Cómo o dónde conseguiste la fuente San Francisco? La instalaste directamente en el sistema de Windows o estás utilizando un gestor de fuentes? Con más detalles de tu caso puedo entender mejor lo que te ocurre. Gracias.
Hola Juanpol, tengo Windows 7 y utilizo la aplicación de Figma desde el navegador Google Chrome (no puedo instalar la versión escritorio porque es apta para 64 bits y mi sistema es de 32). Instalé la aplicación Figma Font Helper y también tengo instalado NexusFont. Quiero utilizar otro tipo de tipografías en Figma pero no me las habilita y no sé cómo hacerlo? Cómo puedo solucionarlo? Gracias!
Hola Karina, el problema lo tienes en la versión de tu sistema Windows. En el momento de responder esta pregunta el asistente de fuentes de Figma tiene los mismos requisitos de navegador que el uso de Figma en el navegador, es decir… Windows 8.1 o posterior. Si tu hardware lo permite te sugiero actualizar tu sistema operativo. Cualquier otra duda aquí estoy, muchas gracias.
Hola, como estás? Perdón yo tengo font base hace años y Figma no me carga las fuentes… no se cómo solucionarlo
Hola Mica, si usas FontBase y Figma no encuentra tus fuentes es probable que tengas alguna incompatibilidad en tu sistema. Puedes darnos más datos de tu entorno de trabajo? Con más información seguramente podremos encontrar una solución. Muchas gracias.
Me voy más confundido de lo que vine.
Buenas! Cómo estás? Instalé SF Pro desde Human Interface y si bien la veo en sistema (tipo de archivo DMG), no me aparece en Figma. Tengo Windows 10 Pro. Cerré la aplicación de Figma, la volví a abrir y nada. ¿Por qué puede ser? Muchas gracias!
Ayelén, si tienes Windows te recomiendo descargar las fuentes SF para Windows y plataformas que no son de Apple, te dejo un link donde las puedes conseguir.
muchas gracias parcero
Muchas gracias a ti Yhanka!