Estilos de texto CSS en Figma: line-height, letter-spacing y formato por tramo

Respuesta corta

Los estilos de texto CSS se corresponden con propiedades de texto de Figma, pero los modelos son distintos. El interlineado en Figma es Auto, píxeles o un porcentaje del tamaño de fuente, mientras que CSS admite normal, un número sin unidad, una longitud o un porcentaje. El letter-spacing añade espacio al predeterminado de la fuente en CSS, y Figma lo aplica a una capa completa o a una selección. El formato en línea, como negrita, enlaces y color, se convierte en tramos (runs) separados dentro de una sola capa de texto. Esta página muestra cómo se corresponde cada cosa y qué revisar después de una importación.

Line height: Auto, px y porcentaje en Figma, cuatro formas en CSS

Qué guarda Figma

De forma predeterminada, Figma fija el interlineado en Auto, calculado a partir del interlineado por defecto de la fuente. También puedes fijar un valor en píxeles (px) o un porcentaje del tamaño de fuente. Al cambiar entre valor fijo y porcentaje, Figma convierte el valor al píxel más cercano, así que un ida y vuelta puede desplazar un valor una fracción de píxel.

El código de los plugins ve las mismas tres opciones: un LineHeight es { value, unit: "PIXELS" }, { value, unit: "PERCENT" } o { unit: "AUTO" }, tal como lo define la documentación de plugins de Figma.

Qué puede decir CSS

La referencia de MDN sobre line-height enumera cuatro formas:

La tabla compara el valor una vez resuelto por el navegador. No es una promesa sobre cómo lo convierte cada herramienta.

Por qué importa la herencia

Un número sin unidad se recalcula en cada elemento que lo hereda, a partir del tamaño de fuente de ese elemento. Una longitud o un porcentaje se convierte primero en una longitud absoluta, y los descendientes heredan esa longitud fija. El ejemplo de MDN lo deja claro: un h1 de 30px con line-height: 1.1 obtiene 33px, pero el mismo h1 que hereda 1.1em de un padre de 15px obtiene 16.5px.

Dos títulos pueden verse idénticos en el navegador y aun así resolverse en números distintos. Lee el valor resuelto en las herramientas de desarrollo, no la regla que crees que se aplica.

Qué revisar

• Compara el interlineado resuelto de un título y de un párrafo de cuerpo con el valor en Figma.
• Espera que Auto difiera de normal cuando cambia la fuente, porque ambos dependen de ella.
• Si los números coinciden pero las líneas se ven distintas, revisa primero la fuente.

Letter spacing: espacio extra, no un reemplazo

En CSS, letter-spacing especifica espacio adicional entre caracteres, además del espaciado predeterminado. La palabra clave normal no equivale a 0: permite que el navegador ajuste el espaciado para justificar el texto. Los porcentajes se calculan respecto al ancho del carácter de espacio de la fuente, y los valores negativos están permitidos, aunque el navegador puede limitarlos.

Hay dos consecuencias importantes en un archivo de diseño:

• Las ligaduras se desactivan. Cuando letter-spacing no es cero, los navegadores no aplican ligaduras opcionales como liga y clig. Un texto que muestra una ligadura con 0 puede dejar de mostrarla al definir el tracking.
• Los valores muy negativos superponen letras. MDN advierte que los valores negativos grandes pueden volver las palabras irreconocibles, así que revisa a ojo los títulos muy apretados.

Figma permite ajustar el espaciado entre letras de una capa de texto completa o de una selección de texto. Su artículo de ayuda da una pista de conversión: una unidad de tracking (1/1000em) equivale aproximadamente a 0.001em de letter-spacing en CSS. Si seleccionas texto con valores de espaciado distintos, Figma escala el espaciado de forma proporcional.

Para probarlo, elige una etiqueta en mayúsculas y un párrafo de cuerpo. Las etiquetas suelen llevar tracking positivo, así que una diferencia aparece primero ahí.

Una capa de texto, varios tramos

Un tramo (run) es una serie de caracteres con el mismo estilo. CSS crea tramos allí donde un elemento en línea cambia el estilo: un <strong>, un <a>, un <span style="color: ...">. En Figma, una sola capa de texto puede contener muchos tramos.

La API de plugins de Figma expone cada tramo como un StyledTextSegment, con su propio fontName, fontSize, fontWeight, textDecoration, textCase, lineHeight, letterSpacing, fills y hyperlink, además de paragraphSpacing. Por eso un párrafo puede contener una palabra en negrita, una frase enlazada y un número de color sin convertirse en cuatro capas.

Valores mixtos

Cuando los caracteres de una capa no coinciden en una propiedad, Figma no tiene un único valor que mostrar. La documentación de plugins indica que siempre hay que considerar que una propiedad de texto puede tener valores mixtos, y la API devuelve el valor especial figma.mixed. En la interfaz, el campo muestra Mixed. Selecciona un rango más pequeño para ver el valor de cada tramo.

Algunas propiedades también se aplican a selecciones. La decoración de texto (subrayado, tachado) y las mayúsculas y minúsculas (mayúsculas, minúsculas, capitalizar, versalitas) se pueden aplicar al texto seleccionado, y el cambio de mayúsculas no es destructivo. El espaciado entre párrafos es un valor en píxeles.

Las fuentes deciden qué hacen tus estilos de texto

El interlineado Auto y el ancho de los glifos vienen de la fuente. Si la fuente del archivo no es la de la página, todos los números anteriores pueden ser correctos y el texto aun así saltar de línea de otra manera. La documentación de plugins de Figma señala que las fuentes que faltan son muy comunes en archivos reales, y que una fuente no cargada no es lo mismo que una fuente ausente.

Cuando una importación sustituye una fuente, trata el interlineado y el letter-spacing como no verificados hasta corregir la fuente. En UnHTML, cada sustitución aparece en el informe de importación. Para conocer el mecanismo, lee cómo funciona la sustitución de fuentes en Figma, y para ver cifras, la sustitución de fuentes en importaciones de web a Figma.

Qué revisar después de una importación

Empieza por el texto más grande y ve bajando:

1. Títulos. Compara el interlineado y el letter-spacing resueltos con Figma. Los títulos apretados delatan ambos.
2. Texto de cuerpo. Un line-height sin unidad como 1.6 debería leerse como 160% o el valor equivalente en px.
3. Etiquetas en mayúsculas. Revisa el tracking y las mayúsculas y minúsculas.
4. Tramos en línea. Haz clic dentro de un párrafo con un enlace o una palabra en negrita y confirma que el rango, y no la capa entera, lleva el estilo.
5. Fuentes. Resuelve primero las fuentes sustituidas y vuelve a revisar los pasos 1 a 3.
6. Saltos de línea. Si el texto salta de línea de otra forma, suele apuntar al ancho o al auto layout, como se explica en flexbox convertido en auto layout.

A partir de 2026, estos son los comportamientos documentados de Figma. UnHTML produce capas editables, no un clon exacto al píxel, así que usa esta lista como una revisión real.

Conclusión

El interlineado, el letter-spacing y los tramos tienen un modelo distinto en CSS y en Figma. Compara el valor CSS resuelto con el valor de Figma, espera que Auto y normal cambien con la fuente, y revisa rangos en lugar de capas completas. Empieza por las fuentes, porque la mayoría de las diferencias de texto nacen ahí.

Preguntas frecuentes

¿Por qué el interlineado importado se ve distinto al de la página?

El line-height de CSS puede ser normal, un número sin unidad, una longitud o un porcentaje, y Figma guarda Auto, píxeles o un porcentaje del tamaño de fuente. El resultado depende de la fuente y de cómo se heredó el valor en la página. Compara el valor resuelto en las herramientas de desarrollo con el valor en Figma.

¿El letter-spacing se convierte uno a uno?

No a simple vista. El letter-spacing de CSS es espacio extra añadido al espaciado predeterminado de la fuente, a menudo escrito en em o px. El propio consejo de Figma equipara 1/1000em de tracking con 0.001em en CSS. Comprueba el valor en un título de muestra.

¿Puede una capa de texto tener estilos distintos?

Sí. Una capa de texto de Figma puede contener varios tramos, cada uno con su propia fuente, tamaño, interlineado, espaciado entre letras, decoración y color. Selecciona un rango para ver o cambiar un solo tramo.

¿Qué significa Mixed en un campo de texto?

Significa que los caracteres seleccionados no comparten un único valor para esa propiedad. Selecciona un rango más pequeño para ver cada valor.