Qué fuente usa Figma: Inter y Figma Sans

¿Qué fuente usa Figma? En Figma Design, Inter es la fuente predeterminada para las capas de texto nuevas durante una sesión. Eso describe el lienzo de diseño, no todos los productos de Figma ni su identidad de marca: Figma usa una familia propia llamada Figma Sans, junto con Figma Condensed, Figma Mono y Figma Hand. Si un archivo se ve distinto en otro ordenador, comprueba la fuente aplicada a la capa, las fuentes compartidas o instaladas y los avisos de fuentes ausentes antes de cambiar el diseño.

¿Qué fuente usa Figma por defecto?

La guía de propiedades de texto de Figma indica que las capas nuevas usan Inter como fuente predeterminada durante una sesión. «Predeterminada» es un valor inicial, no una norma que obligue a todas las capas existentes, plantillas o bibliotecas compartidas a usar Inter. Selecciona una capa de texto y revisa la familia en la barra lateral derecha; el ajuste visible de esa capa es la respuesta fiable para ese objeto. Un archivo puede combinar familias deliberadamente, y una selección dentro de una misma capa puede tener otra fuente.

Esta distinción ayuda a encontrar la causa de una discrepancia. Si un título no parece Inter, revisa el texto seleccionado en vez de asumir que conserva el valor inicial. Un componente copiado puede mantener su familia original. Una biblioteca puede aplicar un estilo de texto. Un archivo también puede usar una fuente compartida por la organización o instalada localmente. La documentación de Figma sobre propiedades de texto explica cómo inspeccionar familia, estilo y tamaño. El valor predeterminado explica con qué empieza una capa nueva; no identifica la tipografía del logotipo, la web comercial ni todas las superficies de Figma.

Para comprobarlo rápidamente, crea una capa temporal en una zona libre, selecciónala y lee la familia que aparece en la sección Texto. Después compárala con el componente o estilo que querías aplicar. Si la capa nueva indica Inter, pero un encabezado de marca usa otra familia, ambas elecciones pueden ser correctas: una es el valor inicial de la sesión y la otra una decisión explícita. Elimina la capa temporal para que no se cuele en el archivo final.

Distingue la fuente de la interfaz y la tipografía de marca

Hay tres preguntas distintas que suelen resumirse en «la fuente de Figma»: qué familia recibe una capa nueva de diseño, qué fuentes muestran los controles de la aplicación y qué tipografías aparecen en la marca Figma. El centro de ayuda identifica Inter como fuente de interfaz y valor predeterminado en Figma Design. Por separado, el equipo de marca cuenta que creó Figma Sans con Grilli Type; el sistema incluye diseños de texto, display, condensados y monoespaciados, con ejes variables de peso y anchura. Son datos relacionados, pero no respuestas rivales.

Identifica la superficie antes de elegir. Para una maqueta de producto, inspecciona las capas y los estilos del archivo. Para los menús y paneles de la propia aplicación, la guía oficial sobre conflictos de fuentes llama a Inter la fuente de interfaz de Figma. Para su identidad, consulta la historia de marca publicada por Figma, que describe Figma Sans y familias compañeras. No copies Figma Sans a un producto de cliente solo porque aparezca en un artículo de marca; úsala únicamente si la licencia y el encargo lo permiten.

Esta distinción evita un error de traspaso. Una persona puede decir «usa la fuente de Figma» mientras quien desarrolla entiende «usa la fuente de marca de Figma». Especifica familia, función y alternativa: por ejemplo, «texto UI: Inter regular; títulos: Inter semibold; titular de campaña: familia display aprobada». Si el diseño necesita Figma Sans, identifícala expresamente y asegúrate de que el equipo pueda acceder a ella. Para un flujo de página más amplio, consulta nuestro tutorial de diseño web con Figma.

Comprueba que el equipo puede acceder a la fuente

Que un nombre aparezca en un archivo no garantiza que todas las personas puedan reproducirlo. Figma documenta varias fuentes: las que proporciona Figma, las instaladas en un dispositivo y las compartidas o cargadas por una organización. La guía de conflictos explica la precedencia y menciona un caso especial para Inter: una copia instalada localmente o compartida por la organización puede prevalecer sobre la versión de Figma en las circunstancias descritas. Conviene estandarizar el origen real, no solo la etiqueta.

Si aparece un aviso de fuente ausente, no sustituyas la familia enseguida. Identifica los estilos y las capas afectadas, y comprueba si la fuente pertenece a una biblioteca compartida o a una instalación local. La guía de Figma para instalar fuentes explica que quienes usan la aplicación de escritorio pueden acceder a fuentes locales desde ella, mientras que en el navegador hace falta instalar el servicio de fuentes de Figma para añadir fuentes del equipo. También documenta límites por plataforma; consulta la guía vigente para el sistema y navegador de cada persona.

Un traspaso útil registra el nombre de la familia, su origen, los pesos necesarios y una alternativa. Si una fuente de marca solo está instalada en el equipo de una diseñadora, el resto puede ver una sustitución o un aviso. Si la organización tiene una fuente compartida, confirma que las personas editoras tengan acceso. Usa otra familia solo con aprobación de quien lleva el diseño: las métricas cambian los saltos de línea, la altura de las tarjetas, la anchura de los botones y el ritmo de la página. Comprueba el archivo desde otra cuenta o dispositivo antes de dar por terminado el traspaso.

La guía del selector de fuentes explica cómo buscar, previsualizar una familia sobre el texto y filtrar la lista por origen. Úsalo como herramienta de diagnóstico: muestra qué hay disponible en el entorno actual, pero el equipo receptor aún necesita un origen reproducible y los permisos adecuados.

Convierte Inter en un sistema tipográfico de interfaz

Saber que Inter es el valor predeterminado no significa que cada interfaz deba conservar los ajustes iniciales. Un sistema de diseño necesita funciones: titular destacado, título de página, encabezado de sección, cuerpo, etiqueta, ayuda y dato. Asigna a cada función un tamaño, peso, interlineado y color con intención, y guarda las combinaciones repetidas como estilos de texto o variables si tu flujo de Figma lo permite. La meta es una jerarquía predecible y fácil de ajustar, no decenas de estilos casi iguales.

Empieza por el contenido que la gente recorre con la vista. Un panel de administración podría usar un estilo destacado para el título de página, uno compacto para las tarjetas, un cuerpo legible para las descripciones y una tipografía tabular o monoespaciada solo cuando la alineación numérica ayude. No uses el peso como única señal de jerarquía: el espacio, el tamaño, el contraste y la posición también comunican relaciones. Revisa el texto más pequeño con un zoom realista y distingue las etiquetas del texto de ayuda.

Prueba con cadenas reales, no con un texto de muestra breve. Incluye una etiqueta traducida larga, un botón de dos líneas, un mensaje de validación, una cantidad alta y un nombre con tildes. Las métricas cambian el ajuste de línea y, con él, la geometría de tarjetas, formularios y navegación adaptable. Comprueba que los componentes crezcan o envuelvan el texto adecuadamente y que el foco y el contraste sigan visibles. La página actual de EmviUI describe estilos tipográficos editables junto con componentes reutilizables y bases alineadas con Tailwind. El kit da un punto de partida concreto, pero la marca y la accesibilidad del producto determinan los roles finales.

La muestra local que aparece abajo es un espécimen tipográfico de EmviUI: enseña el alfabeto Inter y varios roles display y de texto con distintos pesos. Una captura aparte de la biblioteca de colores de Figma ayuda a separar los tokens de color de los estilos de texto; solo muestra roles de color. Es un ejemplo de escala, no una captura del selector de Figma ni una afirmación de que todos los archivos EmviUI usen esa escala exacta. Úsala para comparar jerarquías y consulta el archivo editable para confirmar familias y estilos. Nuestra guía de tokens de diseño en Figma explica cómo trasladar decisiones con nombre a un sistema de código.

Elige una tipografía que funcione en la interfaz real

Inter es una opción versátil para muchas interfaces, pero «predeterminada» no significa «mejor para todo proyecto». Elige según los idiomas, la densidad del contenido, la personalidad de marca y los dispositivos admitidos. Una familia que se lee bien en inglés puede tener otra cobertura o métricas en otra escritura. Una fuente display puede destacar en una campaña y cansar en una pantalla densa de ajustes. Define pocos roles y comprueba cada idioma con texto representativo.

Prepara una lámina de comparación con el mismo contenido en cada candidata: título, párrafo, etiqueta de formulario, valor numérico y botón. Compara las formas a los tamaños que verá la gente, no solo en una presentación ampliada. Revisa signos, números, caracteres acentuados y los pesos que ofrece la familia. Si dependes de una fuente variable, confirma que los ejes y estilos necesarios estén disponibles en el entorno del equipo y en la implementación del navegador.

En una interfaz, la legibilidad también depende del comportamiento. Las palabras largas y las etiquetas traducidas pueden saltar de forma distinta. Un cambio de familia puede empujar una acción principal o hacer que dos columnas compitan. Prueba pantallas estrechas, texto ampliado y el navegador: el lienzo de Figma es un espacio de especificación, no sustituye la prueba de la página publicada. Documenta la tipografía junto a los roles de espacio y color. Los estilos de EmviUI ayudan a explorar jerarquías dentro de un kit; su correspondencia con Tailwind orienta el traspaso, pero desarrollo debe comprobar archivos, CSS, licencias y alternativas en el repositorio. Nuestro flujo de Figma a Tailwind trata esa verificación.

Lista de control para entregar tipografía en Figma

Antes de compartir el archivo, deja la decisión lista para reproducirse. Indica si el diseño usa Inter como valor práctico inicial, una familia de marca aprobada o una elección específica del proyecto. Nombra los estilos por su función, como `Cuerpo / Predeterminado` o `Título / Página`, no solo por su aspecto. Mantén una lista manejable para que otra persona sepa qué opción elegir.

Comprueba el origen y el acceso. Indica si la familia está disponible en Figma, instalada localmente o compartida por la organización. Confirma los pesos, estilos, ejes variables y escrituras requeridos. Si alguien no tiene acceso, resuélvelo o pide aprobación para una alternativa antes de cambiar las capas. No conviertas el texto en contornos como solución general para un diseño de producto editable: perderías su semántica y dificultarías las revisiones.

Por último, revisa instancias reales: un botón con la etiqueta más larga, un campo con ayuda y error, una tarjeta con un título extenso y una página en anchura móvil. Comprueba interlineado, truncado, ajuste, alineación y crecimiento del componente. Incluye la pila de fuentes prevista para el navegador y sus alternativas en el traspaso. Si la implementación usa otra familia que la maqueta, documenta la diferencia y valida las medidas en el navegador. El nombre de un valor predeterminado da contexto; un sistema reproducible mantiene coherente el producto.

Preguntas frecuentes