Desarrollo Web

Qué son los design tokens

Los desing tokens son valores de diseño almacenados en un formato estructurado normalmente JSON, que representan atributos básicos como colores, tipografía, espaciados, bordes, etc. Estos valores son independientes de las plataformas, por tanto, pueden usarse tanto en entornos web como móviles, asegurando consistencia visual y adaptabilidad en múltiples contextos.

Por ejemplo, en lugar de especificar manualmente un color como #FF5733 en cada componente, puedes definirlo como un token llamado color-primary, y utilizarlo donde lo necesites. Este enfoque no solo agiliza las actualizaciones, sino que también establece una fuente única de verdad para todos los valores de diseño.

Los designs tokens tiene aplicaciones en multitud de áreas el desarrollo de software, pero es más importante, si cabe, en el sector del Marketing Digital, creando elementos visuales en tiempo real y propagando los cambios automáticamente en diferentes campañas digitales, ahorrando tiempo y esfuerzo.

La utilización de los design tokens están ampliamente extendidos por compañías de gran reputación, algunos ejemplos de uso son:

• Mailchimp emplea designs tokens para mantener la coherencia entre miles de correos electrónicos, permitiendo hacer un producto más versátil y mantenible.
• Airbnb utiliza design tokens para adaptar sus interfaces a diferentes mercados, ajustando colores y tipografías según las preferencias culturales y lingüísticas, por eso en determinadas ocasiones puedes ver cambios drásticos en su interfaz con respecto a eventos como el Black Friday o Navidad.
• Microsoft, a través de Fluent Design, asegura que sus productos sean accesibles y adaptables a diferentes dispositivos, permitiendo a todo el equipo mantener la coherencia entre los distintos productos del ecosistema de la compañía.

Tipos comunes de tokens

Los design tokens abarcan una amplia gama de atributos de diseño que facilitan la consistencia y cohesión en los sistemas visuales. Entre los más comunes se encuentran los colores, que permiten definir valores reutilizables como colores primarios (color-primary) y secundarios (color-secondary), además de estados interactivos como hover, active o disabled (por ejemplo, color-primary-hover).

En el caso de la tipografía, los tokens cubren aspectos clave como las fuentes (font-family-base, font-family-heading), los tamaños (font-size-base, font-size-large) y el espaciado entre líneas (line-height-base).

Para gestionar los márgenes y rellenos, los tokens de espaciado incluyen valores como spacing-small y spacing-medium, así como escalas de diseño modular (spacing-scale-1, spacing-scale-2).

Los tamaños, como el ancho y alto de elementos (size-button-large, size-card-medium), también pueden definirse sombras, bordes e incluso animaciones y transiciones.

Ejemplos de design tokens en acción

Para comprender mejor cómo funcionan, te muestro algunos ejemplos prácticos como casos de uso:

• Cambio de un color primario

  Supongamos que necesitas actualizar el color primario de tu aplicación. Si usas desing tokens, basta con cambiar el valor en un solo lugar:

 {
  "color-primary": "#FF5733"
}

En todos los componentes que utilizan color-primary, el cambio se reflejará automáticamente.

• Escala de espaciado modular
  Puedes definir un token para espaciados escalables, como márgenes y rellenos de esta forma:

  {
  "spacing-small": "4px",
  "spacing-medium": "8px",
  "spacing-large": "16px"
  }
  

• Tipografía adaptable

  Puedes configurar tokens para tamaños de texto que permitan ajustar la tipografía para diferentes plataformas:

  {
  "font-size-mobile": "14px",
  "font-size-desktop": "16px"
  }
  

  Mediante el uso de desing tokens podemos acometer cambios en los requerimientos del cliente de una forma efectiva, minimizando errores y permitiendo crear todo un ecosistema integrado desde el Área de Diseño y UX hasta el sector de los desarrolladores de una forma automática, reduciendo de forma considerable los costes humanos aumentamos la consistencia entre los diferentes proyectos y plataformas.

Beneficios de implementar design tokens

• Consistencia en los diseños: Los desing tokens eliminan discrepancias visuales al garantizar que todos los elementos sigan un estándar definido. Esto es importante en grandes equipos donde múltiples personas trabajan en un mismo proyecto, ya que asegura que la identidad visual se mantenga uniforme en todas las plataformas y componentes

• Eficiencia en los flujos de trabajo: Al centralizar valores como colores, tipografía y espaciado, los tokens reducen significativamente el tiempo invertido en tareas repetitivas, como actualizar estilos en diferentes componentes o adaptar el diseño a nuevos requisitos. Además, las actualizaciones se propagan automáticamente a todos los elementos relacionados, reduciendo errores manuales y ahorrando tiempo.

• Escalabilidad en sistemas de diseño: A medida que un producto crece, los desing tokens facilitan la integración de nuevos componentes o plataformas sin romper la coherencia del diseño. Esto es especialmente útil para productos que operan en múltiples dispositivos o marcas, ya que los tokens permiten gestionar variantes de diseño de manera eficiente.

• Mejor Colaboración entre diseño y desarrollo: Los tokens establecen un lenguaje común entre diseñadores y desarrolladores al traducir conceptos visuales en valores que ambos equipos comprenden y utilizan. Esto reduce malentendidos, elimina ambigüedades en la comunicación y asegura que todos trabajen hacia los mismos objetivos visuales y funcionales.

• Adaptabilidad a temas y personalización: Los desing tokens facilitan la creación de temas personalizados, como modos claro y oscuro, o la personalización para diferentes marcas. Al abstraer los valores visuales, se pueden aplicar cambios de tema a nivel global con un impacto mínimo en el código base.

• Accesibilidad optimizada: Al definir tokens relacionados con aspectos como contraste, tamaño de texto o colores accesibles, se puede garantizar una experiencia inclusiva de manera más consistente. Esto ayuda a cumplir estándares de accesibilidad como WCAG de forma eficiente.

Cómo implementar design tokens en tu flujo de trabajo

Implementar desing tokens requiere de un enfoque y planificación estratégica. Algunos de los pasos claves que se deben seguir para una correcta implementación son:

Identificar los elementos reutilizables en tu diseño

El primer paso para implementar desing tokens de manera efectiva es analizar los componentes de tu sistema de diseño y detectar patrones repetitivos que puedan ser estandarizados y reutilizados.

Esto no solo ayuda a mantener consistencia visual, sino que también optimiza el tiempo y los recursos dedicados al diseño y desarrollo.

Crear y documentar tus design tokens

Es fundamental documentar el propósito de cada token para garantizar que los equipos de diseño y desarrollo comprendan cómo y cuándo utilizarlos.

Además, una organización estructurada asegura que los tokens sean accesibles, escalables y fáciles de integrar en diferentes herramientas y flujos de trabajo.

Podrías organizar la estructura del token como este ejemplo:

{
  "color": {
    "primary": "#FF5733",
    "secondary": "#33A1FF"
  },
  "spacing": {
    "small": "4px",
    "medium": "8px"
  }
}

Integrar los tokens en tu proyecto

Para utilizar los desing tokens en tu proyecto, puedes integrarlos utilizando preprocesadores CSS como SASS o LESS, o directamente con variables CSS nativas. Estas herramientas te permiten centralizar y aplicar los tokens de manera eficiente, asegurando consistencia en todo el proyecto.

Este es un ejemplo de declaración de una variable global en el archivo principal de hojas de estilo.

:root {
  --color-primary: #FF5733;
  --spacing-small: 4px;
}

Automatizar la actualización de tokens

La sincronización automática de cambios es esencial para mantener la consistencia y escalabilidad en proyectos que utilizan desing tokens. Mediante el uso de pipelines, puedes automatizar la propagación de tokens a múltiples plataformas y entornos (web, iOS, Android), reduciendo errores manuales y optimizando el flujo de trabajo.

Herramientas para trabajar con design tokens

Existen varias herramientas que facilitan la gestión y transformación de desing tokens en diferentes formatos y plataformas, dependiendo de las necesidades de cada proyecto:

• Style Dictionary: Herramienta de código abierto que transforma tokens en formatos compatibles con CSS, JSON, Swift, Android y más. Es ideal para sistemas complejos y multiplataforma, permitiendo personalizaciones avanzadas. También soporta la creación de temas y variaciones visuales, adaptándose a diferentes entornos.

• Token Studio para Figma: Plugin que permite gestionar tokens directamente en Figma y exportarlos en formatos como JSON o CSS. Facilita la sincronización entre diseño y desarrollo, agilizando el flujo de trabajo. Además, permite visualizar y ajustar los tokens en tiempo real, asegurando que las decisiones de diseño se implementen correctamente.

• Amazon Style Dictionary: Similar a Style Dictionary, pero con capacidades adicionales para sistemas empresariales. Es perfecto para proyectos de gran escala que requieren consistencia en múltiples productos y temas visuales. Su flexibilidad lo convierte en una opción robusta para equipos que trabajan en entornos corporativos diversificados.

• Alternativas ligeras: Herramientas como Theo y Token Transformator son opciones simples y rápidas para proyectos pequeños o medianos. Ofrecen transformaciones básicas de tokens en formatos como CSS o JSON, con configuraciones mínimas, lo que las hace ideales para proyectos con requisitos menos complejos o para iniciarse en el uso de desing tokens.

Ejemplo real de implementación

Este es un ejemplo completo sobre cómo trabajar con desing tokens, desde la definición hasta su uso en un proyecto real. Usaremos una estructura JSON para definir los tokens, una herramienta para transformarlos, y mostraremos cómo aplicarlos en un entorno web con CSS.

• Definición de los desing tokens

Creamos un archivo tokens.json que contendrá los desing tokens:

{
  "color": {
    "primary": {
      "value": "#FF5733",
      "type": "color"
    },
    "secondary": {
      "value": "#33A1FF",
      "type": "color"
    },
    "background": {
      "value": "#F5F5F5",
      "type": "color"
    },
    "text": {
      "value": "#333333",
      "type": "color"
    }
  },
  "spacing": {
    "small": {
      "value": "8px",
      "type": "dimension"
    },
    "medium": {
      "value": "16px",
      "type": "dimension"
    },
    "large": {
      "value": "24px",
      "type": "dimension"
    }
  },
  "font": {
    "family": {
      "base": {
        "value": "Arial, sans-serif",
        "type": "font"
      },
      "heading": {
        "value": "Georgia, serif",
        "type": "font"
      }
    },
    "size": {
      "small": {
        "value": "12px",
        "type": "dimension"
      },
      "medium": {
        "value": "16px",
        "type": "dimension"
      },
      "large": {
        "value": "24px",
        "type": "dimension"
      }
    }
  }
}

• Transformación de los Tokens

Para utilizar los tokens en diferentes plataformas (CSS, JavaScript, iOS, etc.), transformamos el archivo JSON. Para este cometido usaremos Style Dictionary, una herramienta de código abierto que permite gestionar y exportar desing tokens.

El primer paso es la instalación de Style Dictionary, para ello ejecutamos el siguiente comando en la terminal:

npm install style-dictionary

Una vez instalado, creamos un archivo de configuración con el nombre style-dictionary.config.js, con la siguiente estructura:

const StyleDictionary = require("style-dictionary");

StyleDictionary.extend({
  source: ["tokens.json"],
  platforms: {
    css: {
      transformGroup: "css",
      buildPath: "build/css/",
      files: [
        {
          destination: "variables.css",
          format: "css/variables"
        }
      ]
    },
    js: {
      transformGroup: "js",
      buildPath: "build/js/",
      files: [
        {
          destination: "tokens.js",
          format: "javascript/es6"
        }
      ]
    }
  }
}).buildAllPlatforms();

A continuación, ejecutamos el comando del Build:

npx style-dictionary build

La construcción genera dos archivos con las desing tokens:

build/css/variables.css: Tokens en formato CSS.
build/js/tokens.js: Tokens en formato JavaScript.

• Aplicación de los tokens

El archivo CSS generado contiene las variables fruto de la conversión realizada de los tokens, el archivo presentará una forma parecida a esta estructura:

:root {
  --color-primary: #FF5733;
  --color-secondary: #33A1FF;
  --color-background: #F5F5F5;
  --color-text: #333333;

  --spacing-small: 8px;
  --spacing-medium: 16px;
  --spacing-large: 24px;

  --font-family-base: Arial, sans-serif;
  --font-family-heading: Georgia, serif;

  --font-size-small: 12px;
  --font-size-medium: 16px;
  --font-size-large: 24px;
}

Finalmente, podemos hacer uso de tokens en un proyecto Web instanciando el archivo anterior y definiendo nuestro código CSS:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>desing tokens Example</title>
  <link rel="stylesheet" href="build/css/variables.css">
  <style>
    body {
      font-family: var(--font-family-base);
      background-color: var(--color-background);
      color: var(--color-text);
      margin: var(--spacing-medium);
    }

    h1 {
      font-family: var(--font-family-heading);
      font-size: var(--font-size-large);
      color: var(--color-primary);
      margin-bottom: var(--spacing-large);
    }

    p {
      font-size: var(--font-size-medium);
      margin-bottom: var(--spacing-small);
    }

    .button {
      background-color: var(--color-secondary);
      color: white;
      padding: var(--spacing-small) var(--spacing-medium);
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

    .button:hover {
      background-color: var(--color-primary);
    }
  </style>
</head>
<body>
  <h1>Bienvenido a desing tokens</h1>
  <p>Los desing tokens garantizan consistencia en diseño y desarrollo.</p>
  <button class="button">Clic Aquí</button>
</body>
</html>

• Automatización de cambios

Si cambias un token en tokens.json y ejecutas npx style-dictionary build, los archivos CSS y JavaScript se actualizan automáticamente. Esto asegura que cualquier ajuste se propague a toda la interfaz sin trabajo adicional.

• Ejemplo de uso con JavaScript

Por otro lado, podemos usar los tokens en js, utilizando el segundo archivo generado por el build, que mantendrá una estructura parecida a este fragmente de código:

export const tokens = {
  color: {
    primary: "#FF5733",
    secondary: "#33A1FF",
    background: "#F5F5F5",
    text: "#333333"
  },
  spacing: {
    small: "8px",
    medium: "16px",
    large: "24px"
  },
  font: {
    family: {
      base: "Arial, sans-serif",
      heading: "Georgia, serif"
    },
    size: {
      small: "12px",
      medium: "16px",
      large: "24px"
    }
  }
};

Para hacer uso de los designs tokens de forma dinámica en React, debemos de ajustar el código de esta forma:

import React from "react";
import { tokens } from "./build/js/tokens";

const App = () => {
  const buttonStyle = {
    backgroundColor: tokens.color.secondary,
    color: "white",
    padding: tokens.spacing.medium,
    fontSize: tokens.font.size.medium,
    borderRadius: "4px"
  };

  return (
    <div style={{ fontFamily: tokens.font.family.base, backgroundColor: tokens.color.background, color: tokens.color.text }}>
      <h1 style={{ fontFamily: tokens.font.family.heading, color: tokens.color.primary }}>
        Bienvenido a desing tokens
      </h1>
      <p>Los desing tokens garantizan consistencia en diseño y desarrollo.</p>
      <button style={buttonStyle}>Clic Aquí</button>
    </div>
  );
};

export default App;

Conclusiones

Los desing tokens son una solución muy potente para garantizar consistencia, eficiencia y escalabilidad en el diseño y desarrollo de interfaces. Su implementación no solo mejora la colaboración entre equipos, sino que también optimiza los flujos de trabajo al centralizar y automatizar los valores clave de diseño.

Imagínate por un momento, que un proyecto relacionado con el marketing requiere cambiar su interfaz en la semana del Black Friday, San Valentín o alguna otra efeméride, con la implementación de desing tokens, un diseñador podría cambiar los aspectos de diseño y con una automatización CI/CD, se podría automatizar el cambio de imagen corporativa y una vez pasada esta efeméride volver a los colores.

Con este enfoque los costes operativos y los fallos se reducen al mínimo.