Cómo uso Claude Code para crear variables de texto en un design system

Hola,

Cómo va la cosa?

Por aquí el calor ya va apretando bien…

Te cuento sobre el tutorial que compartí hoy en el canal..

Metí a Claude Code a trabajar directamente dentro de un archivo de Figma.

Empecé con algo simple, Le pedí que creara una variable de texto llamada font-family.

Un prompt corto, nada del otro mundo…

En menos de 2 minutos actualizó 22 estilos de texto del sistema.

Después comprobé los estilos de los 4 grupos que tenía creados en el archivo: Caption, Body, Heading.

Todo bien, hizo lo que le pedí.

Después fui al panel de Variables a revisar cómo había quedado la estructura.

También lo hizo bien, pero encontré un matiz que detallo en el vídeo, te puede servir si estás usando Claude Code para crear y diseñar directamente en Figma.

👇

Ahora viene lo bueno…

El segundo prompt que solté tenía más chicha.

Le pedí que analizara el componente Badge, que creara un nuevo grupo de estilos de texto llamado Label con un line-height del 100%, y que lo aplicara a todas las variantes del componente.

Te explico por qué el 100% y no el 170% que usábamos hasta ahora. Ese 170% funciona bien en párrafos y en cards… pero en un Badge lo hace crecer demasiado. Con el 100% el componente queda mucho más real.

Claude Code lo aplicó perfectamente en las 6 variantes.

Ojo… lo que no quedó perfecto fue el resultado visual, y ahí entró Juanito.

Ajusté a mano varios paddings del Badge hasta que el Label se viera bien en sm, md y lg.

👇

Lo siguiente es interesante, me interesa saber si te ha pasado, a mí me pasa y conozco a compañeros de trabajo que también se han encontrado con el tema que te cuento aquí debajo,

Un bug de renderizado típico de Figma.

Nada que ver con Claude Code, se corrige con un click de más, pero ahí queda apuntado por si te pasa lo mismo alguna vez.

Cerré el vídeo actualizando la documentación del sistema de diseño con las variables y los estilos nuevos.

Tienes el proceso completo, con sus aciertos y sus vueltas atrás, ya sabes… la vida misma.

Como siempre, si tienes feedback o preguntas, respóndeme este correo.

😘