En la construcción de Design Systems modernos, existe un problema silencioso que genera fricción constante en el handoff: la discrepancia entre cómo Figma y CSS interpretan la altura de línea (line-height).

Para un desarrollador frontend, la buena práctica es indiscutible: el line-height debe ser un valor unitless (sin unidad).

Sin embargo, en Figma, ese mismo valor nos obliga a una traducción mental constante, apareciendo como un porcentaje: 160%.

¿Es un error de la herramienta? No, es una diferencia en el modelo de representación. Pero esa pequeña "traducción" es el origen de inconsistencias visuales, deuda técnica y debates innecesarios entre diseño y desarrollo.

Por qué el Line-height es una relación, no un píxel

La tipografía en la web es fluida. Definir la altura de línea en píxeles fijos (px) es una práctica obsoleta que rompe la adaptabilidad del texto. La altura de línea debe entenderse como una relación proporcional al tamaño de la fuente (font-size).

Los valores unitless en CSS son el estándar de oro por razones críticas:

  • Herencia perfecta: Al no tener unidad, el valor se recalcula dinámicamente si el tamaño de fuente cambia en elementos hijos.
  • Accesibilidad y Zoom: Respetan las preferencias de usuario sin romper el layout.
  • Escalabilidad: Permiten que el sistema tipográfico sea verdaderamente responsivo.

El conflicto surge porque Figma, nativamente, no soporta esta nomenclatura unitless. Nos obliga a hablar en porcentajes (1.5 → 150%), creando una barrera lingüística en el código fuente del diseño.

El costo oculto en los Design Systems

Esta diferencia de formato parece trivial, pero a escala empresarial provoca:

  • Tokens mal documentados: Variables que no coinciden entre el JSON de diseño y el CSS final.
  • Conversiones manuales propensas a error: Desarrolladores calculando porcentajes a decimales en cada implementación.
  • Pérdida de la "Single Source of Truth": Cuando el código dice una cosa y el diseño dice otra, la confianza en el sistema se erosiona.

Son estos "detalles pequeños" los que, acumulados, impiden la automatización real del handoff.

La Solución: Unitless Line Height & Tokens (CSS Ready)

En Spotmind, no nos conformamos con las limitaciones de las herramientas. Ante la falta de una solución nativa que alineara nuestra visión de ingeniería con el diseño UI, decidimos construirla.

Desarrollamos el plugin Unitless Line Height & Tokens (CSS Ready) para Figma.

Tras solo dos meses publicado en la comunidad, más de 50 equipos de producto ya lo están utilizando, validando que esta es una necesidad real en la industria.

¿Qué hace diferente a este plugin?

Esta herramienta actúa como un puente traductor automático entre la interfaz visual y el código de producción:

  1. Input Unitless Real: Permite a los diseñadores introducir valores como 1.5 o 1.2 directamente.
  2. Conversión Automática: El plugin se encarga de transformarlo al porcentaje que Figma necesita (150%) sin intervención humana.
  3. Dev Mode Impecable: Lo más importante es que, al inspeccionar el código, el desarrollador recibe el snippet limpio y correcto: line-height: 1.5;.
  4. Sincronización de Variables: Mantiene los tokens actualizados y sincronizados a través de los diferentes modos (Light/Dark).

Listo para la implementación real

Diseñamos este plugin pensando en equipos que trabajan con estándares de ingeniería de software. Incluye capacidades avanzadas como la exportación JSON multi-modo compatible con los estándares del W3C, facilitando la integración directa con frameworks como Tailwind CSS o arquitecturas de Design Tokens personalizadas.

En Spotmind, creemos que las herramientas deben adaptarse al flujo de trabajo del equipo, y no al revés.

CSS