Style Dictionary
Herramienta open source (origen Amazon, 2017) que compila design tokens desde JSON canónico a cualquier formato de salida: CSS custom properties, Swift, Android XML, documentación. Desde la versión 4 acepta el formato W3C DTCG de forma nativa.
En una analogía · Es el traductor simultáneo de las decisiones de diseño: escribes una vez en un idioma y él lo dobla a CSS, iOS, Android o lo que necesites.
También conocido como: SD · style-dictionary · Amazon Style Dictionary
Qué hace
Style Dictionary resuelve el problema de tener una sola fuente de verdad de tokens y muchos destinos. El flujo:
tokens.json (fuente canónica)
│
▼
Style Dictionary (transforms + formats)
│
├── variables.css (web)
├── Tokens.swift (iOS)
├── tokens.xml (Android)
└── tokens-flat.json (documentación, agentes)Dos conceptos definen su API: transforms (funciones que convierten cada token: #2563EB a UIColor, 16 a 1rem) y formats (plantillas que escriben el archivo de salida). Ambos son extensibles: cada sistema registra los suyos.
Por qué importa en un sistema agéntico
La salida de Style Dictionary es la interfaz pública de los tokens. Si el build emite un JSON aplanado con $type y $description, cualquier agente lo consume sin conocer la estructura interna del sistema. Si solo emite CSS, el agente tiene que parsear variables sin semántica.
La práctica recomendada hoy: añadir al build un format específico para consumo agéntico (JSON plano con tipos, descripciones y $extensions intactas) que es el que expone el servidor MCP del sistema.
Versión 3 frente a versión 4
La diferencia estructural es el soporte del formato W3C DTCG ($value, $type, $extensions) que la versión 4 trae nativo, junto con API async y transforms con nueva firma. El detalle completo, con path de migración paso a paso, está en Style Dictionary 3 vs 4.
Alternativas y cuándo elegirlas
- Terrazzo (antes Cobalt): nacido ya DTCG-first, buena elección para sistemas nuevos sin legacy.
- Tokens Studio: si la fuente de verdad vive en Figma y el equipo es diseño-céntrico; suele combinarse con Style Dictionary en el build.
- Script propio: para menos de 50 tokens y una sola salida, una página de Node hace lo mismo sin dependencia.
Style Dictionary sigue siendo la opción por defecto cuando hay múltiples plataformas de salida y necesidad de transforms custom.
Ver también
El build completo (tokens DTCG + Style Dictionary 4 + format agéntico) se monta en directo en la mini-formación de tokens.
Lecturas de referencia
A seguir
Seguir leyendo
- El ParteFigma Code Connect reduce tokensFigma Code Connect permite a los diseñadores mapear componentes de diseño con código real, lo que reduce la cantidad de tokens necesarios
- GuíaAuditoría AI-readiness de un design system en 7 pasosProcedimiento completo para diagnosticar si un design system existente es consumible por agentes: fuentes de verdad, tokens, APIs de componente, principios, exposición, governance y plan de cierre.
- GuíaCómo se implementa un MCP server para tu design systemAnatomía mínima de un servidor Model Context Protocol que expone los tokens, principios y componentes de tu sistema a un cliente agéntico.
Recibe la próxima guía en tu correo
Una guía operativa nueva cada poco: cómo se construye, qué decisiones implica y qué no se hace. Sin ruido, solo cuando hay algo útil.