Sincronizar diseño y código con tokens de diseño

Al crear un sistema de diseño en una startup, a veces la velocidad se vuelve más lenta. Esto se debe al tedioso trabajo repetitivo que surge cuando el desarrollador debe traducir manualmente los valores modificados por el diseñador a código. Automatizar este proceso es necesario para que el equipo pueda concentrarse en los problemas esenciales del producto.

Unificar el lenguaje de diseño con tokens

No asigne manualmente los valores de la herramienta de diseño a variables de código uno por uno. Al introducir tokens de diseño, este eslabón de conexión se convierte en datos.

1. Tokens primitivos: definen valores de color crudos, como blue-500.
2. Tokens semánticos: especifican el uso real, como action.primary.bg, y hacen referencia a los primitivos anteriores.
3. Mapeo de variables CSS: guardan los tokens semánticos como variables CSS.

Al configurarlo de esta manera, si el diseñador cambia un valor de color, el desarrollador no necesita tocar el código. El sistema actualiza automáticamente los archivos CSS. Para la escala de fuentes, defínala matemáticamente ingresando la Base y el Ratio en el panel de tokens de Penpot. Si utiliza la fórmula $Size_{n} = Base \times Ratio^{n}$, la consistencia del diseño se mantiene de forma obligatoria.

Automatizar la integración entre Penpot y GitHub

Es ineficiente que el desarrollador verifique manualmente las modificaciones de diseño. Como Penpot sigue el estándar de tokens de diseño del W3C, es posible construir una canalización (pipeline).

1. Genere una clave API de Penpot.
2. Cree un archivo penpot-export.config.js en la raíz del proyecto. Aquí configurará los tokens a extraer y la ruta de guardado.
3. Instale el paquete @penpot-export/cli y luego ejecute el comando npx penpot-export.

Cientos de valores de tokens ingresan a la base de código en un instante. Los errores humanos que ocurren al ingresar datos manualmente desaparecen. Servicios a gran escala como Shopify también utilizan este flujo de trabajo basado en tokens para actualizar el diseño al instante sin modificar el código.

Comprender la intención del cambio de diseño mediante revisiones de Git

No comunique los cambios de diseño a través de mensajes de Slack o de forma oral. Gestiónelos con Git, que es lo más familiar para los desarrolladores.

1. Escriba un archivo .github/workflows/design-sync.yml para automatizar la extracción de tokens de diseño.
2. Utilice la acción peter-evans/create-pull-request para generar automáticamente un PR que contenga los cambios.
3. Cuando se genere el PR, verifique el mensaje de confirmación style(tokens) y observe el diff durante el proceso de revisión de código.

El desarrollador identifica inmediatamente en el PR qué valores cambiaron y por qué. Se ahorra el tiempo de tener que preguntar por qué se realizaron los cambios.

Convivir con el código heredado (legacy)

No intente cambiar todo el código de una sola vez. Una técnica de respaldo (fallback) que combine el CSS existente con los nuevos tokens es lo más realista.

1. Coloque los archivos de tokens generados automáticamente en el directorio src/styles/tokens.
2. Utilice el formato var(--new-token, #legacy-value) en el CSS existente.

Los componentes para los que aún no se han definido tokens mantienen sus valores originales. Puede modernizar el sistema poco a poco sin preocuparse de que la interfaz se rompa. Comience conectando un pequeño token de color a la canalización. Es la forma de evitar hoy la enorme deuda técnica que surgiría en el futuro.