Temas con tokens de diseño en Webflow

En enero, dimos continuidad con el exitoso lanzamiento de los nuevos ajustes de apariencia en el Designer, que permiten a los usuarios elegir entre un tema predeterminado, uno más oscuro o uno más claro.

Quizás te preguntes: ¿cómo logramos facilitar actualizaciones de diseño de tal magnitud y mantener la coherencia visual de la interfaz? La respuesta: mediante el uso de tokens de diseño y variables CSS.

En este blog, exploraremos los entresijos de la magia que ocurre tras bambalinas y que hace posibles estos grandes cambios en la interfaz.

Cómo utilizamos los tokens de diseño y las variables CSS

Como muchas empresas, Webflow utiliza Figma para crear prototipos de nuevas funciones. Nuestros diseñadores aprovechan los tokens de diseño —pares clave-valor que utilizan la API de variables de Figma— dentro de sus prototipos.

En Webflow, contamos con más de cien tokens de diseño en Figma que cubren casi todos los aspectos del estilo CSS: colores, fondos, tamaños de fuente, bordes, radios de borde, dimensiones, espaciado y más. Hemos seleccionado cuidadosamente esta robusta colección de tokens a lo largo del tiempo mediante una estrecha colaboración entre nuestro equipo de Sistema de Diseño y el resto de la organización de diseño.

Por ejemplo, podríamos tener un token de diseño para nuestro color de texto predeterminado que se vea así: Text/Default: #C4C4C4. También podríamos tener un token de diseño que se utilice como valor de margen o relleno, que se vea así: Space/space-1: 4px. Incluso tenemos algunos tokens que apuntan a otros tokens como su valor.

Usamos estos tokens de diseño para crear variables CSS en nuestro código. Por ejemplo, el token de diseño para nuestro color de texto predeterminado que vimos antes se convierte en var(--colors-text-default), que luego podemos usar como valor para la propiedad de color CSS de cualquier elemento HTML, así:

color: var(--colors-text-default);

Esa variable hace referencia a un token de color subyacente:

--colors-text-default: var(--core-colors-gray-400);

Y estas variables de color están vinculadas a nuestros valores hexadecimales base:

--core-colors-gray-400: #C4C4C4;

Uso en nuestro código

Dado que Webflow es una base de código madura que ha pasado por varias iteraciones de soluciones de estilo basadas tanto en JS como en CSS a lo largo de su vida, implementar tokens de diseño no fue una tarea sencilla. Para complicar aún más las cosas, la base de código tenía numerosas apariciones de valores de estilo codificados de forma rígida, lo que provocaba estilos inconsistentes y diseños de componentes hechos a medida.

Primero nos tomamos el tiempo de unificar nuestros sistemas para que todos pudieran usar el mismo conjunto de variables CSS. Luego, reemplazamos cualquier valor codificado de forma rígida para usar esas variables en su lugar. El proceso de unificación tomó un par de meses. Sin embargo, este trabajo inicial valió mucho la pena, ya que ahora tenemos una única fuente de verdad para nuestros tokens de diseño y estilos.

Nuestro sistema de estilos basado en CSS que utiliza archivos .less define todos nuestros tokens de diseño como variables Less que pueden usarse en otros archivos .less . Nuestro sistema de estilos basado en JS define todos nuestros tokens de diseño dentro de lo que, esencialmente, se reduce a un objeto de pares clave-valor.

Esto nos permite aplicar estilos a nuestros elementos usando CSS/LESS de esta manera:

.button {  
  color: @d2--textDefault;
}

O para dar estilo a nuestros elementos usando nuestro sistema de estilos interno basado en JS, así:

const HelpText = emotionStyled('div')({  
  color: tokens.colors.textDefault,
});

Lo importante aquí es que todo utiliza estos tokens y variables. Ya no tenemos valores de estilo base codificados de forma rígida en ninguna parte.

¡Incluso contamos con herramientas para detectar proactivamente cuando los desarrolladores intentan añadir valores de estilo fijos en las solicitudes de extracción de GitHub! Esta herramienta analiza el árbol de sintaxis abstracta (AST) del código e informa de cualquier valor de estilo que no utilice nuestros tokens de diseño. Así mantenemos nuestro código limpio y evitamos futuras regresiones por usos de estilo poco ideales.

Actualización de estilos

Tener esta configuración nos permite realizar cambios de interfaz a gran escala con bastante facilidad.

Si queremos cambiar nuestro color de texto predeterminado, actualizamos el valor del token de diseño en un solo lugar en Figma y en un solo lugar en nuestro código. Luego, el resto simplemente funciona. Como todo nuestro código frontend utiliza estos tokens, cuando se cambia el valor de color de un token, el color se actualiza en toda nuestra aplicación.

Es el sueño, ¿verdad? Actualizar una vez y ver los efectos en todas partes. Se acabó eso de buscar cientos o miles de instancias donde se usó un color y reemplazarlas, esperando no haberte dejado ninguna.

Este sistema también facilita mucho la creación de temas. Mencionamos antes que el Diseñador permite elegir entre un tema predeterminado, uno más oscuro o uno más brillante. Para soportar estos tres temas, tenemos tres archivos de configuración que contienen todos los valores de los tokens de diseño para cada uno. Los nombres de las variables son iguales para cada tema (¡y TypeScript los hace cumplir!), pero los valores cambian. Y como nuestros componentes hacen referencia a los nombres de las variables en sus estilos, cambiar de tema simplemente funciona para cada componente. Solo tenemos que intercambiar el conjunto de tokens y valores usados en nuestra aplicación según el tema seleccionado, y los estilos se aplican en todas partes.

const lightThemeColors: ThemeTokens = {  
  textDefault: coreColorTokens.gray[800],  
  /* more tokens here */
};
const darkThemeColors: ThemeTokens = {
  textDefault: coreColorTokens.gray[400],  
  /* more tokens here */
};

Siguiendo adelante

Con nuestro sistema actual, podemos responder a los comentarios de los clientes y aportar valor al negocio mucho más rápido. Hemos logrado dominar una base de código compleja y extensa, y realizar actualizaciones de estilo en la interfaz con total facilidad.

Entonces, ¿qué sigue? Ahora podemos seguir refinando el aspecto de nuestra aplicación sin necesidad de una gran inversión de tiempo. ¿Podría significar un modo claro en el Diseñador? ¿Modo oscuro en el Panel de control? ¿Aún más personalización de temas? No prometemos nada, ¡pero las posibilidades son infinitas!