Unitless Line Height & Tokens (CSS Ready)

About this plugin

Stop fighting with pixels vs. percentages in CSS.

Figma uses % or px for line-height. CSS prefers unitless values (e.g., 1.5) for better inheritance. This plugin bridges that gap automatically.

🚀 Key Features:

Unitless to % Conversion: Define your token as 1.5 (number). We auto-convert it to 150% in Figma visuals, but keep the code clean.

⚡ Auto-Sync: Recognizes changes in your variables and updates text nodes instantly.

👨‍💻 Dev Mode Ready: Inspect any text node and get the perfect line-height: 1.5; CSS snippet directly in Figma's Dev Mode.

📦 BONUS: Multi-Mode JSON Export: Download your entire Variable collection (Colors, Numbers, Strings) as W3C-friendly JSON files, separated by Mode (Light/Dark).

Why use this? Ideal for Design Systems that need strict alignment between Figma Variables and CSS Frameworks (Tailwind, implementation variables, etc.).

Built by the UI Design Team at Spotmind

🔗 www.spotmind.cl

🇪🇸 Descripción en Español

Deja de pelear entre píxeles y porcentajes en tu CSS.

Figma te obliga a usar % o px para la altura de línea (line-height). Sin embargo, las buenas prácticas de CSS prefieren valores unitless (ej: 1.5) para una mejor herencia en el código. Este plugin es el puente automático entre ambos mundos.

🚀 Funcionalidades Clave:

Conversión Unitless a %: Define tu variable como un número (1.5). Nosotros lo convertimos visualmente a 150% en Figma para que se vea bien, pero mantenemos el valor limpio para desarrollo.

⚡ Auto-Sync: El plugin detecta cambios en tus variables o modos y actualiza los textos en tiempo real.

👨‍💻 Dev Mode Ready: Inspecciona cualquier texto y obtén el snippet de CSS perfecto (line-height: 1.5;) directamente en el Dev Mode de Figma, listo para copiar.

📦 BONUS: Exportación JSON Multi-Modo: Descarga toda tu colección de variables (Colores, Números, Strings) como archivos JSON estándar W3C, separados automáticamente por Modo (Light/Dark).

¿Por qué usar esto? Ideal para Design Systems que requieren una alineación estricta entre las Variables de Figma y frameworks de CSS (como Tailwind o variables de implementación).

Desarrollado por el equipo de Diseño UI de Spotmind

🔗 www.spotmind.cl