Figma no tiene una variable tipográfica. Un token de tipografía en Figma es un estilo de texto cuyas propiedades individuales - familia, tamaño, grosor, interlineado y espaciado entre letras - están vinculadas a Variables. El estilo sostiene el compuesto; las Variables sostienen los valores, los alias y las variantes por modo. Esa división es todo el modelo, y buena parte de la confusión alrededor de los tokens de tipografía viene de esperar que un solo objeto haga ambas cosas.
Atomize escanea un archivo, construye Primitivos → Atoms y audita la cobertura de rellenos, trazos, espaciado y tipografía, así que pasamos mucho tiempo viendo dónde queda la tipografía fuera del sistema de tokens. El patrón es constante: el color y el espaciado se tokenizan primero, y la tipografía queda como una lista de estilos de texto con tamaños fijos. Esta guía cubre por qué ocurre, cómo vincular Variables dentro de los estilos de texto sin romper el compuesto y cómo llegan los tokens de tipografía al código.
La arquitectura de fondo está en nuestra guía de tokens de diseño en Figma. Este artículo es la capa específica de tipografía: el mapeo de propiedades, la estructura de colecciones y los problemas de exportación que solo aparecen cuando los interlineados y las familias salen de Figma.
En resumen
- Las Variables de Figma guardan valores únicos. Ningún tipo de Variable contiene un estilo de texto completo.
- Los tokens de tipografía son estilos de texto con sus propiedades vinculadas a Variables.
- Familia, tamaño, grosor, interlineado, espaciado entre letras, espaciado de párrafo e indentación pueden vincularse por separado.
- El compuesto sigue intacto: el estilo aplica todas las propiedades a la vez y las Variables aportan los valores.
- Los modos permiten que un estilo de texto sirva a claro, oscuro o a escalas responsive sin duplicar estilos.
- Las fuentes variables no tienen relación. Son una característica del archivo de fuente, no de las Variables de Figma.
Por qué Figma no tiene una Variable de tipografía
Cada Variable de Figma guarda un valor de un tipo: un color, un número, un texto o un booleano. Un estilo de texto guarda un conjunto de valores que se aplican juntos: familia, tamaño, grosor, interlineado, espaciado entre letras y ajustes de párrafo. No hay un valor único que asignar a una variable de tipografía porque lo que se guarda es un paquete, no un punto.
La tabla siguiente separa tres conceptos que se mezclan en casi todas las conversaciones sobre tipografía. Solo el del medio es un mecanismo de tokens.
Estilos de texto, variables tipográficas y fuentes variables
| Estilo de texto | Variable tipográfica | Fuente variable | |
|---|---|---|---|
| Qué es | Un compuesto con nombre de propiedades tipográficas | Una Variable vinculada a una propiedad del estilo | Un solo archivo de fuente con ejes de grosor o ancho |
| Dónde vive | Panel de Estilos de Figma | Panel de Variables de Figma | En el archivo de fuente |
| Contiene varias propiedades | Sí | No - una propiedad por Variable | No aplica |
| Admite alias y modos | Solo mediante Variables vinculadas | Sí | No |
| Llega al código como token | Como token compuesto de tipografía | Como valor numérico o de texto | Como recurso de fuente |
La fuente variable es la fila rara. Permite que un archivo interpole entre grosores o anchos, lo cual es genuinamente útil para tipografía responsive, pero no tiene nada que ver con las Variables de Figma. Un equipo puede usar fuentes variables con un sistema tipográfico completamente tokenizado, o ninguna de las dos cosas. Confundirlas lleva a conversaciones donde una persona habla de archivos de fuente y la otra de vínculos de tokens, y ninguna lo nota.
La consecuencia práctica: no hay un único objeto “token de tipografía” que exportar desde las Variables de Figma. El compuesto existe como estilo de texto y los valores existen como Variables. Un token de tipografía completo tiene que ensamblarse a partir de ambos.
Qué se rompe cuando la tipografía queda fuera del sistema
La tipografía suele ser la última capa en tokenizarse, y el retraso tiene un costo visible. Aparece en cuatro lugares, y ninguno parece un problema de tipografía hasta que se sigue el rastro.
- Las escalas responsive se convierten en estilos duplicados. Una rampa para móvil, tablet y escritorio significa tres estilos de texto por rol, mantenidos a mano. Un modo en un solo estilo reemplaza las copias.
- Los rebrandings se atascan en las fuentes. Cambiar una familia obliga a tocar cada estilo que la nombra directamente. Una Variable de texto para la familia convierte una reconstrucción en un cambio de valor.
- Las auditorías de cobertura parecen más limpias de lo que es el archivo. Si el escaneo cuenta rellenos y trazos, un archivo con tipografía totalmente fija puede reportar una cobertura saludable.
- El código se desvía por un píxel. Los interlineados y el espaciado entre letras son las propiedades que diseño ajusta más y que ingeniería copia con menos fiabilidad. Un archivo de tokens zanja la discusión.
El tercer punto es el que vemos con más frecuencia. Un archivo puede tener una cobertura de color excelente y una capa tipográfica que nunca se vinculó, porque la auditoría se limitó a las propiedades que al equipo ya le importaban. La tipografía se vuelve deuda invisible: cada pantalla se ve bien y ningún informe la menciona.
La solución no es tokenizar todas las propiedades a la vez. Es decidir qué decisiones tipográficas son decisiones de sistema - familia, escala, rampa de grosores, ritmo de interlineado - y vincular esas, dejando los tratamientos de display puntuales como estilos simples. La división siguiente hace concreta esa decisión.
Cómo crear variables tipográficas en Figma
Construye primero la capa de valores y después vincúlala dentro de los estilos de texto. Hacerlo al revés produce estilos que referencian números en bruto y hay que reconstruir cuando aparece la capa de tokens.
- Crea una escala primitiva de tipografía como Variables numéricas. Nombra los pasos por tamaño, no por rol:
font/size/12,font/size/14,font/size/16,font/size/20,font/size/24,font/size/32. Añade primitivos para grosor, interlineado y espaciado entre letras en la misma colección. - Añade Variables de texto para las familias. Una cadena por familia, como
font/family/baseyfont/family/display. Una familia es un valor como cualquier otro, y una Variable de texto es lo que permite que un rebranding la cambie en un solo lugar. - Crea una colección semántica de tipografía. Cada entrada hace alias a un primitivo y nombra un rol:
text/body/md,text/heading/lg,text/caption. Los nombres de rol son de lo que realmente hablarán diseño e ingeniería. - Construye el estilo de texto. Define familia, tamaño, grosor, interlineado y espaciado entre letras en el estilo, y vincula cada propiedad a la Variable semántica correspondiente en lugar de escribir un valor.
- Repite para cada rol de la rampa y aplica los estilos a las capas de texto. La capa mantiene el estilo, el estilo mantiene las Variables y las Variables mantienen los modos.
El mapeo siguiente muestra la forma de las dos colecciones. La capa primitiva guarda valores en bruto y la semántica hace alias, igual que en color:
/* Primitivos - valores en bruto, sin alias */
font/size/14 = 14px
font/size/16 = 16px
font/size/24 = 24px
font/weight/400 = 400
font/weight/600 = 600
lineheight/150% = 150%
family/base = Inter
/* Tipografía semántica - solo alias */
text/body/md/family → family/base
text/body/md/size → font/size/16
text/body/md/weight → font/weight/400
text/body/md/line-height → lineheight/150%
text/heading/lg/size → font/size/24
text/heading/lg/weight → font/weight/600La división en dos colecciones no es ceremonia. Mantiene la capa semántica lo bastante pequeña para razonar sobre ella mientras la capa primitiva absorbe nuevos pasos sin renombrar roles. También hace medible la cobertura: una entrada semántica que apunta a un valor en bruto en lugar de a un primitivo es visible en el archivo, y un estilo de texto con una propiedad sin vincular es visible en el panel de Estilos.
Vincular Variables dentro de los estilos de texto
El paso de vinculación es donde sobrevive el compuesto. Un estilo de texto conserva su identidad como estilo, y cada propiedad dentro de él puede apuntar a una Variable. La documentación de Variables de Figma recoge las propiedades de un estilo de texto que aceptan un vínculo: familia, tamaño, grosor, interlineado, espaciado entre letras, espaciado de párrafo e indentación de párrafo.
Dos detalles importan en la práctica. El interlineado y el espaciado entre letras pueden expresarse en unidades distintas, y la unidad viaja con el valor: un interlineado porcentual se comporta distinto de uno en píxeles cuando cambia el tamaño de fuente. Decide la unidad por rol antes de vincular, no después. El segundo detalle es la fuente: un estilo de texto sigue nombrando una fuente, y vincular la familia no carga el archivo de fuente. Si la familia falta en el documento, el estilo cae en el fallback antes de que se ejecute cualquier lógica de tokens.
Vincula en el estilo, no en capas de texto individuales, salvo que la capa sea una excepción deliberada. Vincular por capa multiplica los lugares que hay que actualizar y esconde el sistema tipográfico dentro del lienzo. El panel de Estilos es el lugar donde el equipo puede ver toda la rampa a la vez.
Hay una contrapartida que vale nombrar. Un estilo con Variables vinculadas deja de ser portable a un archivo que no tiene esas Variables o una librería compatible. Normalmente está bien - la portabilidad sin el conjunto de tokens no es una portabilidad que valga la pena - pero significa que la librería debe publicarse y consumirse antes de que los estilos viajen.
Modos para tipografía responsive y temas
Los modos son lo que hace que las variables tipográficas valgan la configuración. Un solo estilo text/heading/lg puede tener valores de escritorio, tablet y móvil en modos separados, así que un diseño cambia toda su escala tipográfica cambiando el modo en lugar de intercambiar estilos. El mismo mecanismo maneja claro y oscuro cuando una familia o un grosor cambia entre ellos.
Dos reglas mantienen manejables los modos tipográficos. Primero, cada modo debe definir el mismo conjunto de entradas semánticas: un valor faltante en el modo tablet es un diseño roto, no un fallback. Segundo, mantén bajo el número de modos. Tres breakpoints son un sistema; doce son una hoja de cálculo con interfaz de Figma.
Los modos también exponen una pregunta estructural: ¿el interlineado debe escalar con el tamaño de fuente o mantenerse fijo por breakpoint? Ambas opciones son válidas. Lo que importa es que la respuesta esté codificada en el token y no en la memoria de una diseñadora. Si el interlineado es un porcentaje del tamaño, un primitivo sirve para toda la rampa. Si es un valor fijo en píxeles, cada paso necesita su propia entrada.
Exportar tokens de tipografía al código
La tipografía sale de Figma en dos piezas, y el hueco entre ellas es donde fallan las exportaciones. Las Variables se exportan como JSON DTCG con valores numéricos y de texto. Los estilos de texto no acompañan a una exportación de variables, porque un estilo no es una Variable. Un token de tipografía completo necesita por tanto una ruta de exportación separada para los estilos o un paso de build que ensamble el compuesto a partir de las propiedades exportadas.
La especificación DTCG tiene un tipo compuesto typography precisamente para esto. Agrupa familia, tamaño, grosor, interlineado y espaciado entre letras en un solo token, que es lo que un componente en código realmente consume:
{
"text": {
"body": {
"md": {
"$type": "typography",
"$value": {
"fontFamily": "Inter",
"fontSize": "16px",
"fontWeight": 400,
"lineHeight": "24px",
"letterSpacing": "0px"
}
}
}
}
}Un build de CSS, como Style Dictionary, puede emitir la misma forma como clase o como conjunto de propiedades personalizadas. Mantener el compuesto unido es lo que permite que un sistema de diseño cambie un rol tipográfico entero en un solo lugar en vez de editar cinco propiedades en un componente:
.text-body-md {
font-family: var(--font-family-base);
font-size: var(--font-size-16);
font-weight: var(--font-weight-400);
line-height: var(--line-height-150);
letter-spacing: var(--letter-spacing-0);
}El interlineado es la propiedad con más probabilidad de desviarse. Figma puede expresarlo como porcentaje o en píxeles, mientras que CSS acepta un multiplicador sin unidad, píxeles o porcentaje, y cada uno se comporta distinto cuando cambia el tamaño de fuente. Normaliza la unidad en el build y no en el archivo, y documenta la decisión. La misma precaución aplica al grosor: un peso numérico y un estilo con nombre como Semibold no son intercambiables entre fuentes.
Para el pipeline completo - modos, estructura DTCG y qué conserva una exportación de variables - consulta nuestra guía para exportar Variables de Figma a JSON y código. La tipografía añade una capa compuesta sobre el mismo proceso.
Preguntas reales sobre variables tipográficas
¿Puedo usar fuentes variables en Figma?
Sí, y no tienen relación con las Variables de Figma. Una fuente variable es un solo archivo que interpola entre ejes de grosor, ancho u óptico. Las Variables de Figma son valores con nombre dentro del archivo. Un equipo puede usar ambas, ninguna o una sola. Si la pregunta es cómo cambiar el grosor con un token, la respuesta es una Variable numérica vinculada a la propiedad de grosor de un estilo de texto, no una fuente variable.
¿Los estilos de texto son lo mismo que las variables tipográficas?
No. Un estilo de texto es un compuesto que aplica varias propiedades tipográficas a la vez. Una variable tipográfica, como se usa normalmente el término, es una Variable vinculada a una de esas propiedades. El estilo es el contenedor; las Variables son los valores dentro. Necesitas ambos para tener un sistema tipográfico basado en tokens.
¿Todo tamaño de fuente debe ser un token?
Tokeniza los tamaños que aparecen más de una vez y tienen un rol. Un tamaño de display puntual en una página de marketing es una decisión, no un valor de sistema, y convertirlo en token añade mantenimiento sin añadir consistencia. La prueba es reutilización más intención: si el valor tiene un nombre que un compañero reconocería y usaría de nuevo, pertenece a la escala.
¿Cómo manejo escalas tipográficas responsive?
Pon la escala en modos. Una colección semántica con modos de escritorio, tablet y móvil permite que un solo estilo de texto cambie de tamaño entre breakpoints sin duplicar estilos. Mantén estables los nombres semánticos entre modos para que un componente nunca necesite saber en qué breakpoint se renderiza.
¿Las variables tipográficas funcionan en código?
Los valores sí, pero llegan por separado. Una exportación de variables lleva tamaños, grosores e interlineados como tokens numéricos y de texto. El compuesto - qué propiedades pertenecen juntas en text/body/md - tiene que venir del estilo de texto, mediante una exportación dedicada o un paso de build que lo reensamble. Planifica ese ensamblaje antes de prometer una exportación tipográfica de un solo archivo.
Cuándo los estilos de texto son suficientes
Un producto pequeño con una marca, un tema y una rampa tipográfica estable no necesita una capa de variables tipográficas. Los estilos de texto ya dan consistencia, y un rebranding es una edición única. Vincular Variables añade una capa que solo compensa cuando los valores cambian por modo, hacen alias a primitivos o llegan al código.
Lo mismo aplica a propiedades individuales. Fijar interlineado y espaciado entre letras vale la pena en una interfaz de lectura larga. En un hero de marketing donde cada titular se dirige como pieza gráfica, vincular esas propiedades pelea con el trabajo. Tokeniza el sistema, deja visibles las excepciones y documenta cuál es cuál.
Una señal de que la capa vale la pena: más de una persona edita la tipografía, o más de una plataforma la consume. En ese punto un estilo de texto deja de ser una decisión compartida y se convierte en una costumbre local.
Veredicto final - Variables de Tipografía
Construye los tokens de tipografía como estilos de texto con Variables vinculadas, no como un objeto único que Figma no ofrece. Usa Variables numéricas y de texto para los valores en bruto, una colección semántica para los roles y modos para escalas responsive y temas. Después exporta los valores como JSON DTCG y ensambla el compuesto en el build. El sistema tipográfico solo es real cuando el estilo, las Variables y el código describen la misma rampa.
