# Paridad de Tokens en Múltiples Plataformas

> Aprenda cómo lograr la paridad de tokens de diseño entre Web, iOS y Android para garantizar una experiencia de marca coherente y acelerar el desarrollo multiplataforma.

*Tags: ux, concepto, diseño-ui, product-design, desarrollo*

---


> [!info] Definición Rápida
> La paridad de tokens asegura que las decisiones de diseño se traduzcan de manera idéntica y precisa a través de diferentes plataformas (Web, iOS, Android, Desktop) utilizando un único sistema de origen. Esto elimina inconsistencias visuales y reduce significativamente el esfuerzo de QA.


## El Desafío de la Fragmentación de Plataformas

Cada ecosistema tecnológico maneja los estilos (colores, fuentes, sombras) de forma única. Si un diseñador elige un "Azul Primario", se enfrenta a:
- **Web:** Archivos CSS/SCSS (rem, px, hex, hsl, rgb).
- **iOS:** Archivos Swift/SwiftUI (Points, UIColor, Asset Catalogs, JSON).
- **Android:** XML de recursos o Jetpack Compose (dp, sp, hex ARGB).

Sin una estrategia de paridad, el mismo color puede verse ligeramente diferente o tener un nombre distinto en cada plataforma, rompiendo la coherencia de marca y causando confusión entre los equipos de desarrollo.

## Estrategias para Lograr la Paridad Real

Para evitar la duplicación de trabajo y los errores manuales, se deben implementar las siguientes estrategias:

### 1. El JSON como Fuente Única de Verdad (SSOT)
Los tokens deben almacenarse en un formato neutral e independiente de la plataforma (usualmente archivos JSON). Herramientas como **Style Dictionary** (de Amazon) o **Token Transformer** actúan como motores de procesamiento: toman el JSON original y lo exportan automáticamente a los formatos específicos que cada plataforma necesita.

### 2. Mapeo Automático de Unidades
Es fundamental definir una lógica de transformación robusta:
- **Espaciado y Tipografía:** Definir cómo se convierten los valores (ej. `1rem` en Web -> `16pt` en iOS -> `16dp` en Android).
- **Normalización de Nombres:** Ajustar el formato de los nombres de los tokens según las convenciones de cada lenguaje (ej. `snake_case` para Android vs `camelCase` para iOS).

### 3. Gestión de Capacidades Específicas
No todas las plataformas soportan las mismas capacidades visuales. Por ejemplo, los gradientes angulares complejos o ciertos efectos de desenfoque de fondo (backdrop-blur) pueden no estar disponibles de forma nativa en todos los sistemas.
- **Enfoque de Mínimo Común Denominador:** Diseñar elementos que se puedan replicar fielmente en todas las plataformas.
- **Fallbacks Inteligentes:** Definir valores de respaldo en los tokens para aquellas plataformas que no soportan un efecto específico.

## El Workflow Ideal de Paridad

Un flujo de trabajo moderno y automatizado seguiría estos pasos:

1.  **Definición en Diseño:** El equipo de diseño crea y gestiona las variables en su herramienta favorita (como Figma).
2.  **Sincronización:** Un plugin (como *Token Studio*) exporta estas variables a un repositorio de control de versiones (ej. GitHub) en formato JSON.
3.  **Pipeline de Transformación:** Una acción de CI/CD (Github Actions) ejecuta Style Dictionary sobre el JSON para generar:
    -   `variables.css` para el equipo Web.
    -   `Styles.swift` para el equipo iOS.
    -   `colors.xml` y `values.kt` para el equipo Android.
4.  **Consumo Directo:** Los desarrolladores importan estos archivos generados en sus proyectos. Ya no se escriben valores hexadecimales o píxeles a mano en el código.

## Beneficios Estratégicos

- **Velocidad de Lanzamiento (Time-to-Market):** Cambiar un color de marca global ahora toma minutos en lugar de días de tickets de revisión manual.
- **QA Automatizado:** Si el valor del token es correcto en la fuente original (JSON), se garantiza que es correcto en todas las plataformas implementadas.
- **Experiencia de Usuario Nativa y Coherente:** El usuario percibe una app pulida y consistente sin importar si accede desde su navegador, tablet o smartphone.

## Consejos de Mentor

- **No intentes la paridad manual:** Es una batalla perdida. La única forma de escalar es mediante la automatización de la exportación de tokens.
- **Involucra a Ingeniería desde el inicio:** La estructura del JSON de tokens debe ser acordada entre diseñadores y desarrolladores de todas las plataformas.
- **Cuidado con las unidades de accesibilidad:** Asegúrate de que tus transformaciones de tokens respeten las configuraciones de accesibilidad del dispositivo del usuario (como el escalado de fuentes).

## Recursos y Herramientas

- **Amazon Style Dictionary:** La herramienta más potente para la transformación de tokens.
- **Specify App:** Una plataforma SaaS diseñada específicamente para gestionar el flujo de tokens multiplataforma.
- **Google Material Design 3:** Un excelente ejemplo de sistema diseñado para la paridad multiplataforma.
- **Libros:** *Atomic Design* de Brad Frost (capítulo sobre "Design Systems as Products").


---

Source: https://www.fernandoux.com/es/wiki/conceptos/paridad-de-tokens/