Design system para agencias: entregar sitios distintos con la misma base técnica
El costo oculto de reinventar componentes en cada entrega
Una agencia que entrega cinco sitios por trimestre conoce la escena: cada proyecto arranca desde un theme nuevo, el botón se llama distinto en cada repositorio, el header se reescribe y el equipo de diseño vuelve a dibujar el mismo formulario. El resultado se ve bien en la demo y se vuelve caro en el mes tres, cuando hay que corregir un bug de accesibilidad en cinco código bases distintos.
Un design system no es una librería de componentes bonitos. Es la infraestructura que permite entregar proyectos distintos con la misma base técnica, sin que cada entrega empiece de cero.
Tokens, no estilos sueltos
La primera decisión es dónde vive el diseño. Si los colores, espacios y tipografías están hardcodeados en cada componente, cambiar de marca implica buscar y reemplazar en cincuenta archivos. Los design tokens resuelven eso: un archivo con las decisiones de diseño (color de marca, escala tipográfica, radios, sombras, breakpoints) que los componentes consumen por nombre.
:root {
--color-brand: #00A2CC;
--color-accent: #c23969;
--space-3: 1rem;
--radius-md: 8px;
}
Con esa capa, un sitio nuevo es un set de tokens distinto sobre los mismos componentes. Y cuando el cliente pide que el botón sea un poco más redondeado, se cambia una variable, no un componente.
La regla que evita el desastre
Ningún componente define colores o tamaños propios. Si un componente necesita un valor que no existe como token, se agrega el token; no se improvisa un hexadecimal en el archivo.
Un componente, varias marcas
El theming permite que el mismo botón, card o formulario se vea de una forma en la marca A y de otra en la marca B sin duplicar código. Se implementa con tokens por tema y un alcance (clase en el contenedor, atributo de tema) que redefine variables. Lo importante es que la estructura y el comportamiento no cambien: si un tema necesita un componente estructuralmente distinto, no es un tema, es otro componente.
Ese límite es sano. Los design systems se degradan cuando cada cliente pide una excepción y nadie dice que no. La excepción se resuelve con una variante documentada, no con un fork del repositorio.
Figma y código: paridad verificable
El handoff tradicional pierde información en cada traspaso. La versión moderna usa variables de Figma que reflejan los tokens del código y una nomenclatura compartida. No hace falta automatizar todo: alcanza con que el nombre del token en Figma sea el mismo que en CSS. Cuando el diseñador dice space-3, el desarrollador sabe exactamente qué valor tomar.
La verificación es concreta: un checklist por entrega que compara tipografía, espaciados, estados (hover, focus, disabled, error) y comportamiento responsive. Si el componente no tiene estado de error documentado, todavía no está terminado.
Accesibilidad y performance como defaults
Un design system es el único lugar donde la accesibilidad se resuelve una vez y se hereda en todos los proyectos. Contraste mínimo AA, foco visible, etiquetas asociadas, navegación por teclado y tamaño de área táctil se definen en el componente base, no en cada implementación.
Lo mismo con performance: imágenes con dimensiones explícitas, carga diferida por defecto, cero dependencias innecesarias. Si el botón base pesa ochenta kilobytes de JavaScript, el problema se replica en cada sitio del cliente.
Documentación y traspaso
Un sistema sin documentación es una dependencia más. Cada componente necesita propósito, variantes, estados, cuándo usarlo y cuándo no. Y el cliente o la agencia que recibe el proyecto tiene que poder levantarlo sin llamarte.
En nuestros proyectos white label, el entregable incluye repositorio, tokens, librería documentada y una guía de extensión. El código es del cliente: si mañana sigue con otro equipo, no se lleva una caja negra.
La métrica que importa no es cuántos componentes tiene el sistema, sino cuánto tarda una entrega nueva. Si el tiempo por proyecto baja entre un trimestre y el siguiente manteniendo la calidad, el design system está funcionando.
Si tu agencia necesita entregar más proyectos sin duplicar esfuerzo, trabajamos desarrollo white label con Figma a código pixel-perfect y design systems reutilizables. Contanos qué tenés en pipeline.
