¿Qué es un sistema de diseño?
Un sistema de diseño es el conjunto compartido de decisiones de diseño, componentes y reglas que un equipo usa para construir un producto de forma coherente. Suele incluir tokens de diseño, una librería de componentes, guías de uso y documentación, mantenidos como una única fuente de verdad para diseño y código.
De qué está hecho
La mayoría de sistemas de diseño que funcionan tienen cuatro capas, y a los que fracasan les suele faltar la primera.
Tokens de diseño: los valores con nombre que hay debajo de todo: color, tipografía, espaciado, radio, sombra, movimiento.
Componentes: las piezas reutilizables, construidas para referenciar tokens en vez de valores fijos. Un botón, un campo de formulario, un modal.
Guías: cuándo usar qué componente, cómo redactar para él, qué exige la accesibilidad.
Documentación: la superficie legible donde la gente encuentra todo lo anterior.
Lo que no es
No es una librería de componentes. Una librería es una capa. Un sistema de diseño sin tokens te da componentes consistentes sobre valores inconsistentes.
No es un archivo de Figma. Un archivo de Figma es una representación. Si el código no referencia las mismas decisiones, tienes dos sistemas de diseño que resultan parecerse.
No es la documentación. La documentación describe el sistema. Los equipos que empiezan por un sitio de documentación antes de decidir los tokens han escrito la descripción de nada.
Por qué se desvían
El modo en que fallan los sistemas de diseño no es el colapso, es la erosión. Nadie decide abandonarlo. Simplemente se acumulan valores fuera de él:
- Una diseñadora necesita un color que no está en la paleta y elige uno en el archivo.
- Un desarrollador con prisa escribe
padding: 14pxen vez de añadir un paso de espaciado. - Un asistente de IA genera un componente con hexadecimales inventados, porque no tiene forma de leer el sistema.
Cada caso es defendible por separado. En conjunto producen un código con varios sistemas de diseño paralelos que nadie decidió crear.
La respuesta no es la disciplina, que no escala. Es hacer que el sistema sea el camino de menor resistencia: disponible en cada herramienta que lo consume, en el formato que esa herramienta espera, sin un paso manual.
Cuánto se tarda en construirlos
A mano, un primer sistema coherente suele ser de días a semanas de trabajo. No porque ninguna decisión sea difícil, sino porque hay cientos y se afectan entre sí. Escalas de color que mantienen el contraste en cada combinación, un modo oscuro que no es una inversión, una nomenclatura semántica que sobreviva a un cambio de marca.
Dónde encaja Flash DSM
Flash DSM genera la capa de tokens y las especificaciones de componentes a partir de un prompt, una URL, un archivo de Figma o una captura, y después los mantiene sincronizados con el código, con Figma y con los agentes de IA que escriben código.