Herramientas para tokens: Style Dictionary

Style Dictionary es una herramienta de compilación de código abierto de Amazon que transforma una fuente JSON de tokens en salidas para distintas plataformas: propiedades personalizadas de CSS, variables SCSS, constantes Swift para iOS, XML para Android y módulos de JavaScript/TypeScript, todo a partir de una única fuente de verdad.

Organice los tokens en el directorio tokens/ como archivos JSON o JSON5. Style Dictionary combina todos los archivos automáticamente. Separe los archivos por categoría: tokens/color.json, tokens/spacing.json, tokens/typography.json.

Cada token es un objeto anidado con una clave value y campos opcionales type, description y comment. Style Dictionary aplana los objetos anidados y convierte sus nombres a notación con puntos para la salida.

El archivo config.json especifica las fuentes (archivos de tokens), las plataformas (web, ios, android) y las transformaciones y formatos de cada plataforma. Cada plataforma puede aplicar distintas transformaciones y generar diferentes formatos de archivo.

Las transformaciones modifican los valores de los tokens durante la compilación: color/css formatea los colores como valores hexadecimales, size/rem convierte px a rem y name/cti/kebab genera nombres en kebab-case a partir de una estructura anidada de categoría-tipo-elemento.

Los formatos determinan el contenido de los archivos de salida. Los formatos integrados incluyen: css/variables, que genera un bloque CSS :root; scss/variables, que genera variables SASS; y javascript/module, que exporta un objeto JS. Los formatos personalizados permiten generar cualquier estructura de salida necesaria.

Haga referencia a otros tokens mediante la sintaxis de llaves: {"value": "{color.brand.primary}"}. Style Dictionary resuelve las referencias durante la compilación y genera valores concretos. Las referencias crean la asignación entre alias y valores globales.

Registre transformaciones personalizadas para gestionar necesidades específicas del proyecto: eliminar el alfa de los colores, convertir valores de opacidad de herramientas de diseño y añadir prefijos de proveedor. Las transformaciones personalizadas se integran en el flujo de compilación igual que las integradas.

Ejecute npx style-dictionary build o añádalo al script de compilación de npm. Los archivos de salida se guardan en los directorios buildPath configurados. Puede incluir los archivos generados en el control de versiones o generarlos durante la compilación en CI; ambos patrones son habituales.

Tokens Studio for Figma sincroniza el JSON de tokens con un repositorio de GitHub. Style Dictionary se ejecuta en CI cuando cambia el JSON y genera automáticamente archivos CSS y archivos para otras plataformas actualizados. Los cambios de diseño se reflejan en el código sin copiar y pegar manualmente.

Publique el paquete de tokens con versiones en npm. Los consumidores fijan una versión y la actualizan deliberadamente. Los registros de cambios documentan los tokens añadidos, obsoletos y eliminados. El versionado semántico comunica los cambios incompatibles y las actualizaciones seguras.

¿Cuál es la función de una «transformación» en Style Dictionary?

Style Dictionary transforma una única fuente JSON de tokens en salidas específicas para cada plataforma mediante transformaciones y formatos configurables. Permite sincronizar tokens de Figma con el código, mantener la coherencia entre plataformas y distribuir paquetes de tokens versionados que los equipos pueden consumir y actualizar deliberadamente.