03 · Proyectos
Client confidentiel
Streaming – Plataforma por suscripción
La solicitud
Una plataforma de streaming por suscripción rediseñaba todo su producto, sin lenguaje visual definido ni biblioteca. El encargo eran las maquetas de alta fidelidad. Una misión de siete meses, como único diseñador, bajo acuerdo de confidencialidad.
La solución
Desde las primeras pantallas propuse construir un design system al mismo tiempo que las maquetas: primitivas, capa semántica, componentes y patrones, con las exigencias WCAG integradas en los tokens. Entregué un kit de Figma, guidelines en PDF y un skill de Claude que revisa las interfaces desarrolladas y señala las diferencias con las guidelines, para que el sistema se mantenga después del traspaso.
Dos niveles de tokens, no uno
Los valores brutos, colores, espaciados, radios, viven en una colección de primitivas. Una segunda colección, semántica, nombra las intenciones: superficie, borde, texto, estado. Los componentes solo consultan esa segunda capa. Es lo que permite cambiar un color de marca sin abrir un solo componente, y hablar con el cliente en términos de roles y no de códigos hexadecimales. La misma lógica vale más allá del color: tipografía, espaciados, radios, grosores de borde, duraciones de animación y puntos de ruptura también son variables.
bg/base apunta a color/ink/900, border/accent a color/fuchsia/500. Cambiar el fondo del producto es mover ese enlace, no abrir las pantallas.Un token semántico pone nombre a una intención. Es ese nombre, y no el color, lo que el desarrollador encuentra en el código.
Del token al componente
Los componentes están construidos con auto layout, variants y component properties, y se rellenan solo con tokens semánticos. Cuando seleccionas un modal y lees bg/overlay en su relleno en vez de un código de color, es la señal de que el sistema se sostiene: ningún valor está fijado dentro de un componente.
bg/overlay, un token y no un color.Lo que se entregó
- un kit Figma: los tokens como variables, los componentes y los patterns publicados como biblioteca de assets;
- unas guidelines en PDF: anatomía, estados, reglas de uso, restricciones de accesibilidad;
- un skill Claude de control: relee las interfaces desarrolladas y señala las desviaciones respecto a las guidelines.
El control de calidad forma parte de la entrega
Un design system se degrada en cuanto sale de Figma. El desarrollador interpreta, los casos no documentados se inventan, y seis meses después el producto ya no se parece a la biblioteca. El tercer entregable responde a eso. El skill relee las interfaces producidas, las confronta con las guidelines y devuelve las desviaciones. El control pasa a ser una etapa del desarrollo, en vez de una revisión de diseño que se va aplazando.
Accesibilidad
Las restricciones WCAG las sostienen los tokens semánticos: un par texto/superficie se valida una vez, a nivel de sistema, y todo componente que lo use hereda el contraste. Comprobar una pantalla se reduce entonces a comprobar que no ha esquivado el sistema.
