Line Height Tokens

About this plugin

Line Height Tokens es un plugin para Figma que te permite trabajar con line-height porcentual real, exactamente como en CSS. Convierte automáticamente valores unitless (ej: 1.5) a porcentajes visuales (150%) y conecta tus variables tipográficas con tokens escalables para un Sistema de Diseño limpio, consistente y preparado para desarrollo.

Ideal para quienes buscan una solución precisa para manejar line height, leading, tokens tipográficos, y alineación vertical en Design Systems. Una alternativa moderna a plugins como The Good Line Height y un complemento perfecto a Tokens Studio cuando necesitas controlar el line-height porcentual con exactitud.

Características Principales

✅ Conversión automática Unitless → % Define 1.5 en tus variables y obtén 150% en el lienzo, alineado con line-height: 1.5; de CSS.

✅ Visibilidad total en Dev Mode Gracias a la nueva función Codegen, el nombre del token y su valor real aparecen explícitamente al inspeccionar.

✅ Actualización masiva inteligente Mantiene el vínculo "fantasma" con tus variables para permitir actualizaciones globales en un clic.

🚀 Cómo usarlo

1 Crea Variables: En tus Variables Locales (formato Float), crea tokens con valores unitless (ej: lh-base: 1.5).

2 Aplica: Selecciona tus textos, abre el plugin y haz clic en el token deseado. El plugin aplicará visualmente 150%.

3 Inspecciona: En Dev Mode, el desarrollador verá el snippet de código CSS exacto con el nombre de tu variable.

4 Sincroniza: Si cambias un valor (ej: de 1.5 a 1.6), abre el plugin y pulsa "Sincronizar Página" para actualizar todo instantáneamente.

Desarrollado por el equipo de Diseño UI de Spotmind

🔗 www.spotmind.cl

-----

Line Height Tokens is a Figma plugin that lets you work with real proportional line-height, exactly like in CSS. It automatically converts unitless values (e.g., 1.5) into visual percentages (150%) and links your typographic variables to scalable tokens for a clean, consistent, and development-ready Design System.

It’s ideal for anyone who needs a precise solution for managing line-height, leading, typography tokens, and vertical alignment in Design Systems. A modern alternative to plugins like The Good Line Height, and a perfect companion to Tokens Studio when you need exact proportional line-height control.

Key Features

✅ Automatic Unitless → % Conversion

Define 1.5 in your variables and get 150% on the canvas—fully aligned with line-height: 1.5; in CSS.

✅ Full Visibility in Dev Mode

Thanks to the new Codegen feature, both the token name and its real value appear clearly when inspecting elements.

✅ Smart Bulk Updating

Maintains a “ghost link” to your variables, allowing global updates with a single click.

🚀 How to Use It

1. Create Variables

In your Local Variables (Float format), create unitless tokens (e.g., lh-base: 1.5).

2. Apply

Select your text layers, open the plugin, and click the token you want. The plugin will visually apply 150%.

3. Inspect

In Dev Mode, developers will see the exact CSS snippet with your variable name.

4. Sync

If you change a value (e.g., from 1.5 to 1.6), open the plugin and hit “Sync Page” to instantly update everything.

Built by the UI Design Team at Spotmind

🔗 www.spotmind.cl