Todos los proyectos
Plugin para Figma

Tokens to Code

De las variables de Figma a CSS y Tailwind.

Tokens to Code con el CSS generado
Tokens to Code con un prefijo para las variables
Para quién

Equipos que llevan Figma Variables a frontend

Alcance

Plugin · CSS Custom Properties · Tailwind

En foco

Figma Variables / CSS Custom Properties / Tailwind

La idea

Llevar los tokens a código con sus temas y referencias.

Al exportar variables, me importaba conservar cómo se relacionan. Tokens to Code mantiene las colecciones, los modos y los alias para generar CSS y una configuración de Tailwind que puedas revisar antes de usar.

Modos

Cada modo, un tema.

Cada modo de una colección se escribe en su propio bloque :root[data-theme]. El modo por defecto va en :root y los alias quedan como referencias var().

Selección

Exportar solo lo que necesitas.

Eliges colecciones y modos, CSS, Tailwind o ambos, y la sintaxis Web de Code Syntax o el nombre de Figma. Las variables del archivo no cambian.

Colecciones y modos seleccionados
Configuración de Tailwind generada

Alias

Los alias siguen siendo alias.

Las variables semánticas siguen apuntando a sus primitivas con var(). Un alias de una biblioteca recibe su valor, con un comentario que indica de dónde viene.

Tailwind

Un tema de Tailwind que sigue tus variables.

Cada color apunta a su variable CSS, así funcionan los modificadores de opacidad y el cambio de tema.

La implementación

Cómo lo construí.

Revisar la exportación completa

El generador recorre las colecciones y sus modos, resuelve alias y agrupa los valores por tipo. Los avisos señalan lo que necesita revisión para que puedas comprobarlo antes de llevarlo al proyecto.

Tokens to Code

Tus variables, en código.

Figma Variables
Colecciones, modos y alias.
CSS Custom Properties
Un bloque :root por modo.
Tailwind
theme.extend que referencia las variables CSS.
Code Syntax
El nombre Web o el de Figma, con prefijo.
UI3 de Figma
Sin red, solo variables locales, con teclado.

Plugin para Figma

La salida de Tailwind genera theme.extend para tailwind.config.js. Esta versión no produce la directiva @theme de Tailwind v4.

Ver el código en GitHub
Siguiente proyectoProperties Copycat