← Todos los plugins

Escala tipográfica

Una escala tipográfica modular como estilos y variables con modos escritorio, tablet y móvil, y clamp() fluido para código.

Prueba la versión web gratis: Generador de escala tipográfica →

Qué hace

Escala tipográfica arma una escala modular y la escribe en Figma como estilos de texto vinculados a variables numéricas, con un modo por breakpoint: un mismo estilo cambia de tamaño en un frame configurado como escritorio, tablet o móvil. El código recibe los valores clamp() fluidos equivalentes.

Vuelve a correrlo y todo se actualiza en su lugar: los mismos estilos, las mismas variables, los mismos muestrarios. ¿Ya tienes un archivo lleno de tamaños? La auditoría deduce de qué escala vienen y ajusta el texto suelto a ella.

  1. Una escala que cambia de tamaño sola

    Estilos vinculados a variables con un modo por breakpoint.

  2. Todos los breakpoints de un vistazo

    Tamaños de móvil, tablet y escritorio, interlineados y alertas de legibilidad.

  3. Encuentra la escala que ya usa tu archivo

    Y ajusta los tamaños sueltos a ella, con un solo deshacer.

  4. Tipografía fluida para código

    clamp() en CSS, @theme de Tailwind v4, SCSS o tokens, en rem o px.

  5. Estilos, variables y muestrarios

    Nombres semánticos, dos familias, una escala de espaciado fluida.

Todo lo que hace

Escala

  • Cualquier proporción, redondeo a 0.5, 1, pares, 4pt u 8pt
  • Ajustes por paso, retícula de línea base
  • Familia para títulos y para texto

Figma

  • Variables con un modo por breakpoint
  • Alias semánticos: Display, H1-H6, Body
  • Un muestrario por modo, actualizado en su lugar
  • Audita los tamaños de un archivo y ajústalos a la escala

Código

  • CSS, SCSS, Tailwind v3 y v4, tokens W3C
  • Escala de espaciado fluida
  • Alertas de legibilidad y vista al 200%

10 usos gratis, luego una licencia o Lab Pro. Ver precios →

Más plugins