Type Specimen Generator

Cuando terminas una tipografía, o cuando vas a presentar una que no es tuya en un manual de marca, hay una pieza que toca hacer: la cuadrícula de caracteres. Una muestra de glifos ordenados en el peso y el tamaño que corresponda.

Normalmente se hace a mano, carácter por carácter. Escribes la a, la b, la c, y así hasta terminar el latín básico. Después empieza el latín extendido, y ahí aparece el problema real: hay caracteres que no sabes teclear. Los diacríticos (À Á Â Ã Ä Å), por ejemplo, no suelen estar a mano en un teclado normal. No solo tardas mucho: además tienes que ir a buscar cómo se escribe cada uno.

Como el trabajo era tedioso y me lo encontraba cada vez que diseñaba una tipo, hice una herramienta que lo resolviese. Fue hace unos dos años, cuando el vibe coding empezaba a ser tema de conversación, y la construí con ChatGPT.

Funcionaba a medias. La ventana pedía tres decisiones: la tipografía, el tamaño y el alcance del set, Basic o Extended. Con eso generaba los glifos, y no hacía nada más.

Lo que se notaba al usarla:

• La fuente era texto libre. Había que escribir el nombre exacto de la tipografía y, si no coincidía, no se pintaba nada. En una herramienta pensada para no teclear lo que no sabes teclear, esa fricción sobraba.
• El autolayout no se ajustaba. El espécimen llegaba al lienzo sin estructura y había que recolocarlo a mano.
• Un solo peso, solo latín y una disposición fija. No se podía decidir cómo se agrupaban mayúsculas, minúsculas, números y puntuación.
• Solo glifos. Un espécimen es más que un abecedario, y la herramienta no lo sabía.

La v2 genera un único frame con autolayout sobre el lienzo, editable después como cualquier otro. Arriba lleva una cabecera compacta con la familia y un resumen de los pesos y tamaños elegidos, y debajo los bloques que marques. Se puede marcar más de uno a la vez.

• Grid. El set de caracteres completo, glifo a glifo, en una rejilla.
• Showcase. El nombre de la familia en grande y una línea por cada peso seleccionado.
• Cascade. Un texto de muestra repetido en todos los tamaños elegidos, de menor a mayor.

El panel tiene cuatro controles: una fuente, los pesos, los tamaños y el tipo de espécimen.

La fuente es un selector único con buscador, porque quien trabaja con tipografía puede tener cientos de familias instaladas y escribir el nombre exacto ya no es necesario. Pesos y tamaños son de selección múltiple, y los tres tipos de espécimen son casillas combinables.

La interfaz usa IBM Plex Sans, una cabecera marrón cálido (#5f533f) y el mismo marrón en el botón principal y en las casillas marcadas. Los colores, la tipografía, los radios y los espaciados salen de los tokens del mockup de Figma, no de ojo.

Un detalle de pulido: el panel desbordaba unos 9 píxeles a su tamaño por defecto y sacaba una barra de scroll. La causa eran etiquetas que envolvían a dos líneas. Acortarlas a "Weights" y "Sizes" devolvió el espacio sin tocar el ritmo vertical. Con eso, el panel quedó en tres zonas (cabecera, controles, footer anclado) y los cuatro márgenes en 24 píxeles.

Quise llevar el plugin más lejos: leer los metadatos de la fuente (diseñador, foundry, versión) y mostrar sus OpenType features y alternates. Me topé con un límite de la API de Figma.

La API solo expone la familia y el estilo de cada fuente, no datos del archivo. Y las OpenType features son de solo lectura: un plugin puede consultarlas, pero no aplicarlas a un texto.

Hacerlo bien exige parsear los archivos de fuente con librerías como opentype.js o fontkit, algo que dentro del sandbox de Figma no tiene sentido. Lo dejé aparcado en el plugin y lo llevé a TypeScope, donde controlo la ingesta y Figma no es el techo.

Una herramienta que ahorra trabajo no puede añadir fricción en el primer paso. La v1 pedía escribir a mano el nombre exacto de la tipografía, justo lo que el plugin existe para evitar. En la v2 es un selector con buscador.

El techo de una plataforma decide dónde vive cada función. Los metadatos de la fuente y las OpenType features no caben en un plugin de Figma, y esa frontera es la que me dijo qué debía quedarse aquí y qué debía irse a TypeScope.

Reconstruir no es mejorar. La v1 tenía poco que conservar, así que la v2 se escribió entera, con los valores del mockup de Figma como fuente de verdad y no a ojo.