Auditoría de interfaz
Inventario de lo que hay: cuántos botones distintos, cuántos grises, qué componentes se repiten. El sistema empieza por ahí.
Producto digital
Un solo sistema
para todo el producto.
Tokens, componentes, documentación y reglas de gobierno para que varios equipos construyan una misma experiencia sin diseñar dos veces lo mismo.
Qué es
Diseñar una vez,
usar mil.
Un sistema de diseño es la biblioteca compartida con la que se construye el producto: los tokens (color, tipografía, espaciado), los componentes con sus estados y variantes, y las reglas de cuándo usar cada uno. Conecta el archivo de diseño con el código.
Lo construimos con lo que ya existe en el producto, priorizando los componentes que más se repiten, y lo dejamos gobernado: quién decide, cómo se propone un cambio y cómo se versiona. Knauf lo usó para cuatro aplicaciones con un solo sistema.
Qué hacemos
Así lo trabajamos.
En este orden, con el equipo dentro desde el primer día.
Fundamentos y tokens
Color, tipografía, espaciado, radios, sombras y movimiento como tokens con nombre, en diseño y en código.
Componentes
Biblioteca en Figma y en código (React, Web Components o el stack del producto), con estados, variantes y accesibilidad.
Documentación y gobierno
Guía de uso con ejemplos, y el proceso de contribución, revisión y versionado.
Te llevas
Lo que queda cuando terminamos.
El proyecto termina; el criterio se queda en tu equipo.
01 Componentes en diseño y código
Biblioteca
Sincronizados, con estados, variantes y accesibilidad resueltos.
02 Fundamentos compartidos
Tokens
Un solo origen para color, tipografía y espaciado en todos los productos.
03 Documentación y gobierno
Guía
Cómo usar cada componente y cómo evoluciona el sistema sin nosotros.
Cuándo tiene sentido
El momento adecuado.
Cuando hay más de un equipo construyendo el producto, cuando cada pantalla nueva reinventa los componentes, cuando la deuda de interfaz frena el desarrollo o cuando hay que unificar varias aplicaciones bajo una misma experiencia.
Si no estás seguro de que sea tu caso, cuéntanoslo: la primera conversación sirve para dimensionar el problema real.
Hablemos de tu casoPreguntas frecuentes
Lo que suelen preguntarnos
sobre sistemas de diseño.
¿Sistema de diseño o rediseño?
Un sistema se puede construir sobre el producto actual sin rediseñarlo, componente a componente. Si además hay que rediseñar, el sistema es el vehículo.
¿Lo hacéis también en código?
Sí. El sistema vale poco si vive solo en Figma: trabajamos con desarrollo para que los componentes existan en el stack del producto.
¿Cuánto cuesta mantenerlo?
Menos que no tenerlo. Definimos un gobierno ligero: un responsable, un canal para proponer cambios y versiones documentadas.
