Cómo exportar tokens de tipografía de Figma a variables CSS

Los colores suelen pasar de Figma al código sin problema. La tipografía es donde los design systems se desordenan: un título mide 32px en Figma, 2rem en un componente y 30px en otro. Convertir tus estilos de texto en tokens, y esos tokens en variables CSS, le da a diseño y código una sola fuente de verdad.

1. Modela la tipografía como variables en Figma

Los estilos de texto de Figma no son variables, así que empieza creando variables para las piezas que forman un estilo de texto. Una estructura común es una colección llamada Typography con:

• Variables de texto para las familias tipográficas, como font/family/display y font/family/body
• Variables numéricas para los tamaños, como font/size/sm, font/size/md, font/size/xl
• Variables numéricas para los pesos (font/weight/regular = 400) y el interlineado (font/line-height/tight = 1.2)

Luego vincula esas variables a tus estilos de texto en el panel de tipografía. Así, un cambio en font/size/md actualiza todos los estilos que lo usan.

2. Exporta las variables como design tokens

Exporta la colección como JSON, idealmente en el formato de design tokens del W3C ($value y $type en cada token). Puede hacerlo un plugin de exportación de variables o Tokens Studio. Un token de tamaño se ve así:

{
  "font": {
    "size": {
      "md": { "$type": "dimension", "$value": "16px" }
    },
    "family": {
      "body": { "$type": "fontFamily", "$value": ["Inter", "sans-serif"] }
    }
  }
}

3. Convierte los tokens en variables CSS

Pega o abre el JSON en el Convertidor de Design Tokens y elige CSS como salida. Nombra cada variable según su ruta, agrega px a los tamaños sin unidad, pone comillas a las fuentes con varias palabras y separa los tokens compuestos de tipografía en una variable por propiedad:

:root {
  --font-family-body: Inter, sans-serif;
  --font-size-md: 16px;
  --font-weight-regular: 400;
  --font-line-height-tight: 1.2;
}

4. Usa las variables en tus componentes

Usa las variables en lugar de valores sueltos: font: var(--font-weight-regular) var(--font-size-md)/var(--font-line-height-tight) var(--font-family-body). Cuando cambia el diseño, vuelves a exportar y convertir, y el código lo sigue sin buscar tamaños escritos a mano.

Hazla fluida

Si tus tamaños deben crecer con la pantalla, genéralos con la herramienta de Escala tipográfica en lugar de valores fijos: entrega valores clamp() para cada paso que puedes poner en esas mismas variables.

Abrir la herramienta: Convertidor de design tokens →