Frontend Academy · Lección

Tokens de diseño con Style Dictionary

Defina tokens de color, espaciado y tipografía en JSON y transfórmelos con Style Dictionary en variables CSS, constantes de JS o formatos para iOS y Android.

Lección 2 de 414 pasos

Tokens de diseño con Style Dictionary es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.

Qué son los design tokens

Los design tokens son los valores primitivos con nombre de un sistema de diseño: colores, espaciado, tamaños de fuente, radios de borde y sombras. Son la fuente de verdad: cada componente obtiene sus estilos a partir de ellos.

Por qué son importantes los tokens

Los tokens desacoplan las decisiones de diseño de la implementación. Cambie una vez color.primary de azul a verde y todos los componentes que lo utilicen se actualizarán. También permiten distribuir el mismo diseño en web, iOS y Android.

Almacenamiento de tokens

Almacene los tokens en JSON o YAML: son formatos neutros que pueden consumir herramientas de distintas plataformas. JSON es el más habitual.

// tokens/color.json
{
  "color": {
    "brand": {
      "primary": { "value": "#2563eb" },
      "secondary": { "value": "#7c3aed" }
    },
    "text": {
      "default": { "value": "#111827" },
      "muted": { "value": "#6b7280" }
    }
  }
}

Style Dictionary

Style Dictionary (Amazon) es la herramienta de compilación de facto para design tokens. Lee los tokens y los transforma en múltiples formatos de salida: variables CSS, SCSS, constantes JS, Swift para iOS y XML para Android.

npm install -D style-dictionary

Configuración

Cree style-dictionary.config.js para describir los tokens de entrada y las plataformas de salida.

// style-dictionary.config.js
module.exports = {
  source: ['tokens/**/*.json'],
  platforms: {
    css: {
      transformGroup: 'css',
      buildPath: 'build/css/',
      files: [{ destination: 'tokens.css', format: 'css/variables' }]
    },
    js: {
      transformGroup: 'js',
      buildPath: 'build/js/',
      files: [{ destination: 'tokens.js', format: 'javascript/es6' }]
    },
    ios: {
      transformGroup: 'ios',
      buildPath: 'build/ios/',
      files: [{ destination: 'Tokens.swift', format: 'ios-swift/class.swift' }]
    }
  }
};

Ejecutar la compilación

Ejecute la CLI para generar todas las plataformas.

npx style-dictionary build

# Output:
# build/css/tokens.css     — CSS variables
# build/js/tokens.js       — JS constants
# build/ios/Tokens.swift   — Swift constants

Salida CSS generada

Variables CSS con un esquema de nombres coherente (kebab-case con namespace).

:root {
  --color-brand-primary: #2563eb;
  --color-brand-secondary: #7c3aed;
  --color-text-default: #111827;
  --color-text-muted: #6b7280;
}

Salida JS generada

Objeto JS para usarlo en código JS/TS (configuración de Tailwind, CSS-in-JS).

export const ColorBrandPrimary = '#2563eb';
export const ColorBrandSecondary = '#7c3aed';
export const ColorTextDefault = '#111827';

Convenciones para nombrar tokens

Use nombres semánticos (color.primary) en lugar de literales (color.blue-500). Los tokens semánticos permiten cambiar los valores sin renombrarlos. Sistema de dos niveles: paleta literal (blue-500) → alias semántico (primary).

{
  "color": {
    "palette": {
      "blue-500": { "value": "#2563eb" }
    },
    "brand": {
      "primary": { "value": "{color.palette.blue-500.value}" }
    }
  }
}

Tematización con tokens

Genere compilaciones para varias plataformas con entradas diferentes para admitir temas (claro/oscuro): los mismos nombres, distintos valores.

// Light theme:
--color-bg: white;
--color-text: black;

// Dark theme:
--color-bg: #111;
--color-text: white;

Categorías de tokens

Categorías habituales: color, spacing, typography (font-family, size, line-height, weight), border (radius, width), shadow, transition (duration, easing), z-index y breakpoint.

Herramientas de registro de tokens

Además de Style Dictionary: Tokens Studio (complemento de Figma), Specify y Supernova. Permiten a los diseñadores gestionar tokens en Figma y sincronizarlos automáticamente con la base de código.

Comprobación rápida

¿Cuál es la principal ventaja de usar design tokens con Style Dictionary?

Responde en la lección interactiva

Repaso: design tokens

Los tokens son valores primitivos con nombre (color, espaciado y tipografía): la fuente de verdad de un sistema de diseño. Almacénelos como JSON. Style Dictionary los transforma en variables CSS, JS, iOS y Android. Use nombres semánticos (primary) en lugar de literales (blue-500). Sistema de dos niveles: paleta → alias semántico. Cree temas mediante compilaciones independientes. Sincronice desde Figma con Tokens Studio.

Gratis para empezar

Aprende HTML con un tutor de IA — gratis

Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.

Cursos: 41
Lecciones: 163

Empezar a aprender gratis Ver el curso completo

Preguntas frecuentes

¿La lección «Tokens de diseño con Style Dictionary» es gratis?

Sí — el texto completo de «Tokens de diseño con Style Dictionary» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Tokens de diseño con Style Dictionary»?

Defina tokens de color, espaciado y tipografía en JSON y transfórmelos con Style Dictionary en variables CSS, constantes de JS o formatos para iOS y Android. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar Frontend Academy?

No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.

¿Cuánto tiempo toma la lección «Tokens de diseño con Style Dictionary»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?

Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

Storybook: stories, controles y documentación
Tokens de diseño con Style Dictionary
Versionado y publicación en npm
Consumo de un sistema de diseño

← Volver a Frontend Academy